Il y a actuellement 134 visiteurs
Vendredi 25 Septembre 2020
accueilactualitésdossierscomparer les prixtélécharger gratuitement vos logicielsoffres d'emploiforum informatique
Connexion
Créer un compte

Formulaire conditionnel avec html et java script

Besoin d'aide pour configurer un serveur ? Vous souhaitez obtenir des conseils pour référencer votre site ? Un petit souci pour accéder à votre FTP ? Des soucis de programmation en PHP / ASP / HTML / XHTML / XML / XSLT / CSS / ReactJS / AngularJS / VueJS / CGI / PERL / C / MySQL / PostgreSQL ??? Nous avons peut-être la solution dans ce forum ...

Formulaire conditionnel avec html et java script

Message 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&eacute;
<select name="listequantite">
<script language="javascript">
for (i=0; i<quantite["p0v0"].length; i++)
document.write("&lt;option value=\"" +quantite["p0v0"][i][0]+ "\">" +quantite["p0v0"][i][1]);
</script>
</select>

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

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

Pouvez-vous m'aider?

Merci
realb1965
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 12
Inscription: 21 Avr 2015 19:18
 


Re: Formulaire conditionnel avec html et java script

Message 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
Ne pas faire demain ce que tu peux faire aujourd'hui !!!
Image
Avatar de l'utilisateur
webdesigner
PC-Infopraticien
PC-Infopraticien
 
Messages: 3355
Inscription: 13 Aoû 2008 13:46
Localisation: Vernou la Celle sur Seine
 

Re: Formulaire conditionnel avec html et java script

Message le 21 Avr 2015 21:35

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

Merci
realb1965
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 12
Inscription: 21 Avr 2015 19:18
 

Re: Formulaire conditionnel avec html et java script

Message 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
         )
)
Ne pas faire demain ce que tu peux faire aujourd'hui !!!
Image
Avatar de l'utilisateur
webdesigner
PC-Infopraticien
PC-Infopraticien
 
Messages: 3355
Inscription: 13 Aoû 2008 13:46
Localisation: Vernou la Celle sur Seine
 

Re: Formulaire conditionnel avec html et java script

Message 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>

<!--<div id="AutresProduits"></div> -->

<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é?
realb1965
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 12
Inscription: 21 Avr 2015 19:18
 

Re: Formulaire conditionnel avec html et java script

Message 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'];
}
Ne pas faire demain ce que tu peux faire aujourd'hui !!!
Image
Avatar de l'utilisateur
webdesigner
PC-Infopraticien
PC-Infopraticien
 
Messages: 3355
Inscription: 13 Aoû 2008 13:46
Localisation: Vernou la Celle sur Seine
 

Re: Formulaire conditionnel avec html et java script

Message 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>


<!--<div id="AutresProduits"></div> -->

<p>

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

</p>

</body>
</html>
realb1965
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 12
Inscription: 21 Avr 2015 19:18
 

Re: Formulaire conditionnel avec html et java script

Message le 22 Avr 2015 17:06

Tu souhaites faire quoi exactement avec ton formulaire ?
Ne pas faire demain ce que tu peux faire aujourd'hui !!!
Image
Avatar de l'utilisateur
webdesigner
PC-Infopraticien
PC-Infopraticien
 
Messages: 3355
Inscription: 13 Aoû 2008 13:46
Localisation: Vernou la Celle sur Seine
 

Re: Formulaire conditionnel avec html et java script

Message 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
realb1965
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 12
Inscription: 21 Avr 2015 19:18
 

Re: Formulaire conditionnel avec html et java script

Message le 22 Avr 2015 18:20

Tu utilises quoi comme language pour traiter et sauvegarder les données ?
Ne pas faire demain ce que tu peux faire aujourd'hui !!!
Image
Avatar de l'utilisateur
webdesigner
PC-Infopraticien
PC-Infopraticien
 
Messages: 3355
Inscription: 13 Aoû 2008 13:46
Localisation: Vernou la Celle sur Seine
 

Re: Formulaire conditionnel avec html et java script

Message le 22 Avr 2015 18:33

Je ne sais pas. Je pensais utiliser un programme du genre mail.php pour envoyer mes données
realb1965
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 12
Inscription: 21 Avr 2015 19:18
 

Re: Formulaire conditionnel avec html et java script

Message 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 ?
Ne pas faire demain ce que tu peux faire aujourd'hui !!!
Image
Avatar de l'utilisateur
webdesigner
PC-Infopraticien
PC-Infopraticien
 
Messages: 3355
Inscription: 13 Aoû 2008 13:46
Localisation: Vernou la Celle sur Seine
 

Re: Formulaire conditionnel avec html et java script

Message 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.
realb1965
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 12
Inscription: 21 Avr 2015 19:18
 

Re: Formulaire conditionnel avec html et java script

Message 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';
       }
Ne pas faire demain ce que tu peux faire aujourd'hui !!!
Image
Avatar de l'utilisateur
webdesigner
PC-Infopraticien
PC-Infopraticien
 
Messages: 3355
Inscription: 13 Aoû 2008 13:46
Localisation: Vernou la Celle sur Seine
 

Re: Formulaire conditionnel avec html et java script

Message 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
Image

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
realb1965
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 12
Inscription: 21 Avr 2015 19:18
 

Suivante


Sujets similaires

Message Police Kelt UNICODE acceptée en HTML ?
Bonjour,Habitué à modifier mes GEDCOM pour une intéraction vers un site hôte pour leur exploitation, j'utilise parfois une action sur des polices à l'affichage.Tout d'abord, une transformation basique de zones de mon GEDCOM par :<font face="Comic Sans MS" color=#000099 size="2" ...
Réponses: 7

Message NetFramework et Java sous Win10
Est-ce que ces trois plug-in (est-ce bien des plug-in, ou carrément des logiciels?) sont encore nécessaire sous Win10?Je sais que certains d'entre-eux fonctionnent avec certains programmes mais que Win10 les installe d'office lors de l'installation des dits programmes. Ma question se porte plutôt su ...
Réponses: 1

Message site en flash ou java
bonjour,comment savoir si un site utilise flash player ou java ?merci d'avance. à bientôt.
Réponses: 1

Message Script pour désactiver/activer Bluetooth
Bonjour, Connaissez-vous la commande en batch qui permet de désactiver les périphériques Bluetooth de notre PC ? J'aimerais en quelques lignes coder un .bat qui effectue ceci : - Désactive le Bluetooth - Wait 5 s - Réactive le Bluetooth Un grand merci !
Réponses: 1

Message Programmation en HTML
Bonjour à tous,Je suis nouveau sur l'informatique de programmation.Voici ce que j'ai appris :<DOCTYPE html> --> Je sais que ceci permet de dire que ce sera en HTML. <html></html> ---> Les balises pour le tout en html. <head></head> ? pour le titre de la page < ...
Réponses: 2

Message problème script
Bonjour,Depuis quelques jours j'ai très souvent une fenêtré qui apparait a l'écran:http://www.cjoint.com/c/GIwl7eMoYozj'utilise uniquement Firefox.Dans le panneau de configuration il ni a ni internet explorer,ni flexnext.Que faire.Cordialement
Réponses: 13

Message [résolu] Cherche script pour greasemonkey
Bonjour, Dans quelques jour je vais devoir porter le pc chez un technicien pour qu'il m'installe windows 7 (mise à niveau de windows vista)Aujourd'hui je me suis aperçu que le site userstyles a changé de présentation.j'attire votre attention sur l'userstyle "global black for amoled displays&qu ...
Réponses: 2


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités


.: Nous contacter :: Flux RSS :: Données personnelles :.