So, I have three textboxes. The first asks for a first name, the second for a last name, and the third for age.
When I click the button, a fourth textbox should be generated and it should contain everything that was entered in each textbox so far. My problem is I can't even get the fourth textbox to appear. I feel like I'm missing something that's pretty simple. Here is my code so far.
<html>
<head>
</head>
<body>
<script>
function addTextBox() {
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
}
</script>
<form>
<input type="text" value="Firstname">
<input type="text" value="Lastname">
<input type="text" value="Age">
<input type="button" onclick="addTextBox()">
</form>
</body>
</html>
So, I have three textboxes. The first asks for a first name, the second for a last name, and the third for age.
When I click the button, a fourth textbox should be generated and it should contain everything that was entered in each textbox so far. My problem is I can't even get the fourth textbox to appear. I feel like I'm missing something that's pretty simple. Here is my code so far.
<html>
<head>
</head>
<body>
<script>
function addTextBox() {
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
}
</script>
<form>
<input type="text" value="Firstname">
<input type="text" value="Lastname">
<input type="text" value="Age">
<input type="button" onclick="addTextBox()">
</form>
</body>
</html>
3 Answers
Reset to default 2You need to append the element in body using appendChild whereas you have created element only missed to add it in document
function addTextBox() {
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
document.body.appendChild(element);
}
<html>
<head>
</head>
<body>
<script>
function addTextBox(btn) {
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
btn.parentNode.insertBefore(element, btn)
}
</script>
<form>
<input type="text" value="Firstname">
<input type="text" value="Lastname">
<input type="text" value="Age">
<input type="button" id="btn" onclick="addTextBox(btn)">
</form>
</body>
</html>
an alternative would be to create the form and use css to hide it, then use your javascript function to display it and pump the data into it.
html
<form name="myForm">
<input type="text" value="Firstname" />
<input type="text" value="Lastname" />
<input type="text" value="Age" />
<input type="text" value="" name="Test Name" id="box4" style="display:none">
<input type="button" onclick="addTextBox()" />
</form>
javascript
function addTextBox() {
var box4 = document.getElementById("box4");
box4.style.display = "inline";
var myForm = document.forms['myForm'];
for (var i = 0; i < myForm.elements.length; i++) {
box4.value += myForm.elements[i].value + ",";
}
}
JS fiddle