Using javascript to add form fields, but what will

Question

After reading this post: using javascript to add form fields.. but below, not to the side? I've made the button work! But I don't know how to receive the output. This is what I entered.

        var counter = 0;
        function addNew() {
            // Get the main Div in which all the other divs will be added
            var mainContainer = document.getElementById('mainContainer');
            // Create a new div for holding text and button input elements
            var newDiv = document.createElement('div');
            // Create a new text input
            var newText = document.createElement('input');
            newText.type = "input"; 
            newText.maxlength = "50"; 
            newText.maxlimit = "50"; 
            newText.size = "60"; 
            newText.value = counter;
            // Create a new button input
            var newDelButton = document.createElement('input');
            newDelButton.type = "button";
            newDelButton.value = "Delete";

            // Append new text input to the newDiv
            newDiv.appendChild(newText);
            // Append new button input to the newDiv
            newDiv.appendChild(newDelButton);
            // Append newDiv input to the mainContainer div
            mainContainer.appendChild(newDiv);
            counter++;

            // Add a handler to button for deleting the newDiv from the mainContainer
            newDelButton.onclick = function() {
                    mainContainer.removeChild(newDiv);
            }
        }
    </script>

With this in the form:

<input type="button"  size="3" cols="30" value="Add" onClick="addNew()">

So, what will the new field names be? I don't understand enough of the coding to figure out what I'm telling it to. Good thing there are other smart folks out there for me to lean on!

Thanks for any answers.

Answer 1

You have to add the "name" attribute for this elements. You could do something like

newText.name = "newInput-" + counter; //this is what the other answer said.

That way, you will receive newInput-0, newInput-1, etc on the server after submitting

Answer 2

You could do this:

        var counter = 0;
        function addNew() {
        // Get the main Div in which all the other divs will be added
        var mainContainer = document.getElementById('mainContainer');
        // Create a new div for holding text and button input elements
        var newDiv = document.createElement('div');
        // Create a new text input
        var newText = document.createElement('input');
        newText.type = "input";
        newText.id = "AddedInput_" + counter;
        ...

Answer 3

newText.name = "newInputName-" + counter; // for name
newText.id = "newInputId-" + counter;   // for id

For button

newDelButton.name = "btnDeleteName"; // for name, or "btnDeleteName-"+counter for multiple
newDelButton.id = "btnDeleteId";     // for id    or "btnDeleteId-"+counter for multiple

Name and Id could be same for any item, i.e.

newText.name = "newInput-" + counter; // for name
newText.id = "newInput-" + counter;   // for id