adding a field without resetting all fields

Question

Hello I need to have fields be added and taken away with plus and minus buttons. Whenever I add a field it works fine. When I enter something into a field then add another field, the previous field resets. Also, whenever I click the minus button it removes all of the fields. I want it to take one away at a time without resetting the other fields and also I keep getting a Not a Number (NaN) error whenever I click the minus button. Any help is greatly appreciated. I'll show my code below.

<input name="+" type="button" id="+" onclick="addInput()" value="+" label="+" />
<input name="-" type="button" id="-" onclick="subtractInput()" value="-" label="-" />

<span id="response"></span>
<script>
    var countBox = 1;
    var boxName = 0;

    function addInput() {
        var boxName = "#";
        document.getElementById('response').innerHTML += '<br/><input type="text" id="' + boxName + '" value="' + boxName + '" "  /><br/>';
        countBox += 1;
    }

    function subtractInput() {
        var boxName = "#";
        document.getElementById('response').innerHTML -= '<br/><input type="text" id="' + boxName + '" value="' + boxName + '" "  /><br/>';
        countBox -= 1;
    }
</script>

Answer 1

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);
}

Try it with this Fiddle

Let me know if you have problems with it!

EDIT: I made a cleaner version you can now check out by the way :)

References:

1. Create Input Element Dynamically
2. Remove Child Node in HTML

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 ids 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);
    }
}

Updated Fiddle

Answer 2

I don't think you can remove an element with normal JS. So, here is some jQuery.

var countBox = 1;
var boxName = 0;

function addInput() {
    var boxName = "#";
    document.getElementById('response').innerHTML += '<br/><input type="text" id="' +     countBox + '" value="' + boxName + '" "  /><br/>';
    countBox += 1;
}

function subtractInput() {
    var boxName = "#";
    $(function(){
    $('#' + countBox).remove();
    });
    countBox -= 1;
}

I tested this myself, and it does work. Problem is, it keeps adding to the position where the last one was removed, not back where it should be starting. Here's the jQuery link for you:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Answer 3

Based on a similar question asked previously, it looks like this can't be done using javascript, but it can be done with jQuery's function append().

Answer 4

First of all, new browsers don't let you copy the changes in html made by users, that is why the "previous field resets"

Now a way to it, using just javascript is:

<script>
    var countBox = 0;
    var boxName = "SomeId";

    var addInput = function(){
        alert(boxName+countBox);
        var br = document.createElement("br");
        var input = document.createElement("input");
        input.id=boxName+countBox;
        input.value=boxName;
        document.getElementById("response").appendChild(input);
        document.getElementById("response").appendChild(br);
        countBox++;
    }

    var subtractInput = function(){
        countBox--;
        alert(boxName+countBox);
        document.getElementById("response").removeChild(document.getElementById(boxName+(countBox)));
        document.getElementById("response").removeChild(document.getElementById('response').getElementsByTagName('br')[countBox]);
    }
</script>

You can find a working example here