demande d'aide pour modifier un bouton submit avec rollover

**carmen256** · 31/03/2007, 13h26

bonjour

Voici mon problème j'ai fait un bouton submit afin d'avoir une personnalisation de ce bouton compatible tout navigateur. Le bouton submit fonctionne c'est pas le problème. Mon probleme vient du fait que, si j 'ai deux boutons submit dans un formulaire qui postent vers une fonction php, je n'arrive pas à recupérer le nom du bouton utiliser pour le post.

exemple d'un panier.

j'ai un listing en formulaire ayant deux boutons supprimer valider. En fonction de la ligne cochée et du bouton utilisé, je récupère le nom du bouton sélectionné plus le numero de la ligne. Ce qui donne ceci en normal :
Ligne 1 avec numero
Ligne 2 avec numero
...etc
bouton valider et bouton supprimer

pour savoir quel bouton à été utilisé je fais ceci :

bouton dans le formulaire html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type='submit' name='action' value='valider'>

récuperation dans la fonction php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$a=$_POST['action']; // recuperation du nom du bouton action -> valider
echo"$a";

ce qui me donne Valider.

Mais avec ma fonction javascript j'ai aussi le post des valeurs dans le formlaire mais pas le nom du bouton utilisé car je n'arrive pas à insèrer le nom de celui-ci dans le code javascript et surtout à le récupérer.

Voic la page html contenant le javascript

page a.html contenant le code javascript.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<?php
//--connexion base
?>
<html>
<head>
<script type="text/javascript">
var submitRolls = new Object();
function submitroll(src, oversrc, name){
                                        this.src=src;
                                        this.oversrc=oversrc;
                                        this.name=name;
                                        this.alt="Submit Query";
                                        this.write=submitroll_write;
                                        }
                                        function submitroll_write()
                                        {
                                        var thisform = 'document.forms[' + (document.forms.length - 1) + ']';
                                        submitRolls[this.name] = new Object();
                                        submitRolls[this.name].over = new Image();
                                        submitRolls[this.name].over.src = this.oversrc;
                                        submitRolls[this.name].out = new Image();
                                        submitRolls[this.name].out.src = this.src;
                                        document.write
                                       	(
	'<A onMouseOver="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].over.src"' + 
	' onMouseOut="if (document.images)document.images[\'' + this.name + "'].src=submitRolls['" + this.name + '\'].out.src"' + 
	' HREF="javascript:'
	                                    );
                                          if (this.sendfield){
	                                         if (! this.sendvalue)
		                                        this.sendvalue = 1;
	                                            document.write(thisform, ".elements['", this.sendfield, "'].value='", this.sendvalue, "';");
												             }
                                        document.write(thisform + '.submit();void(0);"');
                                        if (this.msg)document.write(' onClick="return confirm(\'' , this.msg, '\')"');
                                        document.write('>');
                                        document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '" BORDER=0 NAME="' + this.name + '"');
                                          if (this.height)document.write(' HEIGHT=' + this.height);
                                            if (this.width)document.write(' WIDTH='  + this.width);
                                              if (this.otheratts)document.write(' ' + this.otheratts);
                                                document.write('></A>');
                                       if (this.sendfield){
	document.write('<INPUT TYPE=HIDDEN NAME="' + this.sendfield + '">');
	document.forms[document.forms.length - 1].elements[this.sendfield].value='';
	                                                      }
                                       }
</script>
 
<link href="../../ibe40/acceuil/fra/style_fr.css" rel="stylesheet" type="text/css">
</head>
<body>
<form method="post" action="fonction.php">
<tr>
<td><input type="text" name="nom"></td>
<td>
<script type="text/javascript">
var sr = new submitroll("../../ibe40/image/site_internet/bouton_supprimer.png","../../ibe40/image/site_internet/bouton_supprimer_survol.png","mysubmit1");
sr.write();
</script>
</td>
</tr>
<tr>
   <td>
     <script type="text/javascript">
var sr = new submitroll("../../ibe40/image/site_internet/panier_valider.png","../../ibe40/image/site_internet/panier_valider_survol.png","mysubmit2");
sr.write();
     </script>
   </td>
</td>
</form>
</body>
</html>

fonction qui recoit
fonction.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<?php
$a=$_POST['nom']; // ici je reçois le nom
$b=$_POST['action'];//ici j 'aimerai recevoir le nom du bouton
?>

