2017-09-19 5 views
-1

Thnaks à l'avance. Je suis nouveau dans le développement Web et coincé dans un problème. Je crée un formulaire dans lequel je veux un nombre variable de champs de saisie. J'ai donc essayé de créer des champs de saisie dynamique en prenant l'aide de certaines sources en ligne. J'ai essayé tout ce que je pouvais imaginer, mais le code ne fonctionne pas.La création dynamique de champs d'entrée ne fonctionne pas. Pourquoi?

Jusqu'à présent, j'ai écrit ce code: index.html

<html> 
<head> 
<title>Test</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head> 
<body> 
<header>Dynamic Add Input Fields</header> 
    <form name="form1" id="form1"> 
     <table class="table table-bordered" id="dynamic_field"> 
      <tr> 
       <td><input type="text" name="name[]" id="name" class="form-control name_list"/></td> 
       <td><input type="button" name="add" id="add" class="btn btn-success" value="ADD"></td> 
      </tr> 
     </table> 
     <input type="button" name="submit" id="submit" value="Submit"/> 
    </form> 
    <script type="text/javascript" > 
    $(document).ready(function() { 
     var i = 1; 
     $('#add').click(function() { 
      i++; 
      $('#dynamic_field').append('<tr id="row'+i+'"><td><input id="name" type="text" name="name[]" class="form-control name_list"/></td><td><input type="button" name="remove" id="row'+i+'" class="btn_remove" Value="X" /></td></tr>'); 
     }); 
     $('.btn_remove').on('click','.btn_remove',function() { 
      var button_id = $(this).attr("id"); 
      $("#row"+button_id+"").remove(); 
     }); 

}); 
</script> 

</body> 
</html> 

Maintenant, quand je lance ce code, puis la sortie est:

dynamique Ajouter des champs d'entrée [Les champs d'entrée] [Ajouter Button] [Soumettre le bouton]

Donc, il devrait fonctionner comme lorsque je clique sur le bouton "Ajouter" alors il devrait ajouter un autre champ de saisie et un bouton "supprimer" à côté de lui. Mais si je clique sur le bouton "Ajouter", rien ne se passe, juste l'URL change.

+0

Qu'est-ce qui ne fonctionne pas exactement? – epascarello

+0

Quelle est votre question? \ –

+0

Je suppose que vous ne regardez pas votre console d'erreur. Points vous droit à l'erreur 'method =" POST ",' – epascarello

Répondre