Mes javascripts ne se lance pas

Fermé
Marc - Modifié par jordane45 le 9/06/2016 à 16:39
 yoDeGourt - 12 juin 2016 à 16:03
Bonjour, désolé de vous déranger, mais je n'arrive plus à lancer mes différents scripts javascripts, je cherche depuis plus d'une journée maintenant et je ne vois pas la solution, je pensais que c'était un problème de class et d'id mais ce n'est pas ça je pense.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="../style/style.css" /> 
         <link rel="stylesheet" href="../style/style_menu.css" />
         <link rel="stylesheet" type="text/css" href="../style/styleTable.css"> 
            <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
            <script src="//code.jquery.com/jquery-1.10.2.js"></script>
            <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
            <script>
                    $(function() {
                      $( "#datedebut" ).datepicker();
                    });
            </script>
            <script>
                    $(function() {
                    $( "#datefin" ).datepicker();
                    });
            </script>
            
      
 
        <title>Accueil</title>
    </head>

    <body>
        <?php include("header_inter.php"); ?>

                  
 <div id="connexion"> 
            <h1> Création d'un formulaire de pointage - Interimaire S3a </h1> 
 </div> 
        
 <p> </p> 
    <fieldset>    
        
        <legend> Pointage </legend> 
        <form action="create_pointage_inter3.php" method="post" onsubmit="return verif(this)">
            <div id="datedeb">
            Période du : <input type="text" id="datedebut" name="datedebut"> 
            au : <input type="text" id="datefin" name="datefin"> </div>          
        
            <div class="tg-wrap"><table id="tg-oAe8e" class="tg"> 
              <thead><tr>
                <th class="tg-yw4l">n° projet </th>
                <th class="tg-yw4l">Libelle</th>
                <th class="tg-baqh" colspan="4">Lundi</th>
                <th class="tg-baqh" colspan="4">Mardi</th>
                <th class="tg-baqh" colspan="4">Mercredi</th>
                <th class="tg-baqh" colspan="4">Jeudi</th>
                <th class="tg-baqh" colspan="4">Vendredi</th>
              </tr>
            
              <tr>
                <td class="tg-5xqe"></td>
                <td class="tg-5xqe"></td>
                <td class="tg-baqh">DDC</td>
                <td class="tg-baqh">DCC</td>
                <td class="tg-baqh">Heure réalisé</td>
                <td class="tg-baqh">Dont de nuit</td>
                <td class="tg-baqh">DDC</td>
                <td class="tg-baqh">DCC</td>
                <td class="tg-baqh">Heure réalisé</td>
                <td class="tg-baqh">Dont de nuit</td>
                <td class="tg-baqh">DDC</td>
                <td class="tg-baqh">DCC</td>
                <td class="tg-baqh">Heure réalisé </td>
                <td class="tg-baqh">Dont de nuit</td>
                <td class="tg-baqh">DDC</td>
                <td class="tg-baqh">DCC</td>
                <td class="tg-baqh">Heure réalisé</td>
                <td class="tg-baqh">Dont de nuit</td>
                <td class="tg-baqh">DDC</td>
                <td class="tg-baqh">DCC</td>
                <td class="tg-baqh">Heure réalisé</td>
                <td class="tg-baqh">Dont de nuit</td>
              </tr> </thead>
             <tr id="contenaire"> 
                 <br/>
                <td class="tg-yw4l" id="nprojet"><input type="text" class="nprojet" name="nprojet"  size="5"></td>
                <td class="tg-yw4l" id="nom_lieu_chantier"><input type="text" class="nom_lieu_chantier" name="nom_lieu_chantier"  size="20"></td>
                <td class="tg-yw4l" id="ddclundi"><input type="text" class="ddclundi" name="ddclundi"  size="2"></td>
                <td class="tg-yw4l" id="dcclundi"><input type="text" class="dcclundi" name="dcclundi"  size="2"></td>
                <td class="tg-yw4l" id="hlundi"><input type="text" class="hlundi" name="hlundi"  size="2"></td>
                <td class="tg-yw4l" id="hlundisoir"><input type="text" class="hlundisoir" name="hlundisoir"  size="2"></td>
                <td class="tg-yw4l" id="ddcmardi"><input type="text" class="ddcmardi" name="ddcmardi"  size="2"></td>
                <td class="tg-yw4l" id="dccmardi"><input type="text" class="dccmardi" name="dccmardi" size="2"></td>
                <td class="tg-yw4l" id="hmardi"><input type="text" class="hmardi" name="hmardi"  size="2"></td>
                <td class="tg-yw4l" id="hmardinuit"><input type="text" class="hmardinuit" name="hmardisoir" size="2"></td>
                <td class="tg-yw4l" id="ddcmercredi"><input type="text" class="ddcmercredi" name="ddcmercredi"  size="2"></td>
                <td class="tg-yw4l" id="ddcmercredisoir"><input type="text" class="ddcmercredisoir" name="ddcmercredisoir"  size="2"></td>
                <td class="tg-yw4l" id="hmercredi"><input type="text" class="hmercredi" name="hmercredi"  size="2"></td>
                <td class="tg-yw4l" id="hmercredisoir"><input type="text" class="hmercredisoir" name="hmercredisoir"  size="2"></td>
                <td class="tg-yw4l" id="ddcjeudi"><input type="text" class="ddcjeudi" name="ddcjeudi"  size="2"></td>
                <td class="tg-yw4l" id="dccjeudi"><input type="text" class="dccjeudi" name="dccjeudi"  size="2" ></td>
                <td class="tg-yw4l" id="hjeudi"><input type="text" class="hjeudi" name="hjeudi" size="2"></td>
                <td class="tg-yw4l" id="hjeudisoir"><input type="text" class="hjeudisoir" name="hjeudisoir"  size="2"></td>
                <td class="tg-yw4l" id="ddcvendredi"><input type="text" class="ddcvendredi" name="ddcvendredi"  size="2"></td>
                <td class="tg-yw4l" id="dccvendredi"><input type="text" class="dccvendredi" name="dccvendredi"  size="2"></td>
                <td class="tg-yw4l" id="hvendredi"><input type="text" class="hvendredi" name="hvendredi"  size="2" onclick="preview(this);"></td>
                <td class="tg-yw4l" id="hvendredisoir"><input type="text" class="hvendredisoir" name="hvendredisoir"  size="2"></td> <br/>
             
              </tr> 
              <tr id="table1"> <br/></tr> 
              <tr id="table2"> </tr>
              
                 </table>
            </div>              
   Vos heures totals de travails sont de: <span class="price" class="text-right">0.00</span> <br/>
        <input type="button" value="Ajouter une ligne" onclick='f()'>
        <input type="submit" value="Suivant" onblur="verif(this)">
        <input type="button" value="Brouillon">
        <input type="reset" value="Annuler">
