modification d'un menu javascript

**escalibur2b** · 10/07/2011, 18h30

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 :

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

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 :

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

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

**escalibur2b** · 10/07/2011, 19h18

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** · 10/07/2011, 20h00

Peux pas

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

**escalibur2b** · 10/07/2011, 20h47

Désolé,

voici le code complet.

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
      <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** · 10/07/2011, 21h14

Salut,

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

Remplacer donc

Code html :

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

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

par

Code html :

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

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

et...

Code html :

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

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

par

Code html :

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

<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** · 10/07/2011, 22h20

Merci Eric2a,

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

Bonne soirée à tous.

**escalibur2b** · 11/07/2011, 08h50

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** · 11/07/2011, 13h10

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** · 11/07/2011, 13h30

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

Code xhtml :

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

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

**escalibur2b** · 11/07/2011, 14h24

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 :

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
<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** · 11/07/2011, 14h25

+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** · 11/07/2011, 14h59

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

modification d'un menu javascript

JavaScript

Discussions similaires

Partager

Partager