Probleme en javascript!!!!!!!!!!!

Résolu
Bonjour,

Je suis novice en programmation javascripte, et jaimerai trouver une solution a un probléme ke j'ai rencontré.
En fait, ma page est constitée d'un formulaire où l'utilisateur doit entrer des information qui seront traités vià une fonction Traiter()qui afficherai le traitement dans un tableau dans la meme page sans écraser le formulaire grace a l'evennement onclick .
si une personne a la solution jaimerai bien qu'il m'éclaire le plutot possible car c une application a rendre dans 2 jours.
Merci d'avance.
Configuration: Windows Vista
Internet Explorer 7.0

30 réponses

Résumé de la discussion

Une demande porte sur l’affichage du traitement d’un formulaire JavaScript dans un tableau sur la même page, sans écraser le formulaire, et déclenché par l’événement onclick. La meilleure contribution montre un code qui construit et affiche le tableau via document.write dans Traiter(), puis met à jour des valeurs comme la Date, la Mensualité et le Total restants. Cependant, utiliser document.write après chargement efface la page et écrase le formulaire; il est préférable de manipuler le DOM en ajoutant des lignes à un tableau existant. Des échanges ultérieurs invitent à préciser le formulaire et le tableau à générer, et plusieurs répondants suggèrent d’éviter document.write au profit d’un affichage dynamique par DOM.

