[Resolu] JS s'arrete de s'executer...

Marsh Posté le 12-03-2010 à 16:36:14

Bonjour a tous !

Alors je reviens avec un petit problème... Ca fait un peu plus d'un jour que je bute sur le script, sans réussir à le résoudre le problème principal... ( ca fait longtemps que je n'ai plus fait de JS :pt1cable: )

Alors d'abord petite explication :

J'ai un formulaire qui permet de renseigner les informations d'un matériel.
Au début, une seule ligne est affiché, et si l'utilisateur veut renseigner d'autres produits, il ajoute une ligne. ( donc dynamiquement ).
Apres je vérifie que l'utilisateur a remplit tous les champs. Si l'utilisateur a oublié? un champs, je le colore en rouge. Et c'est la que ca bloque....
J'utilise une boucle pour vérifier cela, mais apres avoir vérifier le premier champs, le script s'arrete, et la page se recharge...

Voila le code HTML :

Code :

<head>
<script src="js/verifform.js" type="text/javascript" LANGUAGE="JavaScript"></script>
</head>
<body>
[...]
<form action="index.php" method="POST" onsubmit="return verifForm(this)">
<div class="left">
<p>Nom : <br>
<input type="text" name="nom" /></p>
<p>Prenom : <br>
<input type="text" name="prenom" /></p>
<p>Adresse : <br>
<input type="text" name="adresse" /></p>
<p>E-Mail : <br>
<input type="text" name="mail" onblur="verifMail(this)"/></p>
</div>
<div class="right">
<br>
<p>Code Postal : <br>
<input type="text" name="cp" /></p>
<p>Ville : <br>
<input type="text" name="ville" /></p>
<p>Pays : <br>
<input type="text" name="pays" /></p>
</div>
<div class="center">
<p>Société ( facultatif )<br>
<input type="text" name="societe" /></p>
<p>Numero de TVA ( si vous êtes une société assujettie ) : <br>
<input type="text" name="tva" /></p>
</div>
<fieldset>
<legend>Coordonnées des matériels à prendre en extension de garantie</legend>
<table id="produit">
<tr>
<td>N°</td>
<td>Marque</td>
<td>Référence</td>
<td>Date d’achat</td>
<td>Lieu d’achat</td>
<td>Vendeur</td>
<td>N°Série</td>
</tr>
<tr>
<td><input type="text" name="materiel0" size="5" value="0" disabled/></td>
<td><input type="text" name="marque0" size="15"/></td>
<td><input type="text" name="ref0" size="15"/></td>
<td><input type="text" name="dateachat0" size="15"/></td>
<td><input type="text" name="lieuachat0" size="15"/></td>
<td><input type="text" name="vendeur0" size="15"/></td>
<td><input type="text" name="serial0" size="15"/></td>
</tr>
</table>
<input type="button" value="Ajouter un produit" onClick="AddOneRow()" >
</fieldset>
<br>
<input type="submit" value="Valider" />
</form>
[...]
</body>

Et voici le code JS :

Code :

var nbproduit=0;
function AddOneRow(){
nbproduit = nbproduit+1;
var newRow = document.getElementById('produit').insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.innerHTML = '<input type="text" name="materiel'+nbproduit+'" size="5" value="'+nbproduit+'" disabled/>';
var newCell = newRow.insertCell(1);
newCell.innerHTML = '<input type="text" name="marque'+nbproduit+'" size="15"/>';
var newCell = newRow.insertCell(2);
newCell.innerHTML = '<input type="text" name="ref'+nbproduit+'" size="15"/>';
var newCell = newRow.insertCell(3);
newCell.innerHTML = '<input type="text" name="dateachat'+nbproduit+'" size="15"/>';
var newCell = newRow.insertCell(4);
newCell.innerHTML = '<input type="text" name="lieuachat'+nbproduit+'" size="15"/>';
var newCell = newRow.insertCell(5);
newCell.innerHTML = '<input type="text" name="vendeur'+nbproduit+'" size="15"/>';
var newCell = newRow.insertCell(6);
newCell.innerHTML = '<input type="text" name="serial'+nbproduit+'" size="15"/>';
}
function verifForm(f)
{
var nomOk = verifVide(f.nom);
var prenomOk = verifVide(f.prenom);
var adresseOk = verifVide(f.adresse);
var mailOk = verifMail(f.mail);
var cpOk = verifVide(f.cp);
var villeOk = verifVide(f.ville);
var paysOk = verifVide(f.pays);
var marque = new Array();
var ref = new Array();
var dateachat = new Array();
var lieuachat = new Array();
var vendeur = new Array();
var serial = new Array();
for (i=0; i<2; i++) {
var marque_i = 'f.marque'+i;
marque_i = eval(marque_i);
marque[i] = verifVide(marque_i);
//alert(marque[i]); => je recoit l'alerte
var ref_i = 'ref'+i;
ref_i = eval(ref_i);
ref[i] = verifVide(ref_i);
//alert(ref[i]); => Aucune alerte, la page se recharge après la première :/
var date_i = 'dateachat'+i;
date_i = eval(date_i);
dateachat[i] = verifVide(date_i);
var lieu_i = 'lieuachat'+i;
lieu_i = eval(lieu_i);
lieuachat[i] = verifVide(lieu_i);
var vendeur_i = 'vendeur'+i;
vendeur_i = eval(vendeur_i);
vendeur[i] = verifVide(vendeur_i);
var serial_i = 'serial'+i;
serial_i = eval(serial_i);
serial[i] = verifVide(serial_i);
}
if(nomOk && prenomOk && adresseOk && mailOk && cpOk && villeOk && paysOk) {
return true;
}
else {
alert("Veuillez remplir les champs obligatoires" );
return false;
}
}
function surligne(champ, erreur)
{
if(erreur)
champ.style.backgroundColor = "#fba";
else
champ.style.backgroundColor = "";
}
function verifVide(champ)
{
if(champ.value == "" )
{
surligne(champ, true);
return false;
}
else
{
surligne(champ, false);
return true;
}
}
function verifMail(champ)
{
var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
if(!regex.test(champ.value))
{
alert ("veuillez saisir une adresse email valide." );
surligne(champ, true);
return false;
}
else
{
surligne(champ, false);
return true;
}
}