</form>
        </fieldset>

    </body>

</html>
<script language="javascript">
function f(){
            var i = 1;
            while (i<8, i++){
            contenaire = document.getElementById('table1').innerHTML+=  '<td class="tg-yw4l" id="nprojet"><input type="text" id="nprojet" name="nprojet"  size="5"></td><td class="tg-yw4l" id="nom_lieu_chantier"><input type="text" id="nom_lieu_chantier" name="nom_lieu_chantier"  size="20"></td><td class="tg-yw4l" id="ddclundi"><input type="text" id="ddclundi" name="ddclundi"  size="2"></td><td class="tg-yw4l" id="dcclundi"><input type="text" id="dcclundi" name="dcclundi"  size="2"></td><td class="tg-yw4l" id="hlundi"><input type="text" id="hlundi" name="hlundi"  size="2"></td><td class="tg-yw4l" id="hlundisoir"><input type="text" id="hlundisoir" name="hlundisoir"  size="2"></td><td class="tg-yw4l" id="ddcmardi"><input type="text" id="ddcmardi" name="ddcmardi"  size="2"></td><td class="tg-yw4l" id="dccmardi"><input type="text" id="dccmardi" name="dccmardi" size="2"></td><td class="tg-yw4l" id="hmardi"><input type="text" id="hmardi" name="hmardi"  size="2"></td><td class="tg-yw4l" id="hmardinuit"><input type="text" id="hmardinuit" name="hmardisoir" size="2"></td><td class="tg-yw4l" id="ddcmercredi"><input type="text" id="ddcmercredi" name="ddcmercredi"  size="2"></td><td class="tg-yw4l" id="ddcmercredisoir"><input type="text" id="ddcmercredisoir" name="ddcmercredisoir"  size="2"></td><td class="tg-yw4l" id="hmercredi"><input type="text" id="hmercredi" name="hmercredi"  size="2"></td><td class="tg-yw4l" id="hmercredisoir"><input type="text" id="hmercredisoir" name="hmercredisoir"  size="2"></td><td class="tg-yw4l" id="ddcjeudi"><input type="text" id="ddcjeudi" name="ddcjeudi"  size="2"></td><td class="tg-yw4l" id="dccjeudi"><input type="text" id="dccjeudi" name="dccjeudi"  size="2" ></td><td class="tg-yw4l" id="hjeudi"><input type="text" id="hjeudi" name="hjeudi" size="2"></td><td class="tg-yw4l" id="hjeudisoir"><input type="text" id="hjeudisoir" name="hjeudisoir"  size="2"></td><td class="tg-yw4l" id="ddcvendredi"><input type="text" id="ddcvendredi" name="ddcvendredi"  size="2"></td><td class="tg-yw4l" id="dccvendredi"><input type="text" id="dccvendredi" name="dccvendredi"  size="2"></td><td class="tg-yw4l" id="hvendredi"><input type="text" id="hvendredi" name="hvendredi"  size="2" onclick="preview(this);"></td><td class="tg-yw4l" id="hvendredisoir"><input type="text" id="hvendredisoir" name="hvendredisoir"  size="2"></td>\ </tr> </div></table></div> <br/>' ;
            return;    
        }
    }