Bobot (l’IA à votre service)
  1. bon c pas grave alors.
    juste une dernière question si je ve afficher le contenu d'une variable dans une case comment ça s'écrit??
    1. Je t'ai envoyé un MP.

      Réponds moi si tu l'a reçu stp.

      Pour la variable, ça donnerai ça :

      contenu = contenu + "<td height=\"50\" width=\"300\" >" + TA_VARIABLE + "</td>";
  2. je sais ke c peut etre abusée mais tu pourrait pas menvoyer ton msn si toute fois ten as un et que tu le veux bien par MP???
    1. Quand c'est demandé gentiment...
  3. ouiiiiiiiiiiiiiiiii!!! ça marche!!!!!!!! bon merci pour la milliéme fois!!!! c super!!!
    1. Nikel.

      Hésite pas si tu as un souci, tu peux même me contacter par MP.
  4. Minute je vais l'éssayer :)
    1. Ok.

      En fait ça venait du innerHTML : il ne faut pas l'utiliser directement, il faut passer par une variable.

      Sinon, c'est interprété à chaque fois, et ça devient n'importe quoi.
  5. Et voilà :

    <html>
    
    <head>
    <script type="text/javascript">
    
    var dtj= new Date();
    var credInt=0;
    var mens=0;
    
    
    
    function bissext(dt)
    
    {
    
    if((dt.getFullYear() % 4 == 0)&&(dt.getFullYear() % 100 !=0))
    {
    if (dt.getFullYear() % 400 ==0)
    return true;
    else
    return false;
    
    }
    else
    return false;
    
    }
    
    function getDateCompact(dt)
    
    {
    var y = dt.getFullYear();
    
    var m = dt.getMonth()+1;
    
    if (m<10)
    {
    m="0"+m;
    
    }
    var d = dt.getDate();
    if(d<10)
    {d="0"+d;}
    
    return d+"/"+m+"/"+y;
    }
    
    
    function getD(da)
    {
    window.alert("Nos produits sont en general non perimes");
    var day = da.substring(0,2);
    
    var month = da.substring(3,5);
    var year = da.substring(6,10);
    var d = new Date();
    
    
    d.setDate(day);
    d.setMonth(month);
    d.setFullYear(year);
    return d;
    }
    
    
    function Info()
    {
    window.alert("Nos produits sont en general non perimes");
    window.alert(document.forms["Mafich"].txtMnt.value);
    }
    
    function Traiter()
    {
    
    var i =1;
    var f = document.getElementById('resultat');
    
    credInt= parseFloat(document.forms["Mafich"].txtMnt.value) * ( (parseFloat(document.forms["Mafich"].txtTo.value)/100)+1);
    mens= parseInt( credInt/parseInt(document.forms["Mafich"].txtNb.value));
    
    var restant = credInt;
    var pTotal = 0;
    
    //partie affichage
    var contenu = "";
    contenu = contenu + "<table border=\"1\" bordercolor=\"#333399\">";
    contenu = contenu + "<tr>";
    contenu = contenu + "<td height=\"50\" width=\"300\" >Date de versement</td>";
    contenu = contenu + "<td height=\"50\" width=\"300\" >Mensualité</td>";
    contenu = contenu + "<td height=\"50\" width=\"300\" >Total Restant</td>";
    contenu = contenu + "<td height=\"50\" width=\"300\" >Total Remboursé</td>";
    contenu = contenu + "</tr>";
    contenu = contenu + "</table>";
    
    f.innerHTML = contenu;
    
    dtj= getD(document.forms["Mafich"].txtDat.value);
    
    while (i<= parseInt(document.forms["Mafich"].txtNb.value))
    {
    
    restant= restant-mens; ////partie
    pTotal=pTotal+mens;
    window.alert(restant); ////traitement
    
    i++; //encore inachevée
    }
    
    }
    
    </script>
    
    </head>
    <body text =#000066>
    
    <form name ="Mafich">
    
    <pre> <b> Montant du Crédit : </b> <input type="text" name="txtMnt" > Dt </pre><br/> <br/>
    <pre><p> <b> Nombre de Mois : </b> <input type="text" name="txtNb" > Mois </pre><br/> <br/>
    <pre> <b> Taux : </b> <input type="text" name="txtTo" > % </pre><br/> <br/>
    <pre> <b> Date de la premiere écheance : </b> <input type="text" name="txtDat" > </pre><br/> <br/>
    <pre> <input type="button" name="Valid" value= "Valider" onClick="Traiter()"> <input type="reset" name="Rest" value="Annuler"> </pre>
    <br /><br />
    <div id='resultat' width="200" height="115" style="left: 193px; top: 84px; background: #666666;">
    Contenu du calque.
    </div>
    
    </form>
    
    </body>
    </html> 
    1. oui je sais je vais le fair maisf.innerHTML = ("<table style=\"border: 1px solid #333399; \">");
      ===> ne marche pas :(
      1. de toutes façons c déja un super résulat Merci infiniment scalpweb!!!
        1. De rien encore une fois...

          Mais j'insiste, place ce topic en résolu lorsque tout sera clair pour toi.

          Tu as un petit formulaire pour faire ça au sommet du topic.

          En tout cas, là, tout devrait marcher.
      2. Autant pour moi :

        f.innerHTML = ("<table style=\"border: 1px solid #333399; \">");
        1. Mais tu sais le border et bordercolor ne son pas reconnues!!??? pourtant la syntaxe est juste!!
          1. désolée, j'étais pas devant mon ordi.. MERCI beaucoup Scalpweb !
            1. De rien...

              Mais si ça marche comme tu veux, passe ce topic en résolu.
          2. T'es en de bonnes main dis donc, il assures le gars !!! Good job Scalpweb !
            1. De rien.

              Passe ce topic en tant que Résolu.
          3. Voilà qui marche déjà un peu mieux :

            <html>
            
            <head>
            <script type="text/javascript">
            
            var dtj= new Date();
            var credInt=0;
            var mens=0;
            
            
            
            function bissext(dt)
            
            {
            
            if((dt.getFullYear() % 4 == 0)&&(dt.getFullYear() % 100 !=0))
            {
            if (dt.getFullYear() % 400 ==0)
            return true;
            else
            return false;
            
            }
            else
            return false;
            
            }
            
            function getDateCompact(dt)
            
            {
            var y = dt.getFullYear();
            
            var m = dt.getMonth()+1;
            
            if (m<10)
            {
            m="0"+m;
            
            }
            var d = dt.getDate();
            if(d<10)
            {d="0"+d;}
            
            return d+"/"+m+"/"+y;
            }
            
            
            function getD(da)
            {
            window.alert("Nos produits sont en general non perimes");
            var day = da.substring(0,2);
            
            var month = da.substring(3,5);
            var year = da.substring(6,10);
            var d = new Date();
            
            
            d.setDate(day);
            d.setMonth(month);
            d.setFullYear(year);
            return d;
            }
            
            
            function Info()
            {
            window.alert("Nos produits sont en general non perimes");
            window.alert(document.forms["Mafich"].txtMnt.value);
            }
            
            function Traiter()
            {
            
            var i =1;
            var f = document.getElementById('resultat');
            
            credInt= parseFloat(document.forms["Mafich"].txtMnt.value) * ( (parseFloat(document.forms["Mafich"].txtTo.value)/100)+1);
            mens= parseInt( credInt/parseInt(document.forms["Mafich"].txtNb.value));
            
            var restant = credInt;
            var pTotal = 0;
            
            //partie affichage
            
            f.innerHTML = ("<table border=1 bordercolor='#333399'>");
            f.innerHTML = f.innerHTML + ("<tr>");
            f.innerHTML = f.innerHTML + ("<td height=50 width=300 >"+"Date de versement"+"</td>");
            f.innerHTML = f.innerHTML + ("<td height=50 width=300 >"+"Mensualité"+"</td>");
            f.innerHTML = f.innerHTML + ("<td height=50 width=300 >"+"Total Restant"+"</td>");
            f.innerHTML = f.innerHTML + ("<td height=50 width=300 >"+"Total Remboursé"+"</td>");
            f.innerHTML = f.innerHTML + ("</tr>");
            
            f.innerHTML = f.innerHTML + ("</table>");
            
            dtj= getD(document.forms["Mafich"].txtDat.value);
            
            while (i<= parseInt(document.forms["Mafich"].txtNb.value))
            {
            
            restant= restant-mens; ////partie
            pTotal=pTotal+mens;
            window.alert(restant); ////traitement
            
            i++; //encore inachevée
            }
            
            }
            
            </script>
            
            </head>
            <body text =#000066>
            
            <form name ="Mafich">
            
            <pre> <b> Montant du Crédit : </b> <input type="text" name="txtMnt" > Dt </pre><br/> <br/>
            <pre><p> <b> Nombre de Mois : </b> <input type="text" name="txtNb" > Mois </pre><br/> <br/>
            <pre> <b> Taux : </b> <input type="text" name="txtTo" > % </pre><br/> <br/>
            <pre> <b> Date de la premiere écheance : </b> <input type="text" name="txtDat" > </pre><br/> <br/>
            <pre> <input type="button" name="Valid" value= "Valider" onClick="Traiter()"> <input type="reset" name="Rest" value="Annuler"> </pre>
            <br /><br />
            <div id='resultat' width="200" height="115" left="193" top="84" bgcolor="#666666">
            Contenu du calque.
            </div>
            
            </form>
            
            </body>
            </html>
            1. html>

              <head>

              <script type="text/javascript">

              var dtj= new Date();
              var credInt=0;
              var mens=0;

              function bissext(dt)

              {

              if((dt.getFullYear() % 4 == 0)&&(dt.getFullYear() % 100 !=0))
              {
              if (dt.getFullYear() % 400 ==0)
              return true;
              else
              return false;

              }
              else
              return false;

              }

              function getDateCompact(dt)

              {
              var y = dt.getFullYear();

              var m = dt.getMonth()+1;

              if (m<10)
              {
              m="0"+m;

              }
              var d = dt.getDate();
              if(d<10)
              {d="0"+d;}

              return d+"/"+m+"/"+y;
              }

              function getD(da)
              {
              window.alert("Nos produits sont en general non perimes");
              var day = da.substring(0,2);

              var month = da.substring(3,5);
              var year = da.substring(6,10);
              var d = new Date();

              d.setDate(day);
              d.setMonth(month);
              d.setFullYear(year);
              return d;
              }

              function Info()
              {
              window.alert("Nos produits sont en general non perimes");
              window.alert(document.forms["Mafich"].txtMnt.value);

              }

              function Traiter()
              {

              var i =1;

              credInt= parseFloat(document.forms["Mafich"].txtMnt.value) * ( (parseFloat(document.forms["Mafich"].txtTo.value)/100)+1);
              mens= parseInt( credInt/parseInt(document.forms["Mafich"].txtNb.value));

              var restant = credInt;
              var pTotal = 0;

              //partie affichage

              document.write("<table border=1 bordercolor='#333399'>");
              document.write("<tr>");
              document.write("<td height=50 width=300 >"+"Date de versement"+"</td>");
              document.write("<td height=50 width=300 >"+"Mensualité"+"</td>");
              document.write("<td height=50 width=300 >"+"Total Restant"+"</td>");
              document.write("<td height=50 width=300 >"+"Total Remboursé"+"</td>");
              document.write("</tr>");

              document.write("</table>");

              dtj= getD(document.forms["Mafich"].txtDat.value);

              while (i<= parseInt(document.forms["Mafich"].txtNb.value))
              {

              restant= restant-mens; ////partie
              pTotal=pTotal+mens;
              window.alert(restant); ////traitement

              i++; //encore inachevée
              }

              }

              </script>

              </head>

              <body text =#000066>

              <form name ="Mafich">

              <pre> <b> Montant du Crédit : </b> <input type="text" name="txtMnt" > Dt </pre><br/> <br/>

              <pre><p> <b> Nombre de Mois : </b> <input type="text" name="txtNb" > Mois </pre><br/> <br/>

              <pre> <b> Taux : </b> <input type="text" name="txtTo" > % </pre><br/> <br/>

              <pre> <b> Date de la premiere écheance : </b> <input type="text" name="txtDat" > </pre><br/> <br/>

              <pre> <input type="button" name="Valid" value= "Valider" onClick="Traiter()"> <input type="reset" name="Rest" value="Annuler"> </pre>

              <layer width="200" height="115" left="193" top="84" bgcolor="#666666">
              Contenu du calque.
              </layer>

              </form>

              </body>

              </html>
              • 1
              • 2