Donc mon problème et que je n'arrive pas à mettre un nom à chaque bouton comme avec un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type='submit name='action' value='Valider'>

Pouvez vous m'aider à finir mon bouton javacript en lui mettant un nom récupérable. afin d'avoir une fonctionnalité totalement identique à un bouton submit.

Merci d'avance.

**Bisûnûrs** · 31/03/2007, 13h31

Je suppose que tu as essayé ça :
http://php.developpez.com/faq/?page=...ire_deuxsubmit ?

**carmen256** · 31/03/2007, 13h38

ca je connais ca ne fonctionne pas avec.

Mon problème ne vient pas du code php ou htlml mais du code javascript. Je créé un bouton javascript pour avoir les mêmes propriétés que le bouton submit html dans un formulaire, mais avec une personnalisation de ce dernier, au niveau de l'image afin que cela fonctionne dans tous les navigateurs.

Le code fonctionne mais je ne vois pas comment mettre le nom du bouton dans la fonction javascript, afin de le récupérer. Mon but est d'avoir un bouton submit javascript qui fonctionne de manière identique au bouton submit en utilisant son nom.

**Bisûnûrs** · 31/03/2007, 13h45

Je ne sais ps qui t'a pondu tout ce script, mais c'est de la daube qui ne sert pas à grand chose ..

Tu peux simplement faire ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="image" src="lienverstonimage1" name="nom1" onmouseover="this.src='lienverstonimage2'" onmouseout="this.src='lienverstonimage1'" />
<input type="image" src="lienverstonimage3" name="nom2" onmouseover="this.src='lienverstonimage4'" onmouseout="this.src='lienverstonimage3'" />

**carmen256** · 31/03/2007, 13h48

Possible que j'ai vu trop compliqué je tente ton code

**carmen256** · 31/03/2007, 14h49

J'ai tenté cela mais je n'arrive pas à recupérer la valeur etc dans value='etc'.

as tu une solution s'il te plait?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
</head>

<body>
<form method="post" action="fonction.php">
<input type="image" onClick="Submit" name="action" src="../../ibe40/image/site_internet/panier_valider.png" onMouseOver="this.src='../../ibe40/image/site_internet/panier_valider_survol.png'" onMouseOut="this.src='../../ibe40/image/site_internet/panier_valider.png'" width="58" height="30" value="etc"> 
</form>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$a=$_POST['action'];
echo"$a";

**Bisûnûrs** · 31/03/2007, 14h52

Les value ne sont pas envoyées en POST, donc tu ne pourras pas.

**carmen256** · 31/03/2007, 15h57

Ca y est j ai reussi à faire ce que je voulais et en plus en css sans javascript.

Cela fonctionne sous opera, firefox,ie6,ie7

Bouton submit avec image perso et image lors du survol

html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<html>
<head>
<style>
.position{
position:absolute; left:50%;
top:50%;
width:58px;
height:30px;
margin-left:-27px;
margin-top:-15px; 
border:0px;}
.essai {
   width: 58px;
   height: 30px;
   margin: 0;
   padding: 0;
   border: 0;
   background:url(../../ibe40/image/site_internet/bouton_supprimer.png);    
background-repeat:no-repeat;;
   text-indent: 60px;
   cursor: pointer;
}
.essai:hover {
   background-position: 0 -128px;
   width: 58px;
   height: 30px;
background:url(../../ibe40/image/site_internet/bouton_supprimer_survol.png);
}
</style>
</head>
 
<body>
<table class='position'>
<form method="post" action="fonction.php">
<tr>
   <td>
   <input type='text' name='nom'  />
   </td>
</tr>
<tr><td>
<button type="submit" name="action" class="essai" value="envoyer">envoyer</button>
</td>
</tr>
</form>
</table> 
</body>
</html>

fonction.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<?php
$a=$_POST['action'];
$b=$_POST['nom'];
echo"$a<br>$b";
?>

Ca y est je recois les valeurs + le nom du bouton utilisé.

Est-ce que tu peux mettre ce script dans votre base de script pour ceux qui cherchent à faire un bouton submit personnalisable en css/html sans utiliser la balise a

Merci pour tout!!!
Gros bisous

**darakk** · 18/12/2008, 17h01

Fonctionne pas sous IE6 chez moi...

demande d'aide pour modifier un bouton submit avec rollover

JavaScript

Discussions similaires

Partager

Partager