PB fonction javascript [RESOLU]

PB fonction javascript [RESOLU] - HTML/CSS - Programmation

Marsh Posté le 25-11-2009 à 19:33:20    

Bonjour, j'ai un pb c'est que j'ai une fonction qui s'execute sur l'evenement onload que j'ai mis dans le <body> de ma page contact.html . Et cette fonction sert à recuperer les variables dans l'url transmise depuis une ma page commande.html et qui vont alimenté un tableau. Et sur cette meme page (contact.html) j'ai un formulaire de contact qui lorsqu'il n'est pas valide recharge la page ce qui réactive ma fonction du onload et qui alimente mon tableau avec des données erronées du coup. Voila j'espere avoir bien expliqué mon pb . Donc quelqu'un a une idée pour contourné le pb ? et cela sans utiliser de php  ;) .
 
Ensuite j'ai un autre pb c'est que j'ai une fonction en toujours en js qui verifie mes champs de formulaires pour voir s'il sont remplis et dans le cas contraire change la couleur du champ vide. Le truc c'est que lorsqu'un champ est vide il change de couleur une demi seconde puis redevient blanc, pareil pour le focus(). voici ma fonction
 

Code :
  1. function verif_form()
  2. {
  4. if(document.getElementById(1).value == "" )
  5. {
  6.  document.getElementById(1).style.background = 'red';
  7.  document.getElementById(1).focus();
  9. }
  11. }


 
 
Quelqu'un aurait il une solution a ce pb ?
 
Merci d'avance


Message édité par vylco le 26-11-2009 à 15:00:45
Reply

Marsh Posté le 25-11-2009 à 19:33:20   

Reply

Marsh Posté le 25-11-2009 à 21:03:10    

tu crois qu'avec ça on va réussir à t'aider ?  
ben nan, file plus de code donc le code HTML


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

Marsh Posté le 25-11-2009 à 22:46:30    

ok donc voila le code de mon formulaire ou j'essaye de verifier les si les champs ont bien été saisis
 

Code :
  1. <FORM name="form" >
  2.        <table width="100%" cellpadding="2" cellspacing="0" id="form_text" border=1>
  3.         <tr>
  4.          <td>
  5.           <td>
  6.            Nom
  7.           </td>
  8.          </td>
  9.          <td>
  10.           <td>
  11.            <input type=text size=20 name="nom" id="1">
  12.            <div class="invisible" class="t_err" id="2">Vous devez saisir le nom!</div>
  13.           </td>
  14.          </td>
  15.         </tr>
  17.         <tr>
  18.          <td>
  19.           <td>
  20.            Prénom
  21.           </td>
  22.          </td>
  23.          <td>
  24.           <td>
  25.            <input type=text size=20 name="prenom">
  26.           </td>
  27.          </td>
  28.         </tr>
  30.         <tr>
  31.          <td>
  32.           <td>
  33.            Date de naissance
  34.           </td>
  35.          </td>
  36.          <td>
  37.           <td>
  38.            <input type=text size=20 name="ddn">
  39.           </td>
  40.          </td>
  41.         </tr>
  42.                                                               </table>
  43. </form>

Reply

Marsh Posté le 26-11-2009 à 10:09:58    

- ton code HTML est à revoir notamment au niveau du nombre de TD, tu en a 2 imbriqués à chaque fos, fait un peu de nettoyage, il manque ausis le </table>
- on ne peut pas mettre de chiffre uniquement pour un id, il faudrait un id du genre : "champ_1" au pire, mais un id explicite serait mieux : ex <input id="prenom" name="prenom"/>


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

Marsh Posté le 26-11-2009 à 12:00:18    

Salut, ok pour les <td> , le </table> j'ai oublié de remettre ici car j'ai posté qu'une partie du formulaire. Ok pour l'id.
 
sinon pour bien te montré le pb j'ai fais un formulaire avec un champ et un bouton, donc si tu peux recopier dans une page html et cliquer sur le bouton tu verra par toi meme le pb.
 

Code :
  1. <html>
  2. <head>
  3. <title>test.html</title> 
  4. <script language="javascript">
  5. function test()
  6. {
  7. if (form_contact.zone.value == "" )
  8. {
  10.  form_contact.zone.style.backgroundColor = 'red';
  11. }
  13. }
  14. </script>
  16. </head>
  17. <body >
  20. <form name="form_contact" >
  21.      <table width="100%" border="1">
  22.        <tr>
  23.         <td width="50%">
  24.         Joomla 1.5
  25.         </td>
  26.         <td>
  27.         Commandé
  28.         <input id="zone" name="zone" type='text'size='15'>
  29.         </td>
  30.        </tr>
  34.        <tr>
  35.         <td colspan="2" align="right">
  36.           <br><input type=submit name="envoyer" value="Envoyer" onclick="test()">
  37.         </td>
  39.        </tr>
  40.      </table>
  41. </form>
  42. </body>
  44. </html>

Reply

Marsh Posté le 26-11-2009 à 12:37:01    

En mettant le submit on voit tout de suite ton pb (pas besoin de tester).
Le input type submit, POSTE le formulaire, mais ton onclick test(); execute une fonction
 
donc si on suis bien l'ordre :  
 
- execution de test()
- envoi du formulaire pour revenir à la page actuelle (action étant inexistant la page se recharge d'elle même)
 
Il faut éxécuter ton verif_form sur le onsubmit du form et retourner une valeur.
 

Code :
  1. function verif_form(form)
  2. {
  3. var nom = document.getElementById('nom');
  4. if(nom.value == "" )
  5.  {
  6.   nom.style.background = 'red';
  7.   nom.focus();
  8.   document.getElementById('nom_error').style.display = 'block';
  9.   return false;
  10.  }
  11. else {
  12.  nom.style.background = '';
  13.  document.getElementById('nom_error').style.display = 'none';
  14. }
  15. return true;
  16. }
  19. <form onsubmit="return verif_form(this);">
  20.        <table width="100%" cellpadding="2" cellspacing="0" id="form_text" border=1>
  21.         <tr>
  22.           <td>
  23.            Nom
  24.           </td>
  25.           <td>
  26.            <input type=text size=20 name="nom" id="nom">
  27.            <div class="invisible" class="t_err" id="nom_error">Vous devez saisir le nom!</div>
  28.          </td>
  29.         </tr>
  30.         <tr>
  31.           <td>
  32.            Prénom
  33.           </td>
  34.          <td>
  35.            <input type=text size=20 name="prenom" id="prenom">
  36.          </td>
  37.         </tr>
  38.         <tr>
  39.          <td>
  40.            Date de naissance
  41.          </td>
  42.          <td>
  43.            <input type=text size=20 name="ddn">
  44.          </td>
  45.         </tr>
  46.   </table>
  47. </form>


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

Marsh Posté le 26-11-2009 à 14:59:40    

En effet sa marche niquel, merci de ton aide ^^

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed