¿Cómo agrego cuadros de texto dinámicamente en Javascript?

0

Lo mejor sería adjuntar un evento al onclick del botón, que establecerá la visibilidad de un div en inline. Esta es la mejor manera que puedo ver para esto, teniendo en cuenta la flexibilidad y la solidez.

tener un código look here por ejemplo.

Fuente

2009-09-07 17:35:58

1

<script> 
function add() 
{ 
    document.getElementById("place").innerHTML="<input type='text' value=''>" 
} 
</script> 
<input type="button" value="clickMe" onClick="add();"> 
<div id="place"></div>

Fuente

2009-09-07 17:36:16

+1

Quien haya votado a favor de esto, no es consciente del impacto del uso de innerHTML. –

-1

probar esto

<html> 
<head> 
<title>Dynamic Form</title> 
<script language="javascript" type="text/javascript" > 
function changeIt() 
{ 

createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >" 

} 
</script> 
</head> 
<body> 

<form name="form"> 
<input type="button" value="clickHere" onClick="changeIt()"> 
<div id="createTextbox"></div> 
</form> 
</body> 
</html>

Fuente

2009-09-07 17:38:33 anishMarokey

+1

Quien haya votado a favor de esto, no es consciente del impacto del uso de innerHTML. –

+0

-1. Curioseaba con 'innerHTML' cuando un simple' appendChild() 'funcionaría es innecesariamente lenta, y lo que está pasando con su variable' I '? Ni siquiera se acostumbre porque la variable no se expande en la cadena 'innerHTML', por lo que el código HTML se convierte en' name = 'mytext'' seguido de basura que el navegador no puede entender. –

+0

Escribir en innerHTML una vez es suficiente; + = en innerHTML siempre es un error. – bobince

20

Si reemplaza el innerHTML, se borrarán los valores introducidos previamente, para evitar eso, se puede añadir los elementos de entrada mediante programación:

var input = document.createElement('input'); 
input.type = "text"; 
//...  
container.appendChild(input);

Comprobar this ejemplo.

Fuente

2009-09-07 17:41:30 CMS

+1

respuesta correcta - porque innerHtml reemplazará el contenido del elemento HTML especificado con el valor innerHTML que acaba de definir. –

1

<script> 
function add() 
{ 
    var inpt = document.getElementById('input_template'); 
    inpt.parentNode.appendChild(inpt.cloneNode(false)); 
} 
</script> 

<input type="button" onclick="add();">

conjunto de id = input_template a uno de los cuadros de texto predefinidos

Fuente

2009-09-07 17:43:02 w35l3y

+1

yo hubiera hecho una función independiente en lugar de en línea, y habría utilizado CSS para mantener los estilos de la misma, pero esto parece como una forma inteligente de hacerlo, y lo hace parecer que iba a funcionar. –

+0

FYI: Un mejor formateo ayudaría a todos. –

9

Javascript Función

function add() { 

//Create an input type dynamically. 
var element = document.createElement("input"); 

//Create Labels 
var label = document.createElement("Label"); 
label.innerHTML = "New Label";  

//Assign different attributes to the element. 
element.setAttribute("type", "text"); 
element.setAttribute("value", ""); 
element.setAttribute("name", "Test Name"); 
element.setAttribute("style", "width:200px"); 

label.setAttribute("style", "font-weight:normal"); 

// 'foobar' is the div id, where new fields are to be added 
var foo = document.getElementById("fooBar"); 

//Append the element in page (in span). 
foo.appendChild(label); 
foo.appendChild(element); 
}

Html parte,

<button id="button" value="Add" onClick:"javascript:add();">

Y, su hecho!

Fuente

2012-11-27 08:00:34

+0

Aquí puede establecer atributos para el cuadro de texto. tales como propiedades CSS, valores, id, etc. –

0

<!DOCTYPE html> 
<html> 
<body> 
<h1>My First Web Page</h1> 
<p>My first paragraph.</p> 
<button type="button" onclick="myFunction()">Click me!</button> 
<script> 
var count =0; 
function myFunction() { 
count++ 
    document.write('Lable1'); 
    document.write('<input type="text" name="one+count">'); 
    document.write('Lable2'); 
    document.write('<input type="text" name="two+count">'); 

    document.write('Lable3'); 
    document.write('<input type="text" name="three+count">'); 

    document.write('Lable4'); 
    document.write('<input type="text" name="four+count">'); 

    document.write(count); 

    } 
    </script> 

    </body> 
    </html>

Fuente

2015-06-18 17:19:51 vatsal

¿Cómo agrego cuadros de texto dinámicamente en Javascript?

Respuesta

Cuestiones relacionadas