HTML Form input into Javascript array

Question

My goal is to enter a single name into a html Text form. Each time I press submit

it will store that value into a javascript array. Currently, I am able to get the first value I submit into the array but not the subsequent values. Hope I am being clear enough, Any help would be great.

Here is my JavaScript

function getListOfNames() {
 "use strict";

  //Declare variables
  var form;
  var getNameValue;
  var myArray = [];
  var output;

  //Assign values	
  output = document.getElementById("myTable");
  form = document.getElementById("myForm");
  getNameValue = form.getNameValue.value;

  //Each time form is submited put the new value into array

  myArray.push(getNameValue);

  //output the results 

  output.innerHTML = myArray;
}

function project5Part2() {
  "use strict";

  // Your code goes in here.

   getListOfNames();

  return false;

}



Here is my HTML

<form  id="myForm" action="#"  onsubmit=" return project5Part2();" > 
  <label for="firstName">Enter Name</label> 
  <input type="text" id="enteredName" name="getNameValue"/>
  <input type="submit" value="Enter Name" />
  <input type="reset"  value="Clear form - DO NOT SEND" />
</form>

Aside from the errors in your code, when you submit your form the page is going to post so your array will be re-initialized as an empty array — Sean T
– Sean T, Commented Dec 17, 2018 at 17:06
What is the html for your output? With that we can make your code runnable.... — epascarello
– epascarello, Commented Dec 17, 2018 at 17:07
Possible duplicate of Storing Html Form Information in to an JS Array — Isaac
– Isaac, Commented Dec 17, 2018 at 17:18

daddygames · Accepted Answer · 2018-12-17 17:16:14Z

1

Remove the onsubmit from the form. change the input type="submit" into a regular button and use the onclick to execute JavaScript.

<form id="myForm" action="#" > 
      <label for="firstName">Enter Name</label> 
      <input type="text" id="enteredName" name="getNameValue"/>
      <button type="button" onclick="project5Part2();">Enter Name</button>
      <input type="reset"  value="Clear form - DO NOT SEND" />
    </form>

Create or use a global array (cannot be enclosed in the method if you want to persist)

When the button is clicked, checked the value of the textbox and if not empty, add the value to the array.

var myArray = new Array();
    function project5Part2() {
        var name = document.getElementById('enteredName').value;
        if (!(typeof name === 'undefined') && name!=null && name.trim()!='') {  
            myArray.push(name);
        }
        console.log(myArray);
        document.getElementById('enteredName').value = '';
    }

Will log the contents of the array each time the button is clicked. For example: ["albert", "manny", "susan"]

The textbox value is being cleared each time the name is added.

answered Dec 17, 2018 at 17:16

daddygames

1,9381 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RookieTechie Over a year ago

Thanks a ton, I appreciate it . You have been very helpful.

Collectives™ on Stack Overflow

HTML Form input into Javascript array

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related