Javascript dans html

Question

rim2004m

28 Mar 2014 à 11:05

bonjour
j'ai le code suivant:


<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8" />
        <title>Progression du profil</title>
    </head>

     <script type="text/javascript">
       function valider(){
       var nbremplis=0;

	if(form1.name.value !=='' ) {nbremplis=nbremplis+1; }
        if(form1.firstname.value!==''){nbremplis=nbremplis+1;}
        if(form1.email.value!==''){nbremplis=nbremplis+1;}
        if(form1.adresse.value!==''){nbremplis=nbremplis+1;}
        if(form1.ville.value!==''){nbremplis=nbremplis+1;}
        if(form1.telephone.value!==''){nbremplis=nbremplis+1;}
        if(form1.nationnalite.value!==''){nbremplis=nbremplis+1;}
        if(form1.lieunaissance.value!==''){nbremplis=nbremplis+1;}
        if(form1.mydescription.value!==''){nbremplis=nbremplis+1;}
        if(form1.coordbancaire.value!==''){nbremplis=nbremplis+1;}
        if(form1.profession.value!==''){nbremplis=nbremplis+1;}
        if(form1.revenu.value!==''){nbremplis=nbremplis+1;}
        if(nbremplis==0)
        {
        document.write("la progression de votre profile est: 0% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='0'>");
        document.write ("</progress>");
        }
        if(nbremplis==1)
        {
        document.write("la progression de votre profile est: 6% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='6'>");
        document.write ("</progress>");
        }
        if(nbremplis==2)
        {
        document.write("la progression de votre profile est: 12% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='12'>");
        document.write ("</progress>");
        }
        if(nbremplis==3)
        {
        document.write("la progression de votre profile est: 19% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='19'>");
        document.write ("</progress>");
        }
        if(nbremplis==4)
        {
        document.write("la progression de votre profile est: 25% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='25'>");
        document.write ("</progress>");
        }
        if(nbremplis==5)
        {
         document.write("la progression de votre profile est: 31% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='31'>");
        document.write ("</progress>");
        }
        if(nbremplis==6)
        {
        document.write("la progression de votre profile est: 38% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='38'>");
        document.write ("</progress>");
        }
        if(nbremplis==7)
        {
        document.write("la progression de votre profile est: 44% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='44'>");
        document.write ("</progress>");
        }
        if(nbremplis==8)
        {
        document.write("la progression de votre profile est: 50% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='50'>");
        document.write ("</progress>");
        }
        if(nbremplis==9)
        {
        document.write("la progression de votre profile est: 56% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='56'>");
        document.write ("</progress>");
        }
        if(nbremplis==10)
        {
        document.write("la progression de votre profile est: 63% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='63'>");
        document.write ("</progress>");
        }
        if(nbremplis==11)
        {
        document.write("la progression de votre profile est: 0% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='69'>");
        document.write ("</progress>");}
        if(nbremplis==12)
        {
         document.write("la progression de votre profile est: 75% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='75'>");
        document.write ("</progress>");}
        if(nbremplis==13)
        {
        document.write("la progression de votre profile est: 81% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='81'>");
        document.write ("</progress>");
        }
        if(nbremplis==14)
        {
        document.write("la progression de votre profile est: 87% </br> </br>"); 
        document.write ("<progress id='progress-bar' min='0' max='100' value='87'>");
        document.write ("</progress>");
        }
        return false;
        }
       // document.write ("<progress id='progress-bar' min='0' max='100' value='50'>");
        //document.write ("</progress>");
      </script>
    
{% endblock %}


<body>
     
<div id = "conteneur"> 
    
  

      
<form  action="{{ path('sifastform_progression')}}" method="post" name="form1" > 
<!--<form  action="{{ path('sifastform_progression')}}" method="post" name="form1" onsubmit="return valider();" >-->
<fieldset> 

             
<input type="text" id="name" name="nom" placeholder="NOM" data-trigger="change" data-required="true" />    
<input type="text" id="firstname" name="prenom" placeholder="PRENOM" data-trigger="change" data-required="true"/> 