function preview(t) {
            var lundi = document.getElementsByClassName("hlundi").value; 
            var mardi = document.getElementsByClassName("hmardi").value; 
            var mercredi = document.getElementsByClassName("hmercredi").value; 
            var jeudi = document.getElementsByClassName("hjeudi").value; 
            var vendredi = document.getElementsByClassName("hvendredi").value;
            var price = document.getElementsByClassName("hvendredi").value; 
            if(lundi==='')
                lundi = 0;
            if(mardi === '')
                mardi = 0;
            if(mercredi==='')
                mercredi = 0;
            if(jeudi==='')
                jeudi = 0;
            if(vendredi==='')
                vendredi = 0;
            price = parseFloat(lundi)+ parseFloat(mardi)+ parseFloat(mercredi)+ parseFloat(jeudi)+ parseFloat(vendredi);
            price.innerHTML = parseInt(price.innerHTML)+price;
        }
function verif() {
            err=0;
            a=document.controleChamps.datedebut.value;
            b=document.controleChamps.datefin.value;
            c=document.controleChamps.nprojet.value;
            d=document.controleChamps.nom_lieu_chantier.value;
            var variable1 = document.getElementsByClassName("hlundi").value; 
            var variable2 = document.getElementsByClassName("hmardi").value;
            var variable3 = document.getElementsByClassName("total1").value;
            var variable4 = document.getElementsByClassName("hmercredi").value;
            var variable5 = document.getElementsByClassName("hjeudi").value;
            var variable6 = document.getElementsByClassName("hvendredi").value;
            var variable7 = document.getElementsByClassName("hlundinuit").value; 
            var variable8 = document.getElementsByClassName("hmardinuit").value; 
            var variable9 = document.getElementsByClassName("hmercredinuit").value;
            var variable10 = document.getElementsByClassName("hjeudinuit").value;
            var variable11 = document.getElementsByClassName("hvendredinuit").value;
            e=c.length;
            if (a==="") {
            alert ("Vous devez remplir la date de debut");
            err=1;
            document.controleChamps.datedebut.focus();
            }
            else if (b==="") {
            alert ("Vous devez remplir la date de fin");
            err=1;
            document.controleChamps.datefin.focus();
            }
            else if (c===""  ) {
            alert ("Vous devez remplir le n° projet");
            err=1;
            document.controleChamps.nprojet.focus();
            }
            else if (e<5 || e>5){
            alert ("Le n° du projet doit contenir 5 chiffres");
            err=1;
            document.controleChamps.nprojet.focus();
            }
            else if (isNaN(c) === true) {
            alert('Veuillez saisir un nombre') ;
            err=1;
            document.controleChamps.nprojet.focus();
            }        
            else if (d==="") {
            alert ("Vous devez remplir le nom et lieu du chantier");
            err=1;
            document.controleChamps.nom_lieu_chantier.focus();
            }
            else if (variable1==="") {
            alert ("Vous devez remplir vos heures de jour du lundi");
            err=1;
            document.controleChamps.nom_lieu_chantier.focus();
            }
            else if (variable2==="") {
            alert ("Vous devez remplir vos heures de jour du mardi");
            err=1;
            document.controleChamps.nom_lieu_chantier.focus();
            }
            else if (variable3 > 46) {
            alert ("Vous ne pouvez pas depasser 46 heures en une semaine");
            err=1;
            document.controleChamps.total1.focus();
            }
            else if (variable4==="") {
            alert ("Vous devez remplir vos heures de jour du mercredi");
            err=1;
            document.controleChamps.nom_lieu_chantier.focus();
            }
            else if (variable5==="") {
            alert ("Vous devez remplir vos heures de jour du jeudi");
            err=1;
            document.controleChamps.nom_lieu_chantier.focus();
            }
            else if (variable6==="") {
            alert ("Vous devez remplir vos heures de jour du vendredi");
            err=1;
            document.controleChamps.nom_lieu_chantier.focus();
            }
            else if (variable7==="") {
            alert ("Vous devez remplir vos heures de nuit du lundi");
            err=1;
            document.controleChamps.nom_lieu_chantier.focus();
            }
            else if (variable8==="") {
            alert ("Vous devez remplir vos heures de nuit du mardi");
            err=1;
            document.controleChamps.nom_lieu_chantier.focus();
            }
            else if (variable9==="") {
            alert ("Vous devez remplir vos heures de nuit du mercredi");
            err=1;
            document.controleChamps.nom_lieu_chantier.focus();
            }
            else if (variable10==="") {
            alert ("Vous devez remplir vos heures de nuit du jeudi");
            err=1;
            document.controleChamps.nom_lieu_chantier.focus();
            }
            else if (variable11==="") {
            alert ("Vous devez remplir vos heures de nuit du vendredi");
            err=1;
            document.controleChamps.nom_lieu_chantier.focus();
            }

            else if (err===0) {document.controleChamps.submit();}
            }
