Formulaire conditionnel avec html et java script

realb1965 · le 21 Avr 2015 19:21

Bonjour,

Je veux faire un formulaire mconditionnel aux choix de produit et de quantité.

Actuellement j'ai 3 produits avec 2 choix de format et selon le format choisit, j'ai 2 type de quantité.

Cela marche actuellement, mais je voudrais que le client puisse choir plus de 1 produits et c'est là que ça se gâte.

Vous pouvez visualiser mon formulaire ;a cette adresse: http://monsite.96.lt/

------------ Voici mon code -----------------

<html>
<head>
<script type="text/javascript">
var produit = []; //nouveau tableau
produit[0] = ["p0", "produit0"]; //nouveau tableau, on va donc avoir produit[0][0]="p0"
produit[1] = ["p1", "produit1"];
produit[2] = ["p2", "produit2"];

var format=[];
// produit0
format["p0"] = [];
format["p0"][0] = ["p0v0", "produit0-format0"];
format["p0"][1] = ["p0v1", "produit0-format1"];

//produit1
format["p1"]=[];
format["p1"][0] = ["p1v0", "produit1-format0"];
format["p1"][1] = ["p1v1", "produit1-format1"];

//produit2
format["p2"] = [];
format["p2"][0] = ["p2v0", "produit2-format0"];
format["p2"][1] = ["p2v1", "produit2-format1"];

var quantite = [];
//produit0-format0
quantite["p0v0"] = [];
quantite["p0v0"][0] = ["p0v0r0", "produit0-format0-quantite0"];
quantite["p0v0"][1] = ["p0v0r1", "produit0-format0-quantite1"];

//produit0-format1
quantite["p0v1"] = [];
quantite["p0v1"][0] = ["p0v1r0", "produit0-format1-quantite0"];
quantite["p0v1"][1] = ["p0v1r1", "produit0-format1-quantite1"];
quantite["p0v1"][2] = ["p0v1r2", "produit0-format1-quantite2"];

//produit1-format0
quantite["p1v0"] = [];
quantite["p1v0"][0] = ["p1v0r0", "produit1-format0-quantite0"];
quantite["p1v0"][1] = ["p1v0r1", "produit1-format0-quantite1"];

//produit1-format1
quantite["p1v1"] = [];
quantite["p1v1"][0] = ["p1v1r0", "produit1-format1-quantite0"];
quantite["p1v1"][1] = ["p1v1r1", "produit1-format1-quantite1"];

//produit2-format0
quantite["p2v0"] = [];
quantite["p2v0"][0] = ["p2v0r0", "produit2-format0-quantite0"];
quantite["p2v0"][1] = ["p2v0r1", "produit2-format0-quantite1"];

//produit1-format1
quantite["p2v1"] = [];
quantite["p2v1"][0] = ["p2v1r0", "produit2-format1-quantite0"];
quantite["p2v1"][1] = ["p2v1r1", "produit2-format1-quantite1"];
quantite["p2v1"][2] = ["p2v1r2", "produit2-format1-quantite2"];
function filltheselect(liste, choix)
{switch (liste)
{
case "listeproduits":
raz("listeformat");
raz("listequantite");
for (i=0; i<format[choix].length; i++)
{
new_option = new Option(format[choix][i][1],format[choix][i][0]);
document.formu.elements["listeformat"].
options[document.formu.elements["listeformat"].length]=new_option;
}
for (i=0; i<quantite[choix+"v0"].length; i++)
{
new_option = new Option(quantite[choix+"v0"][i][1],quantite[choix+"v0"][i][0]);
document.formu.elements["listequantite"].options[document.formu.
elements["listequantite"].length]=new_option;
}
break;
case "listeformat":
raz("listequantite");
for (i=0; i<quantite[choix].length; i++)
{
new_option = new Option(quantite[choix][i][1],quantite[choix][i][0]);
document.formu.elements["listequantite"].options[document.formu.
elements["listequantite"].length]=new_option;
}
break;
}
}

