HTML form formatting issue
Question
I am dynamically creating HTML forms with a simple method makeInput(), and am wondering how to make the text input boxes appear one per line, rather than in a right to left fashion. As of now when you click the "Add Course" button, it adds a new text input right next to the old one rather than on a new line. Here is the code I have so far:
<html>
<head>COURSES</head>
<title>Add Courses</title>
<script type="text/javascript">
var x = 0;
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"tron.php");
f.id = "form1";
var s = document.createElement("input"); //input element, Submit button
s.setAttribute('type',"submit");
s.setAttribute('value',"Submit Courses");
f.appendChild(s);
function makeInput()
{
var i = document.createElement("input");
i.type = "text";
i.name = "cname"+ x;
i.id = "cname"+ x;
f.appendChild(i);
document.getElementById("test").appendChild(f);
x = x+1;
document.getElementById("course").innerHTML= "Number of courses: " + x;
}
</script>
<body>
<p id="course">Number of courses: </p>
<button onclick="makeInput()">Add Course</button>
<p id="test"></p>
</body>
</html>
2 answers
solution1
0 2013-04-24 02:51:25
I generally dynamically create div's and/or spans around html forms, so that you can apply css to them as well. If you put your input boxes inside divs, they should go one line at a time unless you specifically add css to do otherwise.
solution2
0 ACCPTED 2013-04-24 02:55:20
Just implementing the comment as an answer.
Change
document.getElementById("test").appendChild(f);
to the following
document.getElementById("test").appendChild(f).innerHTML += '<br />';
Here is the fiddle: http://jsfiddle.net/UR4y7/
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.