Add more text fields dynamically in new line (html)
Question
I used code from http://viralpatel.net/blogs/dynamic-add-textbox-input-button-radio-element-html-javascript/ html-javascript/ .my code is this:
<HTML>
<HEAD>
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
function add() {
for (i=1; i<=5; i++)
{
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", i);
element.setAttribute("name", i);
element.setAttribute("value", i);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H2>Dynamically add element in form.</H2>
Select the element and hit Add to add it in form.
<BR/>
<INPUT type="button" value="Add" onclick="add()"/>
<span id="fooBar"> </span>
</FORM>
</BODY>
</HTML>
That code works. But instead of adding it horizontally, I want every new text field added in a new line. I've tried to use </script><br/><script> , <html><br/></html> , document.write("\\n") , and document.write("\\r\\n") in the loop function but it doesnt work like what I want. What should I do?
4 answers
solution1
4 ACCPTED 2012-09-01 04:13:45
Why not just do this?
var br = document.createElement("br");
foo.appendChild(br);
solution2
1 2012-09-01 04:13:34
You can change the display style of the inputs.
function add() {
for (i=1; i<=5; i++)
{
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", i);
element.setAttribute("name", i);
element.setAttribute("value", i);
element.style.display = "block";
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
}
Good Luck! I recommend you start using jQuery for your javascript tasks.
solution3
0 2012-09-01 04:14:19
You can try, adding a new br element after input element.
for (i=1; i<=5; i++)
{
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", i);
element.setAttribute("name", i);
element.setAttribute("value", i);
var brElement = document.createElement("br");
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
foo.appendChild(brElement );
}
solution4
0 2012-09-01 04:16:09
您只需将其添加到您的CSS
input{display:block;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.