function raz(liste)
{l=document.formu.elements[liste].length;
for (i=l; i>=0; i--)
document.formu.elements[liste].options[i]=null;
}
</script>
</head>
<body>
<form name="formu">
Choisir un produit
<select name="listeproduits" onChange='filltheselect(this.name, this.value)'>
<script language="javascript">
for (i=0; i<produit.length; i++)
document.write("<option value=\"" +produit[i][0]+ "\">" +produit[i][1]);
</script>
</select>
<br>
Choisir un format
<select name="listeformat" onChange='filltheselect(this.name, this.value)'>
<script language="javascript">
for (i=0; i<format["p0"].length; i++)
document.write("<option value=\"" +format["p0"][i][0]+ "\">" +format["p0"][i][1]);
</script>
</select>
<br>
Choisir une quantité
<select name="listequantite">
<script language="javascript">
for (i=0; i<quantite["p0v0"].length; i++)
document.write("<option value=\"" +quantite["p0v0"][i][0]+ "\">" +quantite["p0v0"][i][1]);
</script>
</select>

</form>
</body>
</html>

------------- fin du code -------------------

Pouvez-vous m'aider?

Merci

webdesigner · le 21 Avr 2015 20:04

Pour pouvoir avoir autant de produits avec les options il faut utiliser jquery pour dupliquer le tout avec du incrémentales avec la fonction append

realb1965 · le 21 Avr 2015 21:35

Je ne connais pas jquery. Est-ce que tu peux m'aider ou me donner des exemples?

Merci

webdesigner · le 21 Avr 2015 22:09

Voici un code vite fait je n'ai pas testé, j'ai écrit directement

Tu commences par intégrer jQuery

Code: Tout sélectionner: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Toujours dans le <head>

Code: Tout sélectionner: <script type="text/javascript"> $(document).ready(function(){ var id =1; $("#Ajouter").click(function(){ var form = "<select name="form["+ id +"][produit]"><option value="1"> 1 </option></select> <select name="form["+ id +"][format]"><option value="1"> 1 </option></select> <select name="form["+ id +"][quantite]"><option value="0"> aucune </option><option value="1"> 1 </option><option value="2"> 2</option></select>"; $("#AutresProduits").append(form); }); }); </script>

Code: Tout sélectionner: <div> <select name="form[][produit]"> <option value="1"> 1 </option> </select> <select name="form[][format]"> <option value="1"> 1 </option> </select> <select name="form[][quantite]"> <option value="0"> aucune </option> <option value="1"> 1 </option> <option value="2"> 2 </option> </select> </div> <div id="AutresProduits"></div> <bouton id="ajouter" value="Ajouter"></bouton>

Lors du POST tu devrais avoir un tableau de se genre si tu as cliqué deux fois sur le bouton

Code: Tout sélectionner: array ( [0] => array ( [produit] => 1 [format] => 1 [quantite] => 1 ) [1] => array ( [produit] => 2 [format] => 1 [quantite] => 3 ) [2] => array ( [produit] => 3 [format] => 2 [quantite] => 2 ) )

realb1965 · le 21 Avr 2015 22:43

Merci webdesigner,

J'ai une petite erreur à cette ligne:

var form = "<select name="form["+ id +"][produit]"><option value="1"> 1 </option></select>

Voici mon code avec ajout d'un deuxième produit pour commande:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script type="text/javascript">
window.onload = function() {
document.myform.action = get_action();
}

function get_action() {
return form_action;
}
</script>

<script type="text/javascript">
$(document).ready(function(){

var id =1;

$("#Ajouter").click(function(){

var form = "<select name="form["+ id +"][produit]"><option value="1"> 1 </option></select>

<select name="form["+ id +"][format]"><option value="1"> 1 </option></select>

<select name="form["+ id +"][quantite]"><option value="0"> aucune </option><option value="1"> 1 </option><option value="2"> 2</option></select>";

$("#AutresProduits").append(form);

});

});
</script>

<form name="form">
<div id="Produit1"></div>
<div>
<select name="form[][produit]">
<option value="1"> 1 </option>
</select>

<select name="form[][format]">
<option value="1"> 1 </option>
</select>

<select name="form[][quantite]">
<option value="0"> aucune </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>

</div>

<br>

<div id="Produit2"></div>
<div>
<select name="form[][produit]">
<option value="1"> 1 </option>
</select>

<select name="form[][format]">
<option value="1"> 1 </option>
<option value="1"> 2 </option>
</select>

<select name="form[][quantite]">
<option value="0"> aucune </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
</form>



<p>
<div class="button">
<button type="submit">Envoyer votre commande</button>
</div>
</p>

</body>
</html>

Est-ce correct?

De quel manière mon formulaire est-il envoyé?

webdesigner · le 21 Avr 2015 23:04

Allez je vais être sympa, voici le code qui fonctionne :

