Validation de formulaire par lien et lancement de fonction

Version imprimable

04/08/2010, 08h33
rafmos

Validation de formulaire par lien et lancement de fonction

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:

<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:

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

Pouvez-vous m'aider ?

Merci beaucoup d'avance ! :)
04/08/2010, 08h37
vermine

Bonjour,

Essayez toujours:

Code:

onClick="add(this.form); return false;"
04/08/2010, 08h40
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:

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

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:

<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:

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); }

04/08/2010, 08h58
SpaceFrog

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

Code:

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

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

onclick pas de C majsucule ...

Je vous donne ici le lien du formulaire. ;)

Code:

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>

04/08/2010, 09h01
rafmos

Nos messages se sont croisés. ;)

Citation:

Envoyé par SpaceFrog

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

Code:

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. ;)
04/08/2010, 09h07
SpaceFrog

regarde la coloration syntaxique ...
manque un "

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:

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>

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
<!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

04/08/2010, 09h27
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:

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