2011-05-23 22 views
31

Dado que no puedo usar div dentro de formularios, me pregunto cómo puedo agregar un nuevo campo en el medio del formulario (y no puedo usar .append() aquí) sin volver a cargar la página o reescribir el formulario ? (Usando jQuery)Añadiendo dinámicamente campo de formulario HTML usando jQuery

EDIT: este es el 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> 
+2

Su pregunta no tiene demasiado sentido. ¿Qué has probado ya? –

+0

Traté de olvidar el hijo anterior al formulario y uso anexarlo pero no funcionó – ilyo

+1

¿Qué te hace pensar que no puedes usar elementos 'div' dentro de los elementos' form'? – zzzzBov

Respuesta

61

Lo que parece estar confundiendo este hilo es la diferencia entre:

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

que añade el elemento de destino como hijo de la .Selector.

Y

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

que añade el elemento de destino como hijo de la .Selector.

Observe cómo cambia la posición del elemento de destino & .selector cuando se utilizan los diferentes métodos.

Lo que se quiere hacer es la siguiente:

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

}); 
8

Puede añadir cualquier tipo de HTML con métodos como append y appendTo (entre otros):

jQuery manipulation methods

Ejemplo:

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

algo así como lo que podría funcionar:

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

@Rob, @pixelbobby, tahnx pero la cosa es si tiene una forma completa, no puedo usar append porque insertará la línea debajo de la etiqueta para que no sea parte del formulario, ¿cómo puedo insertar la entrada $ en el medio de la forma? – ilyo

+0

@IlyaD - Añadir inserta el nuevo elemento en la etiqueta, en este caso colocará la nueva entrada dentro de las etiquetas de formulario. –

+1

@llyaD, ver mi respuesta actualizada. He agregado un código que insertaría el control en una posición específica dentro del formulario. Además, puede usar 'prepend()', 'insertAfter()' e 'insertBefore()' para colocar un control en una posición específica dentro de un elemento. – pixelbobby

13

Esto insertará un nuevo elemento después del campo de entrada con id "contraseña".

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

No estoy seguro de si esto responde su pregunta.

0

Parece que hay un error con appendTo mediante un identificador de conjunto de marcos añadiendo a una forma en Chrome. Se ha cambiado el tipo de atributo directamente con div y funciona.

Cuestiones relacionadas