https://jsfiddle.net/dk7nu3a5/

Après il ne reste plus que le traitement du tableaux envoyé qui aura le nom $_POST['form']

tu fais un petit foreach dessus

Code: Tout sélectionner: foreach($_POST['form'] as $key = $val) { // tu fais se que tu veux avec les données $val['produit']; $val['format']; $val['quantite']; }

realb1965 · le 22 Avr 2015 14:28

Merci webdesigner,

J'ai encore un problème, le bouton ajouter ne marche pas. De plus à quoi sert le foreach ?

Peut-on envoyer le formulaire sans avoir recours à un fichier externe ?

Merci de m'aider

------------Voici le code-----------------

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script type="text/javascript">
window.onload = function() {
document.myform.action = get_action();
}

function get_action() {
return form_action;
}
</script>

<script type="text/javascript">

var id =1;

$("#Ajouter").click(function(){

$("#AutresProduits").append('<div class="produits"><select name="form['+ id +'][produit]"><option value="1"> 1 </option></select><select name="form['+ id +'][format]"><option value="1"> 1 </option></select><select name="form['+ id +'][quantite]"><option value="0"> aucune </option><option value="1"> 1 </option><option value="2"> 2</option></select></div>');

});
</script>

<style>
bouton { border:1px solid #FF6600; width:70px; height:30px; display:block; background:#F2F2F2; padding:5px; }
.produits { width:100%; }
</style>

</head>
<body>

<form action="/vers_ton_fichier_de_traiement" metho="post">
<div id="Produit1"></div>
<div>
<select name="form[][produit]">
<option value="1"> 1 </option>
</select>

<select name="form[][format]">
<option value="1"> 1 </option>
</select>

<select name="form[][quantite]">
<option value="0"> aucune </option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>

</div>

<br>



<p>

<bouton id="Ajouter">Ajouter</bouton>
<input id="Ajouter"type="submit" value="Envoyer"/>
</form>
</form>

</p>

</body>
</html>

webdesigner · le 22 Avr 2015 17:06

Tu souhaites faire quoi exactement avec ton formulaire ?

realb1965 · le 22 Avr 2015 17:35

La commande de produit, sans faire de panier d'achat avec paiement en ligne.

Je n'ai pas encore ajouter les champs d'identification du client

webdesigner · le 22 Avr 2015 18:20

Tu utilises quoi comme language pour traiter et sauvegarder les données ?

realb1965 · le 22 Avr 2015 18:33

Je ne sais pas. Je pensais utiliser un programme du genre mail.php pour envoyer mes données

webdesigner · le 22 Avr 2015 18:36

ok donc tu ne maîtrise pas forcément cette partie là ? Tu as quoi comme notion dans PHP / MySQL ?

realb1965 · le 22 Avr 2015 18:56

PHP, très peu et rien avec MySQL. Je veux juste que la personne reçoive le formulaire avec ce que le client aura choisi. C'est comme une réservation de produit. La personne va facturé le client par la suite.

webdesigner · le 22 Avr 2015 21:53

Tu postes les données sur un fichier php avec ça dedans, cela enverra un email sur l'adresse vendeur@mon-email.fr :

Code: Tout sélectionner: $message = ''; foreach( $_POST['form'] as $key => $val ) { $message .= 'Produit '. $val['produit'] .' / Format : $val['format'] .' / Quantité : $val['quantite'] .'<br/><br/>'; } $from = "client@son-email.fr"; $to = "vendeur@mon-email.fr"; $html = '<html><body>'.$message.'</body></html>'; $headers = 'MIME-Version: 1.0' . "\r\n"; $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n"; $headers .= 'To: info <'. $to .'>' . "\r\n"; $headers .= 'From: MON SITE <'. $from .'>' . "\r\n"; if(mail($to, $subject, $html, $headers)){ echo 'MESSAGE OK'; } else { echo 'ERREUR MESSAGE'; }

realb1965 · le 22 Avr 2015 23:26

Merci de ton aide,

Il y a une erreur que dreamweaver me donne et je ne sais pas quoi

Si je rajoute des champs dans mon formulaire (nom, téléphone, adresse), est-ce qu'il faut que j'ajoute ces champs dans la section "$message" du fichier php?

Le formulaire est à cette adresse: http://monsite.96.lt/

Merci encore une fois

Formulaire conditionnel avec html et java script

Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Re: Formulaire conditionnel avec html et java script

Sujets similaires

Qui est en ligne