</script>  

4 réponses

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
9 juin 2016 à 16:35
Bonjour,

Dans un premier temps, installe le plugin FIREBUG pour Firefox et vas voir, une fois ta page affichée .... si des messages d'erreurs n'apparaitraient pas dans la console du navigateur.

0
J'ai déjà installé FFBug, et il ne m'a rien trouvé.
Cordialement.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > Marc
9 juin 2016 à 16:42
Quel(s) script(s) ne fonctionne(nt) plus exactement ? Tous ou seulement l'un d'eux ?
Comment est-il déclenché ? (quelle action ? quel bouton ? ....)

Si c'est la fonction verif....
remplace donc le onblur....(qui vaut lorsque le bouton perd le focus.....) par un onclick
 <input type="submit" value="Suivant" onclick="verif(this)">
0
Marc > jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024
9 juin 2016 à 16:50
Aucun n'est déclenché. La fonction verif() se lance à la validation du formulaire, la fonction preview quand à elle est à la saisie de l'heure du vendredi.

J'ai remplacé comme vous m'avez dit les onclick par onblur et le problème persiste.
Cordialement.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 9/06/2016 à 17:05
Salut,

Lors du clique sur le bouton "Suivant" pour exécuter la fonction verif(), tu peux remarquer l'erreur suivante dans la console de développement :
document.controleChamps is undefined
L'élément 'controleChamps' n'existe pas dans ton document, un élément html supprimé ?