<input type="text" id="email" name="email"placeholder="EMAIL" data-trigger="change" data-required="true"/>
<input type="text" id="adresse" name="adresse" placeholder="ADRESSE" data-trigger="change" data-required="true" />
<input type="text" id="ville" name="ville" placeholder="VILLE" data-trigger="change" data-required="true" />
<input type="text" id="telephone" name="telephone" placeholder="TELEPHONE" data-trigger="change" data-required="true" />
<label for="datenaissance"> DATE DE NAISSANCE</label>
<input name="date" type="date" max="2012-06-25" min="2011-08-13" value="2011-11-26" data-trigger="change" data-required="true">

<input type="text" id="nationnalite" name="nationalite" placeholder="NATIONALITE" data-trigger="change" data-required="true" />
<input type="text" id="lieunaissance" name="lieunaissance" placeholder="LIEU DE NAISSANCE" data-trigger="change" data-required="true" />
<input type="text" id="carteidentite" name="carteidentite" placeholder="CARTE D'IDENTITE" data-trigger="change" data-required="true" />
<input type="text" id="facebookconnect" name="facebookconnect" placeholder="FACEBOOK CONNECT" data-trigger="change" data-required="true" />
<input type="text" id="mydescription" name="mydescription" placeholder="MYDESCRIPTION" data-trigger="change" data-required="true" />
<input type="text" id="coordbancaire" name="coordbancaire" placeholder="COORDONEES BANCAIRES" data-trigger="change" data-required="true" />
<input type="text" id="profession" name="profession" placeholder="PROFESSION" data-trigger="change" data-required="true" />
<input type="text" id="revenu" name="revenu" placeholder="REVENU" data-trigger="change" data-required="true" />

<input type="submit" value="VALIDER" onClick="return valider();"/>
<!--<progress id="progress-bar" min="1" max="100" value="document.getElementById('progress-bar').value = valider();"></progress> -->
<!--<<td pourcent=<?php include(javascrip);?>>  -->
</fieldset>
</form>
 
</div> 
    
</body>
    
</html>

en cliquant sur mon bouton valider, la page actuelle disparaisse et une autre page s'affiche (la page de ma fonction javascript).
mais moi je veux que le contenu de ma ancienne page ne disparaisse pas et je veux afficher la fonction javascript sur ma page actuelle html.
s'il vous plait comment le faire??
merci d'avance

fvsch

29 Mar 2014 à 15:29

Bonjour,

Bon alors, il y a du boulot en perspective. Smiley smile

Pour commencer, ta fonction JavaScript de validation est extrêmement verbeuse pour pas grand chose. Comme tu peux le constater toi-même, tu t’y répètes énormément. Elle consiste en deux parties:

1. Compter le nombre de champs remplis. Pour ça, tu peux boucler sur les éléments de ton formulaire, et écrire ton code qui dit «je vérifie s’il y a une valeur et si oui j’incrémente un compteur» une seule fois, dans le corps de la boucle.

2. Générer un message d'information. Ton modèle de message est toujours le même, donc il suffirait de calculer le pourcentage à partir de ton compteur (en utilisant des opérations simples, et sans doute Math.round()), et d'utiliser ce pourcentage dans ton message (texte, et code de l'élément <progress>).

Idéalement il faudrait modifier aussi la fonction pour qu’elle mette à jour le DOM de certains éléments de la page, plutôt que d’utiliser des document.write très bourrins. En fait non, pas idéalement: ça va être indispensable pour ce que tu veux faire.

Ensuite, pour ce que tu souhaites faire à proprement parler: tu peux utiliser les évènements liés à ton formulaire, notamment "submit" et/ou "change", pour lancer ta fonction à chaque mise à jour.

Je ne donne pas de code correspondant à tout ça, car c'est contraire à la philosophie de ce forum (qui est d'abord un forum d'entraide et d'apprentissage), mais tu peux te documenter avec notamment ce livre disponible gratuitement en ligne et en français:
http://fr.eloquentjavascript.net/contents.html
Notamment les chapitres 2, 11, 12 et 13.

Pour les évènements, tu peux aussi voir la documentation de MDN (mozilla developer network), ou encore cette introduction (note que si tu n’as pas à assurer le support d'IE8, tu peux te contenter d'utiliser la solution standard, element.addEventListener()).

Sujet clos

Sémantique web et HTML

Javascript dans html