Discussion :

[rafmos]

Bonjour,

Je suis débutant en Javascript et je bute sur un petit problème. J'aimerais qu'après avoir validé un formulaire, une fonction soit lancée.
Ce formulaire j'aimerais pouvoir le valider à l'aide d'un lien et non d'un bouton.

Avec un bouton, cela fonctionne :

Code :

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

<input type="button" value="Valider" onClick="add(this.form)">

Mais je n'arrive pas à trouver l'équivalent, mais en lien. Si je fais ceci, je ne peux pas récupérer les informations dans la fonction.

Code :

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

<a href="#" onClick="add(this.form)" alt="Ajouter au panier">Ajouter au panier</a>

Pouvez-vous m'aider ?

Merci beaucoup d'avance !

[vermine]

Bonjour,

Essayez toujours:

Code :

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

onClick="add(this.form); return false;"

[SpaceFrog]

il faudrait que l'on sache ce que fait le fonction add...

il est déja maladroit d'utiliser le onclick du bouton submit, il est préférable d'utiliser le onsubmit du formulaire.
En effet l'appui sur le bouton submit lance l'action du formulaire, et par conséquent si l'action du form pointe sur une url, on quitte la page.
Bien que le onclick s'exécute avant dans l'ordre des évènement rien ne garantit que la fonction lancée dans le onclick soit terminée avant de quitter la page.
Le onsubmit permet lui d'attendre la fin de la fonction lancée avant de quitter la page.

pour ce qui est de declencher une fonction sur une balise a ... il ne faut pas oublier d'inhiber le href...

Code :

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

1
2
<a href="#" onclick="mafonction(); return false;">

[rafmos]

Merci pour vos réponses. En ajoutant, "return false", je n'ai rien de mieux. Rien ne se passe en cliquant sur le lien.

Code :

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

<a href="#" onClick="add(this.form); return false;" alt="Ajouter au panier">Ajouter au panier</a>

La fonction add est pour l'instant toute simple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function add(formulaire) {
 
	var ref = formulaire.qnty.value;
	var label = formulaire.item_title.value;
	var qt = formulaire.qnty.value;
	var price = formulaire.price_id.value;
 
	alert(label+", "+ref+", "+qt+", "+price);
 
 
}

[SpaceFrog]

1) une syntaxe plus rigoureuse évite les soucis...

Code :

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

document.fomrs['nomform'].elements['nomelement']

2) tu n'as pas d'alert ??

onclick pas de C majsucule ...

[rafmos]

Je vous donne ici le lien du formulaire.

Code :

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

1
2
3
4
5
6
7
8
9
<form name="ajouter_panier">
	<input type="hidden" name="item_title" value="Test"> 
	<input type="hidden" name="item_number" value="">						
	<input type="hidden" name="price_id" value="3.00>
	<input type="hidden" name="expanded" value="0"> 
	<b></b> <input type="text" size=1 name="qnty" value="1" style="font-size:8pt;"> fois pour <span class="menu-price">CHF 3.00</span><a href="#" onClick="add(this.form); return false;" alt="Ajouter au panier">Ajouter au panier</a>
<input type="button" value="Ajouter au panier" onClick="add(this.form);">
 
</form>

[rafmos]

Nos messages se sont croisés.

1) une syntaxe plus rigoureuse évite les soucis...

Code :

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

document.fomrs['nomform'].elements['nomelement']

2) tu n'as pas d'alert ??

onclick pas de C majsucule ...

Non, je n'ai pas d'alerte avec le lien. Par contre, avec le bouton, oui.

[SpaceFrog]

regarde la coloration syntaxique ...
manque un "

[rafmos]

Oui, j'ai vu, mais c'est seulement dans le message, car j'ai dû l'adapter un peu. Je viens de corriger et tester exactement le code ci-dessous et le message s'affiche lorsque je clique sur le bouton, mais pas lorsque je clique sur le lien....

Code :

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

1
2
3
4
5
6
7
8
9
<form name="ajouter_panier">
	<input type="hidden" name="item_title" value="Test"> 
	<input type="hidden" name="item_number" value="">						
	<input type="hidden" name="price_id" value="3.00">
	<input type="hidden" name="expanded" value="0"> 
	<b></b> <input type="text" size=1 name="qnty" value="1" style="font-size:8pt;"> fois pour <span class="menu-price">CHF 3.00</span><a href="#" onclick="add(this.form); return false;" alt="Ajouter au panier">Ajouter au panier</a>
<input type="button" value="Ajouter au panier" onClick="add(this.form);">
 
</form>

[SpaceFrog]

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type="text/javascript">
function addto(formulaire) {
 
	var ref = document.forms['ajouter_panier'].elements['item_number'].value;
	var label = document.forms['ajouter_panier'].elements['item_title'].value;
	var qt = document.forms['ajouter_panier'].elements['qnty'].value;
	var price = document.forms['ajouter_panier'].elements['price_id'].value;
 
	alert(label+", "+ref+", "+qt+", "+price);
}
</script>
<style type="text/css">
fieldset {
min-height: 300px;
}
 
fieldset {
height: 300px;
}
</style>
</head>
 
<body>
<form name="ajouter_panier" action="#">
	<input type="hidden" name="item_title" value="Test" /> 
	<input type="hidden" name="item_number" value="" />						
	<input type="hidden" name="price_id" value="3.00" />
	<input type="hidden" name="expanded" value="0" /> 
	 <input type="text" size=1 name="qnty" value="1" style="font-size:8pt;" /> fois pour <span class="menu-price">CHF 3.00</span><a href="#" onclick="addto(); return false;" alt="Ajouter au panier">Ajouter au panier</a>
<input type="button" value="Ajouter au panier" onclick="addto();">
 
</form> </body>
 
</html>

c'est this.form qui coinçait

[rafmos]

Parfait, merci beaucoup ! Je viens de trouver une autre solution, mais je crois que vais prendre la tienne. Mais ma solution ne marche que lorsque l'on veut utiliser un image pour le lien. Mais c'est ce que je voulais, de toute façon.

Ma solution :

Code :

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

<INPUT TYPE="IMAGE" SRC="images/add.gif" alt="Ajouter au panier" BORDER="0" onClick="add(this.form); return false;">