Attention également à la syntaxe html, tes balises script doivent se situer dans la balise head et juste avant la fermeture de la balise body (ton dernier script est situé après la fermeture de la balise html).

Bonne journée,
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
9 juin 2016 à 17:18
Bonjour Pitet


Attention également à la syntaxe html, tes balises script doivent se situer dans la balise head et juste avant la fermeture de la balise body (ton dernier script est situé après la fermeture de la balise html).



Non ce n'est pas une obligation.
Perso je place régulièrement mes scripts js sous mon html ..... et très rarement dans les balises head.
Cela ne gêne pas leur fonctionnement.
0
Exact, j'avais oublié cela, mais lorsque je la rajoute, mes autres scripts ne fonctionnent plus. Comment faire pour que plusieurs scripts fonctionnent en même temps? Ai-je la bonne méthode?
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > Marc
9 juin 2016 à 17:43
Si tes scripts ne fonctionnent pas .... tu dois encore avoir une erreur (peut être que maintenant tu en vois dans la CONSOLE de ton navigateur ???? )

De plus.. si tu ne nous montres pas ton code modifié ... impossible de t'aider !
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 10/06/2016 à 09:07
Placer les scripts après la balise html n'empêche effectivement pas leur fonctionnement, cela reste syntaxiquement invalide et le document html ne passera pas la validation w3c.
Cela pourrait éventuellement causer d'autres problèmes dans le cas de manipulation du dom.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
10 juin 2016 à 09:22
Pour la validation w3c je suis d'accord.
Pour les éventuels problèmes.... je n'en ai personnellement jamais rencontré.
Mais bon.. en effet... il est préférable (uniquement pour être conforme au w3c) de placer ses scripts js dans le body du document ou dans le head
0
Mes codes marchent désormais sauf ma fonction verif() que j'ai placé dans le head. ;)
Ca me mets les messages d'erreurs mais juste après ça va sur ma page "create_pointage_inter3.php.


