modification d'un menu javascript [Résolu]

[escalibur2b]

Bonjour,

J'ai actuellement un module avec des checkbox à cocher et un bouton submit,
j'aimerais remplacer ceci par une image cliquable qui aurait le même effet.

Voici une copie du code actuellement en place :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table border="0" width="900">
	<tr>
		<td width="300"><input type="checkbox" name="am2">AM2</td>
		<td width="300"><input type="checkbox" name="am3">AM3</td>
		<td width="300"><input type="checkbox" name="775">775</td>
	</tr>
	<tr>
		<td width="300"><input type="checkbox" name="1155">1155</td>
		<td width="300"><input type="checkbox" name="1156">1156</td>
		<td width="300"><input type="checkbox" name="1366">1366</td>
	</tr>
</table>
<table border="0" width="900">
	<tr>
		<td><input type="submit" name="envoyer_socket" value="Valider le socket">
            </form></td>
	</tr>
</table>

Merci par avance pour votre aide.

Jeff

[Watilin]

Salut,

normalement on a input type="image" qui a le même rôle que le submit, mais qui permet en plus de spécifier une image avec l'attribut src. Mais il n'est pas pris en charge de la même manière par tous les navigateurs, et ça peut poser problème avec le CSS ou la gestion des évènements.

Par contre, une solution simple, c'est utiliser une vraie image et de gérer son évènement click :

Code HTML :

1
2
3
<form ... id="leForm">
   <img src="..." alt="Envoyer" onclick="document.getElementById('leForm').submit()" />
</form>

[escalibur2b]

Bonjour Watilin,

Merci pour ta réponse rapide.

Je vais te déranger encore un peu si tu me l'autorise,
peux tu stp me donner un exemple concret par rapport a mon bout de code.

Merci par avance.

[Watilin]

Peux pas
Je sais pas comment tu as déclaré ton <form>.

[escalibur2b]

Désolé,

voici le code complet.

Code :

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
      <tr>
      <td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
          <tr class="infoBoxContents">
 
        <td class="main">
 
 
 
		<table align="center" width="100%" bgcolor="white" border="0">
        <tr>
  			<font size="+1">Choississez votre configuration en fonction de vos besoins. N'hésitez pas à nous contacter pour plus d'informations</font>.
 
 
        </tr>
 
 
 
        <tr> <!-- CHOIX DU SOCKET -->
 
 
<p><br>
&nbsp;</p>
<table border="0" width="900">
	<tr>
		<td>Veuillez sélectionner en premier la base de votre PC (socket) :<br>
            <form action="" method="post"></td>
	</tr>
</table>
<table border="0" width="900">
	<tr>
		<td width="300"><input type="checkbox" name="am2">AM2</td>
		<td width="300"><input type="checkbox" name="am3">AM3</td>
		<td width="300"><input type="checkbox" name="775">775</td>
	</tr>
	<tr>
		<td width="300"><input type="checkbox" name="1155">1155</td>
		<td width="300"><input type="checkbox" name="1156">1156</td>
		<td width="300"><input type="checkbox" name="1366">1366</td>
	</tr>
</table>
<table border="0" width="900">
	<tr>
		<td><input type="submit" name="envoyer_socket" value="Valider le socket">
            </form></td>

merci

[Eric2a]

Salut,

Tu as juste à utiliser les lignes déjà suggérées par Watilin.

Remplacer donc

Code html :

<form action="" method="post">

par

Code html :

<form action="" method="post" id="leForm">

et...

Code html :

<input type="submit" name="envoyer_socket" value="Valider le socket">

par

Code html :

<img src="..." alt="Envoyer" onclick="document.getElementById('leForm').submit()" />

Remarque : Il n'y aura plus de variable POST nommée envoyer_socket transmise.


PS : Utilise la balise [ code ] du forum pour une meilleure lisibilité de ton code.

[escalibur2b]

Merci Eric2a,

