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