Auriez vous une idée du pourquoi cela beug ?

Et, si jamais c'est cela, est ce qu'un return false; ou return true; peut faire arreter une boucle ?

Merci.

Message édité par fabien1203 le 18-03-2010 à 11:30:16

Reply

Marsh Posté le 12-03-2010 à 16:36:14

Reply

Marsh Posté le 12-03-2010 à 20:30:54

le problème vient de cette horreur :

Code :

var ref_i = 'ref'+i;
ref_i = eval(ref_i);
ref[i] = verifVide(ref_i);
//alert(ref[i]); => Aucune alerte, la page se recharge après la première :/
var date_i = 'dateachat'+i;
date_i = eval(date_i);
dateachat[i] = verifVide(date_i);
var lieu_i = 'lieuachat'+i;
lieu_i = eval(lieu_i);
lieuachat[i] = verifVide(lieu_i);
var vendeur_i = 'vendeur'+i;
vendeur_i = eval(vendeur_i);
vendeur[i] = verifVide(vendeur_i);
var serial_i = 'serial'+i;
serial_i = eval(serial_i);
serial[i] = verifVide(serial_i);

au cas où voici le lien vers Jsfiddle je n'ai encore rien corrigé, j'ai juste mis un javascript:; sur le action ce qui permet de voir les erreurs sans passer à la page.

installer firefox, met action="javascript:;" sur ton form et test, et regarde les erreurs

http://www.jsfiddle.net/FbrBh/

Message édité par gatsu35 le 12-03-2010 à 20:32:33

---------------
Blablaté par Harko

Reply

Marsh Posté le 14-03-2010 à 13:14:05

Ok merci, je vais voir ca.

Par contre, pourquoi est ce une horreur ? ^^

Message cité 1 fois

Reply

Marsh Posté le 15-03-2010 à 08:50:49

fabien1203 a écrit :

Ok merci, je vais voir ca.

Par contre, pourquoi est ce une horreur ? ^^

Tu fais des eval pour générer le nom d'un champ, et surtout il n'est pas possible d'accéder à un champ de formulaire par une simple "variable".
le champ est accessible soit par son id soit par son name.

J'aurai mis des id en plus des name :

Code :

<td><input type="text" id="ref0" name="ref0" size="15"/></td>

Et ensuite tu y accèdes par document.getElementById

Code :

var ref_i = document.getElementById('ref'+i);
ref[i] = verifVide(ref_i);

si on veut rester dans ton cas et utiliser les name
tu as juste à savoir que tu as ton formulaire qui contient une référence à ses éléments de formulaire enfants :

Code :

var ref_i = monForm['ref'+i];
ref[i] = verifVide(ref_i);

---------------
Blablaté par Harko

Reply

Marsh Posté le 18-03-2010 à 11:26:54

C'est bon tout mon code fonctionne..
J'ai modifié tellement de chose que je ne sais plus ce que j'ai modifié... ^^

En tout cas, merci pour ton aide gatsu

Reply

[Resolu] JS s'arrete de s'executer...

Sujets relatifs:

Leave a Replay