Try this out!
I wrapped your code within a div [and removed the 'response' span]
<div id="container">
<input name="+" type="button" id="+" onclick="addInput()" value="+" label="+" />
<input name="-" type="button" id="-" onclick="subtractInput()" value="-" label="-" />
</div>
Then changed up your javascript as shown here:
var countBox = 1;
function addInput() {
var breakNode = document.createElement("br");
breakNode.className = countBox.toString();
var input = document.createElement("input");
input.type = "text";
input.className = countBox.toString();
input.value = "#" + countBox.toString();
var container = document.getElementById('container');
container.appendChild(breakNode);
container.appendChild(input);
countBox += 1;
}
function subtractInput() {
countBox -= 1;
// There will be 2 elements: 1 input, 1 br.
var elements = document.getElementsByClassName(countBox.toString());
var input = elements[1];
var br = elements[0];
input.parentNode.removeChild(input);
br.parentNode.removeChild(br);
}
Let me know if you have problems with it!
EDIT: I made a cleaner version you can now check out by the way :)
References:
EDIT 2: Here's the solution to your new question:
First, I added a 1
to the name ECPartNumber
of the first input, and changed its id
to 1:
<input name="ECPartNumber1" type="text" id="1" value="#" size="10" maxlength="10">
The reason I changed the id to 1 is because the following inputs have their id
s counting up from 1, so I thought this would look nicer.
Next, I declared var countBox = 1;
at the top of the javascript file so that the FrontPage_Form1_Validator
function would be able to use it.
In the addInput
function, I added a line to create the new names for each input:
input.name = "ECPartNumber" + countBox.toString();
In the subtractInput
function, I added an if statement to make sure you couldn't delete the original ECPartNumber input:
if (countBox >= 2) {
...
}
And finally, in the FrontPage_Form1_Validator
function I made a for loop that runs off the names of each ECPartNumber to check if they are "#" or more:
for (var i = 1; i <= countBox; i++) {
var partNum = "ECPartNumber" + i.toString();
if (theForm[partNum].value == "#") {
alert("Please enter a value for the \"EC Part Number\" field. (slot "+i+")");
theForm[partNum].focus();
return (false);
}
}