L'ajout dynamique de HTML champ de formulaire à l'aide de jQuery

Depuis je ne peux pas utiliser des div à l'intérieur des formes, je me demande comment puis-je ajouter un nouveau champ dans le milieu de l'écran (et je ne peux pas utiliser .append() ici) sans avoir à recharger la page ou de réécriture de la forme? (à l'aide de 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>
  • Vous question n'a pas trop de sens. Qu'avez-vous déjà essayé?
  • J'ai essayé de slelect l'avant-dernière enfant de la forme et de l'utilisation ajouter à cela mais il ne fonctionne pas
  • Ce qui vous fait penser que vous ne pouvez pas utiliser div éléments à l'intérieur de form éléments?
InformationsquelleAutor ilyo | 2011-05-23
  1. 65

    Ce qui semble être source de confusion, ce fil est la différence entre:

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

    Qui ajoute l'élément cible, comme un enfant de la .sélecteur.

    Et

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

    Qui ajoute l'élément cible, comme un enfant de la .sélecteur.

    Notez la position de l'élément cible, & le .sélecteur de changement lors de l'utilisation de ces 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

});
    InformationsquelleAutor thastark
  2. 13

    Cela permettra d'insérer 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);
});

    Ne sais pas si cela répond à votre question.

    InformationsquelleAutor Fredrik
  3. 8

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

    jQuery méthodes de manipulation

    Exemple:

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

    quelque chose comme ça 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>
    • tahnx mais la chose est, si vous avez un formulaire complet, je ne peux pas ajouter utiliser car il va insérer la ligne en dessous de la </de> tag de sorte qu'il ne sera pas une partie de la forme, comment puis-je insérer l' $d'entrée dans le milieu de l'écran?
    • Ajouter insère le nouvel élément dans la balise, dans ce cas, il va mettre la nouvelle entrée à l'intérieur de la balise de formulaire.
    • voir ma réponse mis à jour. J'ai ajouté le code qui permettrait d'insérer le contrôle dans une position particulière à l'intérieur de la forme. Aussi, vous pouvez utiliser prepend(), insertAfter(), et insertBefore() pour placer un contrôle à une position spécifique au sein d'un élément.
    InformationsquelleAutor pixelbobby
  5. 0

    Il semble y avoir un bug avec appendTo à l'aide d'un jeu de cadres ID ajoutant à un FORMULAIRE dans le navigateur Chrome.
    Échangé le type d'attribut directement avec des div et il fonctionne.

    InformationsquelleAutor Datadimension