web-dev-qa-db-fra.com

Ajout dynamique de champs de formulaire HTML à l'aide de jQuery

Comme je ne peux pas utiliser les formulaires div à l'intérieur, je me demande comment puis-je ajouter un nouveau champ au milieu du formulaire (et je ne peux pas utiliser .append() ici) sans recharger la page ou réécrire le formulaire? (en utilisant jQuery)

EDIT: C'est le HTML:

<form id="form-0" name="0">
<b>what is bla?</b><br>
<input type="radio" name="answerN" value="0"> aaa <br>
<input type="radio" name="answerN" value="1"> bbb <br>
<input type="radio" name="answerN" value="2"> ccc <br>
<input type="radio" name="answerN" value="3"> ddd <br>
//This is where I want to dynamically add the new radio or text line

<input type="submit" value="Submit your answer">
//but HERE is where .append() will put it!

</form>
jqueryhtmldom
33
ilyo

Ce qui semble confondre ce fil est la différence entre:

$('.selector').append("<input type='text'/>");

Ce qui ajoute l'élément cible en tant qu'enfant du sélecteur.

Et

$("<input type='text' />").appendTo('.selector');

Ce qui ajoute l'élément cible en tant qu'enfant du sélecteur.

Notez comment la position de l'élément cible et du sélecteur. Change lorsque vous utilisez les différentes méthodes.

Ce que vous voulez faire est ceci:

$(function() {

  // append input control at start of form
  $("<input type='text' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .prependTo("#form-0");

  // OR

  // append input control at end of form
  $("<input type='text' value='' />")
     .attr("id", "myfieldid")
     .attr("name", "myfieldid")
     .appendTo("#form-0");

  // OR

  // see .after() or .before() in the api.jquery.com library

});
64
thastark

Cela insérera un nouvel élément après le champ de saisie avec l'id "mot de passe".

$(document).ready(function(){
  var newInput = $("<input name='new_field' type='text'>");
  $('input#password').after(newInput);
});

Je ne sais pas si cela répond à votre question.

13
Fredrik

Vous pouvez ajouter n'importe quel type de HTML avec des méthodes telles que append et appendTo (parmi d'autres):

Méthodes de manipulation jQuery

Exemple:

$('form#someform').append('<input type="text" name="something" id="something" />');
8
Rob

quelque chose comme ça pourrait marcher:

<script type="text/javascript">
$(document).ready(function(){
    var $input = $("<input name='myField' type='text'>");
    $('#section2').append($input);
});
</script>

<form>
    <div id="section1"><!-- some controls--></div>
    <div id="section2"><!-- for dynamic controls--></div>
</form>
6
pixelbobby

AppendTo semble contenir un bogue lors de l'utilisation d'un ID de jeu de cadres ajouté à un FORM dans Chrome . Échangé le type d'attribut directement avec div et cela fonctionne.

0
Datadimension