Adding input to an array or object one-by-one using a form in Javascript

Question

I want to know what code to use to create a form where the user can input something and click submit (or a button) and the data will be stored in an array (or JSON object) , then they can do it again and the previous data will be "pushed" hence the user can keep adding to it. This would continue so on and so forth. I am also interested if "local storage" can be used to store this information on the users machine.

This question is a continuation of a question I had here: Add form input to array with javascript using unshift()

Below is some code. This code does what I want but only with one input item.

Thank you.

<form>
<input id="input" type="text"/>
<button id="button"> Click me </button>
</form>


<script>

var input = document.getElementById("input"); // save the object
var button = document.getElementById("button");

var myArray = [];




button.onclick = function alerted (){
    myArray.unshift(input.value); // get the value
    alert(myArray);
    return false;
};


</script>

There is only one input in your example... what exactly "does not work" with multiple inputs? Please explain your problem better. Also have a look at benalman.com/news/2010/03/theres-no-such-thing-as-a-json for an explanation why "JSON objects" don't exist. — Felix Kling
– Felix Kling, Commented Oct 18, 2012 at 5:51
When I submit the form the form field needs to blank and allow me to keep adding multiple items which are stored in the array. I think I might have just answered my own question in that all I need is for the form field to blank. I will go look into it. Thanks — William
– William, Commented Oct 18, 2012 at 5:52
Do you reload the page after form submit? If so, all previously stored values will be lost. You'd have to persist them between page loads with for example, as you mentioned, localStorage. — Felix Kling
– Felix Kling, Commented Oct 18, 2012 at 5:54
Use names for form controls, not ids, so you can get them as named properties of the form and let the form submit as a fallback option. Call the function using the form's submit handler, then cancel submit if it processess correctly. Only process successful controls. — RobG
– RobG, Commented Oct 18, 2012 at 6:01
Presumably you are looking to serialise a form similar to what the browser does to send data to a server. Search for form serialisation scripts and see how they do it, that will show you how to get values and state from form controls. How you store it and "push" new values is up to you. — RobG
– RobG, Commented Oct 18, 2012 at 6:07

Yogendra Singh · Accepted Answer · 2012-10-18 05:57:28Z

0

Create a customs object like this:

 function MyObject(value1,value2,value3,value4,value5){
     this.attribute1=value1;
     this.attribute2=value2;
     this.attribute3=value3;
     this.attribute4=value4;
     this.attribute5=value5;
  }

Then use this object to store the individual values. Finally you can add this object in your array as below(one of the few patterns):

button.onclick = function alerted (){
      // get several input values and set in the custom object
      Myobject object = new MyObject(input1.value, 
                               input2.value,
                               input3.value,
                               input4.value,
                               input5.value);
      myArray.unshift(object); 
      alert(myArray);
      return false;
 };

Hope this helps.

edited Oct 18, 2012 at 5:57

answered Oct 18, 2012 at 5:52

Yogendra Singh

34.5k7 gold badges66 silver badges73 bronze badges

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

Collectives™ on Stack Overflow

Adding input to an array or object one-by-one using a form in Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related