Javascript Girl
  1. Javascript Girl
  3. Ajouter des champs de formulaire à la liste déroulante dynamiquement remplie avec php
Intereting Posts
Comment nommer une fonction jQuery pour faire fonctionner le bouton arrière d'un navigateur? Comment créez-vous un marqueur avec une icône personnalisée pour google maps API v3? Quel est le concept de Array.map? JQuery find – Dans quel ordre renvoie-t-il des éléments? Je tente d'obtenir les données JSON de js et de recevoir null dans la classe d'action Comment créer une fonctionnalité de drapeau sale Obtenir un identifiant de eventReceive Node js / MongoDB ensemble de répliques dans javascript Meilleures pratiques pour JS – window.open () en href ou sur onclick? Liaison de données angulaires dans ajax html response Ajax obtient l'identifiant de l'élément où il existe plusieurs liens avec des éléments Entrez la clé pour suivre le tabindex (dans le scénario où la touche enter est changée pour se comporter comme onglet) Acceptez tous les nombres sauf 5 zéros consécutifs: Javascript AngularJS: Pourquoi ng-bind est-il meilleur que {{}} en angulaire? Relation entre CommonJS, AMD et RequireJS?

Ajouter des champs de formulaire à la liste déroulante dynamiquement remplie avec php

J'essaie de faire 3 champs de formulaire (une liste déroulante dynamiquement remplie par un script .php et 2 champs de texte) et aussi avec un bouton ajouter 3 de plus et plus encore (lorsque l'utilisateur clique sur le bouton) J'ai essayé plusieurs Mais rien ne semble fonctionner pour moi. (Je suis noob dans JS, AJAX, jQuery, donc j'ai surtout essayé les scripts que j'ai trouvé sur Internet). Voici le code de ces champs de formulaire: 

<form id="form1" name="form1" method="post" action="results.php"> <div id="itemRows"> <select name="species"> <option value="">Select Species</option>'; <?php $sql = "SELECT common FROM species"; $speciesq = mysqli_query($con, $sql); while($row = mysqli_fetch_array($speciesq)) { echo "<option value=\"" . $row['common'] ."\">" . $row['common'] ."</option>"; } ?> </select> Number: <input type="text" name="speciesnumber1" size="7" /> Weight: <input type="text" name="speciesweight1" /> <input onClick="addRow(this.form);" type="button" value="+" /> </div></form>

Et après ce formulaire, il y a le code: 

 <script type="text/javascript"> var rowNum = 0; var ddsel = '<select name="species'+rowNum+'>'; var ddopt = '<option value="">Select Species</option>'; var ddselc= '</select>'; function addRow(frm) { rowNum ++; $.post("getlist.php", function(data) { for (var i=0; i<data.length; i++) { ddopt += '<option value="'+data[i].value+'">'+data[i].value+'</option>'; } }, "json"); var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+frm.add_qty.value+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+frm.add_name.value+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>'; jQuery('#itemRows').append(row); frm.add_qty.value = ''; frm.add_name.value = ''; } function removeRow(rnum) { jQuery('#rowNum'+rnum).remove(); } </script>

Getlist.php est un script simple qui remplit la liste déroulante et envoie les données: 

 <?php include("dbcon.php"); $sql = mysqli_query ($con, "SELECT common FROM species"); $result = array(); while ($row = mysqli_fetch_array($sql)){ $result[] = array( 'value' => $row['common'], ); } echo json_encode($result); ?>

Donc, lorsque je clique sur le bouton "+" (pour ajouter la ligne), rien ne se passe.

RÉSOLU: pour ceux qui viennent ici, lisez aussi les commentaires ci-dessous la réponse.

Vous avez juste un code au mauvais endroit: 

 var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+frm.add_qty.value+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+frm.add_name.value+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>'; jQuery('#itemRows').append(row); frm.add_qty.value = ''; frm.add_name.value = '';

Doit être déplacé dans la fonction de retour de poste comme ceci: 

 function addRow(frm) { rowNum ++; $.post("getlist.php", function(data) { var frm = document.getElementById('form1'); for (var i=0; i<data.length; i++) { ddopt += '<option value="'+data[i].value+'">'+data[i].value+'</option>'; } var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+frm.add_qty.value+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+frm.add_name.value+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>'; jQuery('#itemRows').append(row); frm.add_qty.value = ''; frm.add_name.value = ''; }, "json"); }