Forums Développement Multimédia

Aller au contenu

J'ai vraiment besoin d'aide svp je suis perdu checkbox javascript

CODE Ajax JQuery EaseJs

4 réponses à ce sujet

#1 gzbass

    Ceinture Jaune

  • Members
  • PipPip
  • 27 messages

Posté 13 December 2012 - 18:13 PM

Bonjour,

Voilà mon problème est que je dois rendre pour demain un tp noté, il s'agit de faire un site web.
J'ai déjà passé énormément de temps dessus jusqu'à des heures pas possible, tous le reste du site est fait mais je bloc sur j'en suis sur une bricole et donc je viens vers vous pour vous demander un coup de main svp.

Le but est de faire un panier d'achat en javascript.
J'arrive à faire le calcul total des produits ajouter par l'intermédiaire d'une liste select.
mais la ou je bloc c'est avec les checkbox. si je fais mon code des check box à part il fonctionne mais dès que je l'intergre avec mon code existant ou il y a la fonction d'ajout des produit est bien ça ne fonctionne plus....

Le but est de rajouter les options sélectionner (acheter) par les checkbox pour que le montant s'ajoute au panier d'achat et ce en plus du produit sélectionner dans la liste déroulante et donc que le ou les options sélectionner appraissent dans mon panier "text area" ce que j'ai déjà fais avec la partie déroulante " select "

Je vous remercie par avance
Bonne soirée
A bientôt
Voici mon code source.

<!DOCTYPE html>
<html>
<head>
<title>Commande en ligne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" href="css/style.css" type="text/css" />
<script type="text/javascript">
var prix=0;
var txt="";
function nom(choix) {
  if (choix.name=="produit") return "voiture";
  else if (choix.name=="option") return "option";
}
function Toutes(chk) {
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}
function Annuler(chk)
{
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
function ajoute(choix) {
  var pos=choix.selectedIndex;
  var pr=choix[pos].value;
  prix+=eval(pr);
  var s=nom(choix);
  while (s.length < 4) s+=" ";
  s=s+": "+pr;
  txt=txt+s+"\n";
}
function calcul() {
  txt="Prix à payer : \n";
  prix=0;
  ajoute(document.formu.produit);
  ajoute(document.formu.option);

  var s="Total";
  while (s.length < 4) s+=" ";
  txt=txt+s+": "+prix;
  document.formu.commande.value=txt;
}
</script>
</head>
<body>
<div id="global">
<!--menu de navigation-->
<div id="navigation">
        <table class="menu">
         <tr><th>
           <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="berlines.html">Berlines</a></li>
                <li><a href="breaks.html">Breaks</a></li>
                <li><a href="4x4.html">4x4</a></li>
                <li><a href="utilitaires.html">Utilitaires</a></li>
                <li><a href="fiches.html">Fiches techniques</a></li>
                <li><a href="achat.html">Achat</a></li>
                <li><a href="contact.html">Contactez-nous</a></li>
           </ul>
         </th></tr>
        </table>
</div>
<!--achat-->
<div id="panier">
<div class="achat">
  <FORM  NAME="formu">
        <TABLE>
         <TR>
          <TD>
          <B>Choisissez votre véhicule</B><BR>
           <SELECT NAME="produit">
                  <OPTION></OPTION>
                  <OPTION VALUE="27045">La Gnoe 27 045€</OPTION>
                  <OPTION VALUE="34067">La Grenic 34067</OPTION>
                  <OPTION VALUE="23405">Le Spedern 23 405</OPTION>
                  <OPTION VALUE="18563">La Filoux 18 563</OPTION>
           </SELECT><BR><BR>
                       
           <b>Choisissez vos options</b><br>
           <input type="checkbox" name="check_list" value="450">jantes alliages 450<br>
           <input type="checkbox" name="check_list" value="245">toit ouvrant 245<br>
           <input type="checkbox" name="check_list" value="129">essuies glaces automatiques 129<br>
           <input type="checkbox" name="check_list" value="64">phares automatiques 64<br>
           <input type="checkbox" name="check_list" value="90">roue de secours 90<br>
         
           <input type="button" name="Toutes" value="Toutes"
           onClick="CheckAll(document.myform.check_list)">
           <input type="button" name="Annuler" value="Annuler"
           onClick="UnCheckAll(document.myform.check_list)">
          </TD>
         </TR>
         <TR>
          <TD>
           <TEXTAREA ROWS="8" COLS="60" NAME="commande">
           </TEXTAREA>
          </TD>
         </TR>
         <TR>
          <TD>
           <INPUT TYPE="button" VALUE="Total de la commande" ONCLICK="calcul();">
          </TD>
          <TD>
           <B>Modalités de financement</B><BR>
           <SELECT NAME="modalités">
                  <OPTION VALUE="">Comptant</OPTION>
                  <OPTION VALUE="">4 fois sans frais</OPTION>
                  <OPTION VALUE="">10 fois à 1% par mois</OPTION>
                  <OPTION VALUE="">98 fois à 2% par mois</OPTION>
           </SELECT>
         
          </TD>
         </TR>
        </TABLE>
  </FORM>
</div>
</div>

 

<div id="pied">
  <div class="piedbasdepage">
   <h4>copyright 2012</h4>
  </div>
</div>
</div>
</body>
</html>
 


#2 gzbass

    Ceinture Jaune

  • Members
  • PipPip
  • 27 messages

Posté 13 December 2012 - 18:32 PM

voici les modifications que j'ai apporté mais ça ne fonctionne pas ....

Ou se trouve l'erreur ?

merci


<!DOCTYPE html>
<html>
<head>
<title>Commande en ligne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" href="css/style.css" type="text/css" />
<script type="text/javascript">
var prix=0;
var txt="";
function nom(choix) {
  if (choix.name=="produit") return "voiture";
  else if (choix.name=="checklist") return "option";
}
function ajoute(choix) {
  var pos=choix.selectedIndex;
  var pr=choix[pos].value;
  prix+=eval(pr);
  var s=nom(choix);
  while (s.length < 4) s+=" ";
  s=s+": "+pr;
  txt=txt+s+"\n";
}
function calcul() {
  txt="Prix à payer : \n";
  prix=0;
  ajoute(document.formu.produit);
  ajoute(document.formu.checklist);
 
  var s="Total";
  while (s.length < 4) s+=" ";
  txt=txt+s+": "+prix;
  document.formu.commande.value=txt;
}
</script>
</head>
<body>
<div id="global">
<!--menu de navigation-->
<div id="navigation">
    <table class="menu">
         <tr><th>
           <ul>
            <li><a href="index.html">Accueil</a></li>
            <li><a href="berlines.html">Berlines</a></li>
            <li><a href="breaks.html">Breaks</a></li>
            <li><a href="4x4.html">4x4</a></li>
            <li><a href="utilitaires.html">Utilitaires</a></li>
            <li><a href="fiches.html">Fiches techniques</a></li>
            <li><a href="achat.html">Achat</a></li>
            <li><a href="contact.html">Contactez-nous</a></li>
           </ul>
         </th></tr>
    </table>
</div>
<!--achat-->
<div id="panier">
<div class="achat">
  <FORM  NAME="formu">
    <TABLE>
         <TR>
          <TD>
          <B>Choisissez votre véhicule</B><BR>
           <SELECT NAME="produit">
                  <OPTION></OPTION>
                  <OPTION VALUE="27045">La Gnoe 27 045€</OPTION>
                  <OPTION VALUE="34067">La Grenic 34067</OPTION>
                  <OPTION VALUE="23405">Le Spedern 23 405</OPTION>
                  <OPTION VALUE="18563">La Filoux 18 563</OPTION>
           </SELECT><BR><BR>
                         
           <b>Choisissez vos options</b><br>
           <input type="checkbox" Name="checklist" value="450">jantes alliages 450<br>
           <input type="checkbox" Name="checklist" value="245">toit ouvrant 245<br>
           <input type="checkbox" Name="checklist" value="129">essuies glaces automatiques 129<br>
           <input type="checkbox" Name="checklist" value="64">phares automatiques 64<br>
           <input type="checkbox" Name="checklist" value="90">roue de secours 90<br>
         
          </TD>
         </TR>
         <TR>
          <TD>
           <TEXTAREA ROWS="8" COLS="60" NAME="commande">
           </TEXTAREA>
          </TD>
         </TR>
         <TR>
          <TD>
           <INPUT TYPE="button" VALUE="Total de la commande" ONCLICK="calcul();">
          </TD>
          <TD>
           <B>Modalités de financement</B><BR>
           <SELECT NAME="modalités">
                  <OPTION VALUE="">Comptant</OPTION>
                  <OPTION VALUE="">4 fois sans frais</OPTION>
                  <OPTION VALUE="">10 fois à 1% par mois</OPTION>
                  <OPTION VALUE="">98 fois à 2% par mois</OPTION>
           </SELECT>
         
          </TD>
         </TR>
    </TABLE>
  </FORM>
</div>
</div>

 
 
<div id="pied">
  <div class="piedbasdepage">
   <h4>copyright 2012</h4>
  </div>
</div>
</div>
</body>
</html>
 


#3 gzbass

    Ceinture Jaune

  • Members
  • PipPip
  • 27 messages

Posté 13 December 2012 - 20:46 PM

J'ai encore essayé quelques chose mais rien de marche :cry: je désespère :cry: :eusa_doh: :sad:

voilà mon autre essai :?


<!DOCTYPE html>
<html>
<head>
<title>Commande en ligne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" href="css/style.css" type="text/css" />
<script type="text/javascript">
var prix=0;
var txt="";
var i=0;
function nom(choix) {
  if (choix.name=="produit") return "voiture";
  else if (choix.name=="option") return "option";
 
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}
function ajoute(choix) {
  var pos=choix.selectedIndex;
  var pr=choix[pos].value;
  var i=choix.selectedIndex;
  var i=choix[chk].value;
  prix+=eval(pr);
  var s=nom(choix);
  while (s.length < 4) s+=" ";
  s=s+": "+pr;
  txt=txt+i+s+"\n";
}
function calcul() {
  txt="Prix à payer : \n";
  prix=0;
  ajoute(document.formu.produit);
  ajoute(document.formu.option);
 
  var s="Total";
  while (s.length < 4) s+=" ";
  txt=txt+s+": "+prix;
  document.formu.commande.value=txt;
}
</script>
</head>
<body>
<div id="global">
<!--menu de navigation-->
<div id="navigation">
    <table class="menu">
         <tr><th>
           <ul>
            <li><a href="index.html">Accueil</a></li>
            <li><a href="berlines.html">Berlines</a></li>
            <li><a href="breaks.html">Breaks</a></li>
            <li><a href="4x4.html">4x4</a></li>
            <li><a href="utilitaires.html">Utilitaires</a></li>
            <li><a href="fiches.html">Fiches techniques</a></li>
            <li><a href="achat.html">Achat</a></li>
            <li><a href="contact.html">Contactez-nous</a></li>
           </ul>
         </th></tr>
    </table>
</div>
<!--achat-->
<div id="panier">
<div class="achat">
  <FORM  NAME="formu">
    <TABLE>
         <TR>
          <TD>
          <B>Choisissez votre véhicule</B><BR>
           <SELECT NAME="produit">
                  <OPTION></OPTION>
                  <OPTION VALUE="27045">La Gnoe 27 045€</OPTION>
                  <OPTION VALUE="34067">La Grenic 34067</OPTION>
                  <OPTION VALUE="23405">Le Spedern 23 405</OPTION>
                  <OPTION VALUE="18563">La Filoux 18 563</OPTION>
           </SELECT><BR><BR>
          </TD>
         </TR>
         <TR>
          <TD>
           <b>Choisissez vos options</b><br>
           <input type="checkbox" NAME="option" value="450">jantes alliages 450<br>
           <input type="checkbox" NAME="option" value="245">toit ouvrant 245<br>
           <input type="checkbox" NAME="option" value="129">essuies glaces automatiques 129<br>
           <input type="checkbox" NAME="option" value="64">phares automatiques 64<br>
           <input type="checkbox" NAME="option" value="90">roue de secours 90<br>
          </TD>
         </TR>
         <TR>
          <TD>
           <TEXTAREA ROWS="8" COLS="60" NAME="commande">
           </TEXTAREA>
          </TD>
         </TR>
         <TR>
          <TD>
           <INPUT TYPE="button" VALUE="Total de la commande" ONCLICK="calcul();">
          </TD>
          <TD>
           <B>Modalités de financement</B><BR>
           <SELECT NAME="modalités">
                  <OPTION VALUE="">Comptant</OPTION>
                  <OPTION VALUE="">4 fois sans frais</OPTION>
                  <OPTION VALUE="">10 fois à 1% par mois</OPTION>
                  <OPTION VALUE="">98 fois à 2% par mois</OPTION>
           </SELECT>
         
          </TD>
         </TR>
    </TABLE>
  </FORM>
</div>
</div>

 
 
<div id="pied">
  <div class="piedbasdepage">
   <h4>copyright 2012</h4>
  </div>
</div>
</div>
</body>
</html>
 


#4 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 14 December 2012 - 08:50 AM

Salut,

Il faut que tu avances pas à pas.

Pour commencer, avant de passer un argument à une fonction, assure toi de ce qu'il contient.

ainsi, dans ta fonction calcul( ), si tu fais :


function calcul( ) {
  console.log( document.formu.option );
}
 

tu vois que ça retourne toujours "undefined", il est donc normal que ça plante ensuite

note : tu sais comment afficher la console javascript dans ton navigateur ?

Donc, partant de ce constat, tu dois réussir à récupérer les valeurs des cases à cocher du formulaire.
tu utilises donc toujours la console et commence par y afficher
le contenu du formulaire
les cases à cocher ... tu remarques que c'est un tableau (Array)
tu tentes alors d'afficher la première occurence du tableau
enfin, tu regardes si cette première occurence est cochée ou non

A toi de jouer pour la suite ;-)


  console.log( document.formu );
  console.log( document.formu.check_list );
  console.log( document.formu.check_list[0] );
  console.log( document.formu.check_list[0].checked );
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#5 gzbass

    Ceinture Jaune

  • Members
  • PipPip
  • 27 messages

Posté 15 December 2012 - 13:02 PM

Salut

merci pour ton aide c'est sympa.
Du coup je n'ai pas eu le temps de refaire cette partie, j'ai du rendre mon tp avant ....mais je vais bosser avec ce que tu ma dit.
J'espère y arriver
a+ et encore merci :smile:



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)