function verif() {
err=1;
a=document.controleChamps.datedebut.value;
b=document.controleChamps.datefin.value;
c=document.controleChamps.nprojet.value;
d=document.controleChamps.nom_lieu_chantier.value;
var variable1 = document.getElementsByClassName("hlundi").value;
var variable2 = document.getElementsByClassName("hmardi").value;
var variable3 = document.getElementsByClassName("total1").value;
var variable4 = document.getElementsByClassName("hmercredi").value;
var variable5 = document.getElementsByClassName("hjeudi").value;
var variable6 = document.getElementsByClassName("hvendredi").value;
var variable7 = document.getElementsByClassName("hlundinuit").value;
var variable8 = document.getElementsByClassName("hmardinuit").value;
var variable9 = document.getElementsByClassName("hmercredinuit").value;
var variable10 = document.getElementsByClassName("hjeudinuit").value;
var variable11 = document.getElementsByClassName("hvendredinuit").value;
e=c.length;
if (a==="") {
alert ("Vous devez remplir la date de debut");
err=1;
document.controleChamps.datedebut.focus();
return false;
}
else if (b==="") {
alert ("Vous devez remplir la date de fin");
err=1;
document.controleChamps.datefin.focus();
return false;
}
else if (c==="") {
alert ("Vous devez remplir le n° projet");
err=1;
document.controleChamps.nprojet.focus();
return false;
}
else if (e<5 || e>5){
alert ("Le n° du projet doit contenir 5 chiffres");
err=1;
document.controleChamps.nprojet.focus();
return false;
}
else if (isNaN(c) === true) {
alert('Veuillez saisir un nombre') ;
err=1;
document.controleChamps.nprojet.focus();
return false;
}
else if (d==="") {
alert ("Vous devez remplir le nom et lieu du chantier");
err=1;
document.controleChamps.nom_lieu_chantier.focus();
return false;
}
else if (variable1==="") {
alert ("Vous devez remplir vos heures de jour du lundi");
err=1;
document.controleChamps.nom_lieu_chantier.focus();
return false;
}
else if (variable2==="") {
alert ("Vous devez remplir vos heures de jour du mardi");
err=1;
document.controleChamps.nom_lieu_chantier.focus();
return false;
}
else if (variable3 > 46) {
alert ("Vous ne pouvez pas depasser 46 heures en une semaine");
err=1;
document.controleChamps.total1.focus();
return false;
}
else if (variable4==="") {
alert ("Vous devez remplir vos heures de jour du mercredi");
err=1;
document.controleChamps.nom_lieu_chantier.focus();
return false;
}
else if (variable5==="") {
alert ("Vous devez remplir vos heures de jour du jeudi");
err=1;
document.controleChamps.nom_lieu_chantier.focus();
return false;
}
else if (variable6==="") {
alert ("Vous devez remplir vos heures de jour du vendredi");
err=1;
document.controleChamps.nom_lieu_chantier.focus();
return false;
}
else if (variable7==="") {
alert ("Vous devez remplir vos heures de nuit du lundi");
err=1;
document.controleChamps.nom_lieu_chantier.focus();
return false;
}
else if (variable8==="") {
alert ("Vous devez remplir vos heures de nuit du mardi");
err=1;
document.controleChamps.nom_lieu_chantier.focus();
return false;
}
else if (variable9==="") {
alert ("Vous devez remplir vos heures de nuit du mercredi");
err=1;
document.controleChamps.nom_lieu_chantier.focus();
return false;
}
else if (variable10==="") {
alert ("Vous devez remplir vos heures de nuit du jeudi");
err=1;
document.controleChamps.nom_lieu_chantier.focus();
return false;
}
else if (variable11==="") {
alert ("Vous devez remplir vos heures de nuit du vendredi");
err=1;
document.controleChamps.nom_lieu_chantier.focus();
return false;
}

else if(err===0) {document.controleChamps.submit();}
}


 <form  name="controleChamps" method="post" onsubmit="return verif(this)" action="create_pointage_inter3.php"> 
0
Salut,
vous devez désactiver la fonction d'envoi sinon lorsque il a envoi du formulaire celui l'est à la page PHP indiqué par l'attribut action.
Donc trop tard pour javascript.

Le principe est donc de désactiver l'envoi (donc ne pas utiliser onSubmit mais onClick-encore mieux avec des écouteurs d'objets ici ceux du DOM= les balises de la page-) et effectuer le submit si le formulaire est dûment remplit(ce qui provoquera l'envoi des variables vers le programme PHP ou pas en cas d'erreur).

J'ai trouvé un exemple ici mais il y a dd'autres façons de faire:

http://forum.webrankinfo.com/comment-stoper-submit-javascript-t102686.html

Perso je préfère utiliser un bouton avec le comportement button, donc la fonction submit est déjà désactiver.

Ex:
http://www.w3schools.com/tags/att_button_form.asp

En remplaçant par:
<button type="bouton" onClick=mafunction(); >N'envoi pas le formulaire(pas de submit)</button>


On peut aussi désactiver le comportement submit du form.

Et en code encore plus propre:
<button type="bouton" id="validation"</button>

document.getElementById('validation').addEventListener("click", function(){

   /*ici la fonction de vérif, pas besoin de fonction d'ailleurs elle st dans une fonction déjà-fonction anonyme directement utilisé dans l'événement clic du bouton*/
});
0