Ajouter dynamiquement le champ de formulaire HTML en utilisant jQuery

Question

Comme je ne peux pas utiliser div dans les formulaires, je me demande comment 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> 

Answer 1

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

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

l'élément qui ajoute cible comme un enfant de la .Sélecteur.

Et

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

l'élément qui ajoute cible comme un enfant de la .Sélecteur.

Notez comment la position de l'élément cible & le .selector change lors de l'utilisation des différentes méthodes.

Ce que vous voulez faire est la suivante:

$(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 

}); 

Answer 2

Vous pouvez ajouter tout type de HTML avec des méthodes comme append et appendTo (entre autres):

jQuery manipulation methods

Exemple:

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

Answer 3

quelque chose comme ceci pourrait fonctionner:

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

Answer 4

Cela va insérer un nouvel élément après le champ de saisie avec id « mot de passe ».

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

Vous ne savez pas si cela répond à votre question.

Answer 5

Il semble y avoir un bug avec l'aide d'un ID appendTo frameset annexant à un formulaire dans Chrome. Échangé le type d'attribut directement avec div et cela fonctionne.