modification d'un menu javascript

Version imprimable

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

10/07/2011, 19h09
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:

1 2 3 <form ... id="leForm"> <img src="..." alt="Envoyer" onclick="document.getElementById('leForm').submit()" /> </form>
;)
10/07/2011, 19h18
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.
10/07/2011, 20h00
Watilin

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

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

10/07/2011, 21h14
Eric2a

Salut,

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

Remplacer donc

Code:

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

par

Code:

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

et...

Code:

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

par

Code:

<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.
10/07/2011, 22h20
escalibur2b

Merci Eric2a,

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

Bonne soirée à tous.:ccool:
11/07/2011, 08h50
escalibur2b

Bonjour à tous,

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

Help me please. :oops:

Merci par avance
11/07/2011, 13h10
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.
11/07/2011, 13h30
Eric2a

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

Code:

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

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

11/07/2011, 14h25
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…
11/07/2011, 14h59
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