¿Cuál es la forma más sencilla de crear dinámicamente un campo de formulario de entrada oculto utilizando jquery?Jquery - Crear elemento de formulario oculto sobre la marcha
Respuesta
$('<input>').attr('type','hidden').appendTo('form');
para responder a su segunda pregunta:
$('<input>').attr({
type: 'hidden',
id: 'foo',
name: 'bar'
}).appendTo('form');
$('#myformelement').append('<input type="hidden" name="myfieldname" value="myvalue" />');
¿Alguien probar esta respuesta en edad IE? –
Personalmente, creo que este es un enfoque mucho mejor que la respuesta aceptada ya que implica menos llamadas de manipulación/función DOM. – PaulSkinner
@PaulSkinner Para el caso dado, sí, estás en lo correcto, pero no siempre es así. Eche un vistazo aquí http://stackoverflow.com/a/2690367/1067465 –
si desea añadir más atributos como acaba de hacer:
$('<input>').attr('type','hidden').attr('name','foo[]').attr('value','bar').appendTo('form');
O
$('<input>').attr({
type: 'hidden',
id: 'foo',
name: 'foo[]',
value: 'bar'
}).appendTo('form');
esto está dando error de consola 'Identificador inesperado'. –
Trabajo JSFIDDLE
Si su forma es como
<form action="" method="get" id="hidden-element-test">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
<br><br>
<button id="add-input">Add hidden input</button>
<button id="add-textarea">Add hidden textarea</button>
Puede agregar entrada oculta y área de texto para formar como esto
$(document).ready(function(){
$("#add-input").on('click', function(){
$('#hidden-element-test').prepend('<input type="hidden" name="ipaddress" value="192.168.1.201" />');
alert('Hideen Input Added.');
});
$("#add-textarea").on('click', function(){
$('#hidden-element-test').prepend('<textarea name="instructions" style="display:none;">this is a test textarea</textarea>');
alert('Hideen Textarea Added.');
});
});
Comprobar trabajar jsfiddle aquí
function addHidden(theForm, key, value) {
// Create a hidden input element, and append it to the form:
var input = document.createElement('input');
input.type = 'hidden';
input.name = key;'name-as-seen-at-the-server';
input.value = value;
theForm.appendChild(input);
}
// Form reference:
var theForm = document.forms['detParameterForm'];
// Add data:
addHidden(theForm, 'key-one', 'value');
¿Qué es '' name-as-seen-at-the-server''? – SaAtomic
Al igual que David, pero sin attr()
$('<input>', {
type: 'hidden',
id: 'foo',
name: 'foo',
value: 'bar'
}).appendTo('form');
¿Hay algún nombre para esta forma de rellenar una etiqueta? – DLF85
- 1. Cargando jQuery sobre la marcha
- 2. ¿Es posible crear elementos sobre la marcha con jQuery Mobile?
- 3. ¿Puedo crear colas resque sobre la marcha?
- 4. Perl: ¿cómo crear objetos sobre la marcha?
- 5. Desplácese sobre un elemento oculto para mostrarlo
- 6. métodos Creación sobre la marcha
- 7. jQuery: ¿Cómo detectar ancho de ventana sobre la marcha?
- 8. Crear un modelo de YAML/JSON sobre la marcha
- 9. Crear una clase de Ruby sobre la marcha sin eval
- 10. ¿Hay un evento 'listo' disparado cuando se crea un elemento jQuery sobre la marcha?
- 11. Crear procesos MPI sobre la marcha con un tenedor?
- 12. crear nuevos directorios principales en SOLR sobre la marcha
- 13. ¿Cómo crear objetos sobre la marcha en python?
- 14. Crear objetos sobre la marcha sin asignación variable con PHP
- 15. ¿Cómo crear una imagen sobre la marcha con Node.js?
- 16. Crear un espacio HTML en blanco sobre la marcha Javascript
- 17. Creación de claves JSON sobre la marcha
- 18. jQuery width() devuelve 0 para un elemento span creado sobre la marcha?
- 19. Creando una tabla HTML sobre la marcha usando jQuery
- 20. formas dinámicas de Django - ¿población de campo sobre la marcha?
- 21. ¿Validar EmberJS TextField sobre la marcha?
- 22. crear un archivo .ics sobre la marcha usando javascript o jquery?
- 23. Jquery obteniendo la altura de un elemento oculto
- 24. Generando un archivo RDP sobre la marcha
- 25. "Editar" texto del usuario sobre la marcha?
- 26. jQuery elemento oculto automático después de 5 segundos
- 27. uploadify | cambiar uploadifysettings sobre la marcha
- 28. Java ArrayList y HashMap sobre la marcha
- 29. ¿Cómo nombrar variables sobre la marcha?
- 30. Archivos ZIP de PHP sobre la marcha
¿Es posible agregar atributos de identificación y nombre sobre la marcha ??????? –
gracias David –
Tenga en cuenta que IE se ahogará si intenta cambiar el tipo de entrada después de que se ha creado. Use '$ (''). Foo (...)' como solución alternativa. –