IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Cr�ation formulaire de bon de commande


Sujet :

JavaScript

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    Juillet 2015
    Messages
    3
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 41
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activit� : Analyste d'exploitation
    Secteur : Administration - Collectivit� locale

    Informations forums :
    Inscription : Juillet 2015
    Messages : 3
    Par d�faut Cr�ation formulaire de bon de commande
    Bonjour,

    Je suis photographe et je souhaite mettre en place un formulaire de "pr�-commande" de photos sur mon blog.
    L'utilisateur saisirait ses coordonn�es puis :
    - Nom de la s�ance photos (liste d�roulante)
    - R�f�rence photo (texte)
    - Format photo (liste d�roulante)
    -Impression (liste d�roulante)
    -Quantit� (texte)

    En fonction du format, de l'impression et de la quantit�, le prix affich� doit changer.

    Je vois �a sous forme de tableau avec un bouton "ajouter" et un bouton "supprimer"
    A la fin un total s'affiche et en cliquant sur "valider", j'aimerai recevoir sa commande par mail.

    Voici ce que j'ai "rassembl�" apr�s diverses recherches :
    Le but �tant de pouvoir mixer le tout pour r�pondre � ma demande.
    J'ai un peut de mal avec les tableaux et l'incr�mentation d'o� ma demande d'aide.

    Merci

    Olivier

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    <td style="width: 196px;">Total Hors Taxe : <div id="s1"><input name="prixht" id="prixht" type="text" readonly="readonly" /></div>&nbsp;</td>
    <input onclick="test()" type="button" value="test" />
     
     <title> Tableau de commande </title>
     <script language="javascript">
     
    function test(){
     
    var prixht = document.getElementById('prixht');
    var vs1 = 270;
    var vs2 = 10;
    prixht.value = vs1 + vs2 ;
    }
     
     
     
     
      function addRow(tableID) {
     
       var table = document.getElementById(tableID);
     
       var rowCount = table.rows.length;
       var row = table.insertRow(rowCount);
     
       var colCount = table.rows[0].cells.length;
     
       for(var i=0; i<colCount; i++) {
     
        var newcell = row.insertCell(i);
     
        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
         case "text":
           newcell.childNodes[0].value = "";
           break;
         case "checkbox":
           newcell.childNodes[0].checked = false;
           break;
         case "select-one":
           newcell.childNodes[0].selectedIndex = 0;
           break;
        }
       }
      }
     
      function deleteRow(tableID) {
       try {
       var table = document.getElementById(tableID);
       var rowCount = table.rows.length;
     
       for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
         if(rowCount <= 2) {
      addRow(tableID);
                    // alert("Cannot delete all the rows.");
                   //  break;
                        }
         table.deleteRow(i);
         rowCount--;
         i--;
        }
     
     
       }
       }catch(e) {
        alert(e);
       }
      }
     
     
     
    </script>
    <script language="javascript">
     
    function Format(selection) {
      if (selection.value == "10*15") {
       var quantite = document.getElementById('quantite');
       prix_format= 1;
       var prix = document.getElementById('prix');
       prix.value = quantite * prix_format;
     
     }
      else if (selection.value == "11*15") {
     
    var prix = document.getElementById('prix');
       var quantite = document.getElementById('quantite');
       prix_format= 2;
       var prix = document.getElementById('prix');
       prix.value = quantite * prix_format;
     
     }
      else if (selection.value == "20*30") {
       var quantite = document.getElementById('quantite');
       prix_format= 3;
       var prix = document.getElementById('prix');
       prix.value = quantite * prix_format;
     
     }
      else {
     // do something
     }
      }
    function calcul(){
     
     
    }
     
     
     
    </script>
    </fieldset>
    </form>
    </head>
    <body>
     
     <table border="1" id="TableID" style="width: 350pxpx;">
    <tr>
     
    <th bgcolor="grey" td="" width="15"></th><th bgcolor="grey" td="" width="90">Séance</th><th bgcolor="grey" td="" width="90">Référence</th><th bgcolor="grey" td="" width="75">Format</th><th bgcolor="grey" td="" width="45">Impression</th><th bgcolor="grey" td="" width="45">Quantité</th><th bgcolor="grey" td="" width="45">Prix</th></tr>
    <tr>
       <td><input name="chk" size="15" type="checkbox" /></td>
        <td>
        <select name="Séance" style="width: 90;">
        <option selected="" value="Sélectionnez votre séance">Sélectionnez votre séance</option>
         <option selected="" value="Séance 1">Séance 1</option>
         <option value="Séance 2">Séance 2Séance 2</option>
         </select>
     
       <td><input name="Ref" size="25" type="text" /></td>
       <td>
     
          <select onchange="Format(this)" style="width: 90;">
          <option value="10*15">10*15</option>
         <option value="11*15">11*15</option>
         <option value="20*30">20*30</option>
        </select>
       </td>
    <td>
        <select name="Impression" style="width: 10;">
         <option value="Mat">Mat</option>
         <option value="Brillant">Brillant</option>
         <option value="Satiné">Satiné</option>
        </select>
       </td>
     
     <td><input name="Quantite" id="quantite" size="2" type="text" /></td>    
     
     <td><input name="prix" id="prix" size="3" type="text" readonly="readonly" /></td>    
     
     
    </tr>
    </table>
    <input onclick="addRow('TableID')" type="button" value="Ajouter" />
    <input onclick="deleteRow('TableID')" type="button" value="Supprimer" />
    </body></html>

  2. #2
    Membre confirm�
    Profil pro
    Inscrit en
    Octobre 2009
    Messages
    175
    D�tails du profil
    Informations personnelles :
    �ge : 51
    Localisation : France, Seine et Marne (�le de France)

    Informations forums :
    Inscription : Octobre 2009
    Messages : 175
    Par d�faut
    Salut,
    ta demande n'est pas bien clair.

    J'ai coll� tout ton code dans jsfiddle et forcement le r�sultat ne ressemble a rien.

    https://jsfiddle.net/m7gta50o/

    Il faudrait d�j� que tu fasse un peu de m�nage la dedans pour qu'au minimum le formulaire s'affiche correctement.
    Ensuite tu pourra demander de l'aide pour le faire fonctionner.

  3. #3
    Candidat au Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    Juillet 2015
    Messages
    3
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 41
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activit� : Analyste d'exploitation
    Secteur : Administration - Collectivit� locale

    Informations forums :
    Inscription : Juillet 2015
    Messages : 3
    Par d�faut
    Hello,

    J'avais plus de code de pr�vu pour montrer les diff�rentes possibilit�s � utiliser.
    voici le code "�pur�" avec le tableau souhait�.

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    Remplir le formulaire pour valider votre commande
     
    <html>
    <head>
     
    <form action="inscription.php" method="post">
         <fieldset class="Coordonnées">
              <legend>Vos Coordonnées</legend>
             <label for="nom">Nom</label>
             <input id="nom" name="nom" pattern="[a-Z]{*}" type="text" /><br />
             <label for="prenom">Prénom </label>
             <input id="prenom" name="prenom" type="text" /><br />
             <label for="mail">mail </label>
             <input id="mail" name="mail" type="text" /><br />
             <label for="mail_conf">Confirmer mail </label>
             <input id="mail_conf" name="Confirmer mail" type="text" /><br />
     
              <legend>Adresse</legend>
              <label>Rue</label>
              <input id="rue" name="rue" type="text" /><br />
              <label>Code postal</label>
              <input id="code-postal" name="code-postal" type="text" /><br />
              <label>Ville</label>
              <input id="ville" name="ville" type="text" />
     
        </fieldset>
     
    <fieldset class="Votre commande">
     <legend>Votre commande</legend>
     
     
     <title> Tableau de commande </title>
     <script language="javascript">
     
     
      function addRow(tableID) {
     
       var table = document.getElementById(tableID);
     
       var rowCount = table.rows.length;
       var row = table.insertRow(rowCount);
     
       var colCount = table.rows[0].cells.length;
     
       for(var i=0; i<colCount; i++) {
     
        var newcell = row.insertCell(i);
     
        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
         case "text":
           newcell.childNodes[0].value = "";
           break;
         case "checkbox":
           newcell.childNodes[0].checked = false;
           break;
         case "select-one":
           newcell.childNodes[0].selectedIndex = 0;
           break;
         }
       }
      }
     
      function deleteRow(tableID) {
       try {
       var table = document.getElementById(tableID);
       var rowCount = table.rows.length;
     
       for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
         if(rowCount <= 2) {
      addRow(tableID);
                    // alert("Attention la 1ère ligne n'est pas supprimable. La quantité est initialisée à 0");
                   //  break;
                        }
         table.deleteRow(i);
         rowCount--;
         i--;
        }
     
     
       }
       }catch(e) {
        alert(e);
       }
      }
     
    function testValue(selection) {
      if (selection.value == "Dawn") {
    	// do something
    	}
      else if (selection.value == "Noon") {
    	// do something
    	}
      else if (selection.value == "Dusk") {
    	// do something
    	}
      else {
    	// do something
    	}
      }
     
    </script>
     
    </form>
    </head>
    <body>
     
     
     <table border="1" id="TableID" style="width: 350pxpx;">
    <tr>
     
    <th bgcolor="grey" td="" width="15"></th><th bgcolor="grey" td="" width="90">Séance</th><th bgcolor="grey" td="" width="90">Référence</th><th bgcolor="grey" td="" width="75">Format</th><th bgcolor="grey" td="" width="45">Impression</th><th bgcolor="grey" td="" width="45">Quantité</th><th bgcolor="grey" td="" width="45">Tarif</th></tr>
    <tr>
       <td><input name="chk" size="15" type="checkbox" /></td>
        <td>
        <select name="Séance" style="width: 90;">
         <option selected="" value="Choix">Sélectionner votre séance</option>
         <option selected="" value="Séance 1">Séance 1</option>
         <option value="Séance 2">Séance 2Séance 2</option>
         </select>
     
       <td><input name="Ref" size="25" type="text" /></td>
       <td>
        <select name="Format" style="width: 90;">
         <option value="10*15">10*15</option>
         <option value="11*15">11*15</option>
         <option value="20*30">20*30</option>
        </select>
       </td>
    <td>
        <select name="Impression" style="width: 10;">
         <option value="Mat">Mat</option>
         <option value="Brillant">Brillant</option>
         <option value="Satiné">Satiné</option>
        </select>
       </td>
    <td>
        <select name="Quantité" style="width: 20;">
         <option value="0">0</option>
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
        </select>
       </td>
     
    <td><input name="Prix" readonly="" type="text" /></td>
     
      </td></tr>
    </table>
     
    </fieldset>
    <input onclick="addRow('TableID')" type="button" value="Ajouter" />
    <input onclick="deleteRow('TableID')" type="button" value="Supprimer" />
    </body></html>
    Merci

    Olivier

  4. #4
    Membre confirm�
    Profil pro
    Inscrit en
    Octobre 2009
    Messages
    175
    D�tails du profil
    Informations personnelles :
    �ge : 51
    Localisation : France, Seine et Marne (�le de France)

    Informations forums :
    Inscription : Octobre 2009
    Messages : 175
    Par d�faut
    j'ai remis tout �a dans fiddle et fait un peu de CSS:

    https://jsfiddle.net/uLa5doob/

    Pour le moment rien ne marche et sous fiddle c'est pas pratique de corriger.

    J'ai l'impression que tu t'es d�brouill� pour faire le code HTML mais que le javascript c'est du copier coller piqu� sur le net.
    Pour avoir le resultat que tu recherche �a va �tre un peu compliqu� quand m�me. Je doute que tu ai le niveau pour y arriver seul.
    Il faut faire du javascript pour faire les pr�-calculs sur le navigateur.
    Envoyer ensuite les donn�es sur le serveur et refaire les v�rifications et calculs en PHP puis envoyer le tout par email.

    Avec ce que tu nous fourni comme code, il y a a peu pr�s tout a faire.

    Si tu n'est pas trop press�, contacte moi par MP et j'essaierai de t'aider.

  5. #5
    Candidat au Club
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    Juillet 2015
    Messages
    3
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 41
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activit� : Analyste d'exploitation
    Secteur : Administration - Collectivit� locale

    Informations forums :
    Inscription : Juillet 2015
    Messages : 3
    Par d�faut
    Bonjour.

    Merci pour le retour.

    Pourtant sur mon site, et m�me si je cr�� une page html sur mon pc, �a fonctionne en partie (le bouton Ajouter, ajoute bien une ligne et le bouton supprimer supprime la/les lignes coch�es)
    Mon probl�me venait plus de la fonction calcul.

    Je vais chercher encore.

    Merci quand m�me.

    Cdt,

    Olivier

  6. #6
    Mod�rateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Is�re (Rh�ne Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par d�faut
    Bonjour,
    je ne me concentre que sur ta fonction de calcul.

    � tout d'abord on va proc�der � quelles modification de ton HTML, � savoir mettre dans tes SELECT des value qui signifient quelque chose pour �viter les conditions � r�p�tition dans ton code javascript.
    Code html : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <select onchange="calcul(this)">
      <option value="0">Sélectionnez votre séance</option>
      <option value="1">Séance 1</option>
      <option value="2">Séance 2Séance 2</option>
    </select>
    <!-- la suite -->
    <select onchange="calcul(this)">
      <option value="1">10*15</option>
      <option value="2">11*15</option>
      <option value="3">20*30</option>
    </select>
    <!-- la suite -->
    <select onchange="calcul(this)">
      <option value="1">Mat</option>
      <option value="2">Brillant</option>
      <option value="3">Satiné</option>
    </select>
    - les value seront s�rement � adapter
    - le STYLE est � mettre dans la partie <style> de la page
    - la fonction sur le onchange passe en param�tre l'objet lui m�me, le this, pour pouvoir r�cup�rer son parent TR dans la fonction.

    � Ceci �tant fait dans la fonction de calcul on va r�cup�rer les diff�rents �l�ments permettant le calcul et ce fonction uniquement de la ligne concern�e ce qui permet de s'affranchir de la notion de quelle ligne est concern�e, combien y en a t-il et si je supprime je fait comment ?

    La fonction calcul pourrait ressembler � cela
    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    function calcul( element) {
      // récupération de la TR concernée
      var oParent = element.parentNode.parentNode;  // SELECT -> TD -> TR
     
      // récupération des éléments de la ligne
      var oInput  = oParent.getElementsByTagName('INPUT');
      var oSelect = oParent.getElementsByTagName('SELECT');
     
      // récupération des SELECT d'intérêt
      var oSeance = oSelect[0];
      var oFormat = oSelect[1];
      var oPrint  = oSelect[2];
     
      // récupération des INPUT d'intérêt
      var oQuantite = oInput[2];
      var oPrix     = oInput[3];
     
      // récupération des valeurs de calcul
      var coef_seance = parseFloat( oSeance.value);
      var coef_format = parseFloat( oFormat.value);
      var coef_print  = parseFloat( oPrint.value);  
      var quantite    = parseInt( oQuantite.value, 10);
     
      // calcul et affectation dans INPUT  
      oPrix.value = quantite*coef_format;
    }
    elle est incompl�te ne connaissant pas la formule de calcul que tu souhaites appliqu�e mais tous les �l�ments sont pr�sents.

    Avantage aucune utilisation d'ID et elle fonctionnera quelque soit la ligne ajout�e via ta fonction d'ajout.

Discussions similaires

  1. [Toutes versions] Cr�er un formulaire (bon de commande) PDF par commande d'une liste
    Par Carlycox dans le forum Macros et VBA Excel
    R�ponses: 2
    Dernier message: 28/05/2013, 15h11
  2. Cr�ation d'un bouton de commande sur formulaire
    Par larangel dans le forum IHM
    R�ponses: 4
    Dernier message: 13/09/2008, 18h15
  3. [DW8] cr�ation bouton pour mail avec bon de commande
    Par isa51 dans le forum Dreamweaver
    R�ponses: 6
    Dernier message: 12/06/2008, 11h28
  4. Cr�ation de bon de commande avec Jasper
    Par martinsupiot dans le forum Jasper
    R�ponses: 2
    Dernier message: 11/12/2007, 15h14
  5. Cr�ation d'un bouton de commande dans un formulaire
    Par annelaure dans le forum Access
    R�ponses: 5
    Dernier message: 30/05/2006, 11h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo