Per impostazione predefinita ho 5 caselle di testo. Quando un utente fa clic su un pulsante, è necessario aggiungere una casella di testo.Come si aggiungono le caselle di testo dinamicamente in Javascript?
Come posso fare questo?
Il migliore sarebbe collegare un evento allo onclick del pulsante, che imposterà la visibilità di un div a inline. Questo è il modo migliore che posso vedere per questo, considerando la flessibilità e la robustezza.
Avere un codice look here per esempio.
<script>
function add()
{
document.getElementById("place").innerHTML="<input type='text' value=''>"
}
</script>
<input type="button" value="clickMe" onClick="add();">
<div id="place"></div>
provare questo
<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>
Chi ha votato per questo, non è a conoscenza dell'impatto dell'utilizzo di innerHTML. –
-1. Masticare con 'innerHTML' quando un semplice' appendChild() 'funzionerebbe è inutilmente lento, e cosa sta succedendo con la variabile' i'? Non viene neanche usato perché la variabile non è espansa nella stringa 'innerHTML', quindi il tuo HTML diventa' name = 'mytext'' seguito da elementi inutili che il browser non riesce a capire. –
Scrivere in innerHTML una volta è abbastanza giusto; + = su innerHTML è sempre un errore. – bobince
Se si sostituisce l'innerHTML, i valori immessi in precedenza viene cancellato, per evitare che, è possibile aggiungere gli elementi di input di programmazione:
var input = document.createElement('input');
input.type = "text";
//...
container.appendChild(input);
Controllare this esempio.
Risposta corretta - perché innerHTML sostituirà il contenuto dell'elemento HTML specificato con il valore innerHTML appena definito. –
<script>
function add()
{
var inpt = document.getElementById('input_template');
inpt.parentNode.appendChild(inpt.cloneNode(false));
}
</script>
<input type="button" onclick="add();">
set id = input_template ad una delle caselle di testo predefiniti
Avrei creato una funzione separata anziché inline e avrei usato i CSS per mantenere gli stessi stili, ma questo sembra un modo intelligente per farlo, e sembra che funzionerebbe. –
FYI: una migliore formattazione potrebbe aiutare tutti. –
funzione JavaScript
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);
}
parte Html,
<button id="button" value="Add" onClick:"javascript:add();">
E, il suo fare!
Qui puoi impostare gli attributi per la casella di testo. come proprietà CSS, valori, id, ecc –
<!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>
Chi ha votato per questo, non è a conoscenza dell'impatto dell'utilizzo di innerHTML. –