Je teste ça demain, et je vous tiens au courant.

Bonne soirée à tous.

[escalibur2b]

Bonjour à tous,

Je ne dois vraiment pas être doué, je n'arrive pas à faire fonctionner la commande que vous m'avez donné.

Help me please.

Merci par avance

[escalibur2b]

Bonjour eric2a,

Je viens de comprendre pourquoi cela ne marche pas, si on supprime le POST envoyer_socket, la suite du fichier ne fonctionnera pas.

[Eric2a]

Essaie à nouveau en plaçant ce champ caché n'importe où dans le formulaire...

Code xhtml :

<input type="hidden" name="envoyer_socket" value="Valider le socket" />

[escalibur2b]

Merci eric2a,

Le code fonctionne en lui-même, mais il ne sait pas quelle partie du code suivant il doit appliquer

Voici le début de la suite du code :

#

Code :

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
<table border="0" width="100%">
	<tr>
		<td>
 
		 <tr>
        <td width="60%" style="font-size:12px">
 
 
        <?php 
 
		if (isset($_POST['envoyer_socket']))
		{
 
			if ($_POST['1366'])
			{
			?>
 
 
               &bull; Carte mère :
   		</td>
        <td width="40%">  
 
 
        <form action="" method="post" >
 
 
        <select name="listbox_cm" style="width:600px;"> 
             	<option name="cm" value="cm" >Aucun(e)</option>
 
                    <?php
 
 
					$req = "select distinct * from products p, products_description pd, products_to_categories p2c, categories_description cd where p.products_status = '1' and p.products_id = pd.products_id and p.products_id = p2c.products_id and p2c.categories_id = cd.categories_id and cd.categories_id LIKE '1065' and p.socket_cm LIKE '%1366%' order by p.products_price ASC ";
      	               $sql = mysql_query($req);
                          while ($data = mysql_fetch_assoc($sql)) 
                            {
                                $nom_cm = $data['products_name'];
								$prix_cm = round($data['products_price'] * 1.196, 2);
                                $id_cm = $data['products_id'];
 
                                echo "<option value=$id_cm> ".($nom_cm)." - ".($prix_cm)." €</option>";
 
							}		                   
                      ?>                         
               </select>
           </td>
           </tr>
           <tr>
        <td width="60%" style="font-size:12px">
   &bull; Processeur :
   		</td>
        <td width="40%">  <select name="listbox_proc" style="width:600px;"> 
             	<option name="proc" value="proc" >Aucun(e)</option>
 
                    <?php
 
 
					$req = "select distinct * from products p, products_description pd, products_to_categories p2c, categories_description cd where p.products_status = '1' and p.products_id = pd.products_id and p.products_id = p2c.products_id and p2c.categories_id = cd.categories_id and cd.categories_id LIKE '1066' and p.socket LIKE '%1366%' order by p.products_price ASC ";
      	               $sql = mysql_query($req);
                          while ($data = mysql_fetch_assoc($sql)) 
                            {
                                $nom_proc = $data['products_name'];
								$prix_proc = round($data['products_price'] * 1.196, 2);
                                $id_proc = $data['products_id'];
 
                                echo "<option value=$id_proc> ".($nom_proc)." - ".($prix_proc)." €</option>";
 
							}		                   
                      ?>                         
               </select>
           </td>
           </tr>

Merci pour votre aide

[Watilin]

+1

Par contre, pourquoi ces infos étaient-elles sur le bouton submit ? Si c'est le seul bouton submit, la valeur Valider le socket est envoyée à chaque fois, ce qui n'est pas vraiment utile. Il faudrait peut-être revoir le script côté serveur…

[escalibur2b]

Merci a vous de m'avoir aider, vous m'avez mis sur la bonne voie, et j'ai réussi à l'adapter à mes besoins par rapport à mes requêtes SQL.

Merci. A bientôt peut-être.

Bonne journée