How to store HTML form input as JavaScript Object

Question

I am self learning JS and working on an exercise which takes input from the user(First Name, Middle Name, Last Name), and saves the input in a JS Object (Later I will manipulate the object itself and sort it, check duplicates, etc.)

I have looked everywhere and cannot find any direction on this one. I am familiar with saving HTML input as variables (var n=document.getElementById('x').value) but I am very new to objects.

How would I save user input in objects? And can I save multiples 'submissions' in the Object as in 'load the object up from user input', and then manipulate it on a later step?

HTML:

<body>
  <label>First Name:
    <input type='text' name='firstName' id='firstName' placeholder="First Name">
  </label>
  <br>
  <br>
  <label>Middle Name:
    <input type='text' name='middleName' id='middleName' placeholder="Middle Name">
  </label>
  <br>
  <br>
  <label>Last Name:
    <input type='text' name='lastName' id='lastName' placeholder="Last Name">
  </label>
  <br>
  <br>
  <button type="button" onclick="buildList()">Add to List</button>
</body>

What I imagine the JS Object to look like, and each time the user presses 'Add to List' the program adds another First/Middle/Last name to the list.:

var list = {
    firstName:"John",
    middleName:"Will",
    lastName:"Doe"
},
{
    firstName:"Ben",
    middleName:"Thomas",
    lastName:"Smith"
},
{
    firstName:"Brooke",
    middleName:"James",
    lastName:"Kanter"
};

***Note, later on I plan to count the frequency of each First/Middle/Last Name and output it on the screen.. i.e.: 'FirstName'Jason: 2, 'FirstName'Ed:3; 'MiddleName'Marie:5; 'LastName'Smith:3'

My goal: Create a list of full names. Break them out into three lists: first, middle, and last names. Count the frequency of the names in each list. ---I figured using an object would be the best way to do this.

@jward01 something like this? jsbin.com/vaxulusoma/edit?html,js,console,output — bassxzero
– bassxzero, Commented Jul 10, 2015 at 4:35
@bassxzero good code, but you don't need to save objects in hidden input, you can use global variable. — shyammakwana.me
– shyammakwana.me, Commented Jul 10, 2015 at 5:04
@shyammakwana.me I'm aware of this, but considering that OP was having trouble understanding where/how to store data client side, I wanted to make this as clear/simple as possible. Thank you though — bassxzero
– bassxzero, Commented Jul 10, 2015 at 5:08
@bassxzero Yes!! Just like that!! Thank you very much for writing that and showing me how it works. Now I just need to examine it and understand how and why it works so that I can master it as you have!! Im sure its very simple once one gets the jist of it. Thank you Very much! — jward01
– jward01, Commented Jul 10, 2015 at 16:22
@shyammakwana.me -- What do you mean by 'hidden input?' thanks!! — jward01
– jward01, Commented Jul 10, 2015 at 16:24

Arun P Johny · Accepted Answer · 2015-07-10 04:51:06Z

You could use a click handler like

var list = [],
  $ins = $('#firstName, #middleName, #lastName'),
  counter = {
    firstName: {},
    middleName: {},
    lastName: {}
  };
$('#add').click(function() {
  var obj = {},
    valid = true;
  $ins.each(function() {
    var val = this.value.trim();
    if (val) {
      obj[this.id] = val;
    } else {
      var name = this.previousSibling.nodeValue.trim();
      alert(name.substring(0, name.length - 1) + ' cannot be blank');
      this.focus();
      valid = false;
      return false;
    }
  });
  if (valid) {
    list.push(obj);
    $ins.val('');

    $.each(obj, function(key, value) {
      var count = counter[key][value] || 0;
      counter[key][value] = count + 1;
    });

  }
});

$('#print').click(function() {
  $('pre').text(JSON.stringify(list) + '\n\n');
  $('pre').append(document.createTextNode(JSON.stringify(counter)));
})

pre {
  white-space: pre-wrap;
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<!-- To show result in the dom instead of console, only to be used in the snippet not in production -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>First Name:
  <input type='text' name='firstName' id='firstName' placeholder="First Name">
</label>
<br>
<br>
<label>Middle Name:
  <input type='text' name='middleName' id='middleName' placeholder="Middle Name">
</label>
<br>
<br>
<label>Last Name:
  <input type='text' name='lastName' id='lastName' placeholder="Last Name">
</label>
<br>
<br>
<button type="button" id="add">Add to List</button>
<button type="button" id="print">Print</button>

<pre></pre>

Can anyone provide me the same logic by without JQuery. In Simple JS Object.

Mark E · Accepted Answer · 2015-07-10 04:24:42Z

2

Js objects are very easy to manipulate (which many times makes it prone to more errors). If you want to add a property just put some value on it.

var info = {};//create an empty object
info.firstName = document.getElementById('firstName').value;
info.lastName = document.getElementById('lastName').value;
allInfo.push(info);//you had to initialize the array before

answered Jul 10, 2015 at 4:24

Mark E

3,5232 gold badges26 silver badges37 bronze badges

Comments

Ryan Neuffer · Accepted Answer · 2015-07-10 04:32:15Z

0

If your goal is to map the frequency of each name, using three hashes might be the most efficient option. As an example for just one of the inputs:

var firstNames = {};

function setFirstName(firstName){

    if(firstNames[firstName] === undefined){
        firstNames[firstName] = 1;
        return;
    }
    firstNames[firstName]++;
}

function buildList(){

    setFirstName(document.getElementById('firstName').value);

}

That way you'll end up with something like var firstNames = {tom: 3, dick: 10, harry: 2, ...}. Here's a fiddle: https://jsfiddle.net/n3yhu6as/2/

answered Jul 10, 2015 at 4:32

Ryan Neuffer

7924 silver badges8 bronze badges

Comments

Adib Aroui · Accepted Answer · 2015-07-10 04:37:44Z

0

You could create an object from the inputs (as they look in given markup), like:

function buildList(){
        var list = {};
        $("body").find("input").each(function() {

            var field= $(this).attr('id');
            var value= $(this).val();
            list[field] = value;
        });
}

fiddle.

edited Jul 10, 2015 at 4:37

answered Jul 10, 2015 at 4:24

Adib Aroui

5,0656 gold badges45 silver badges95 bronze badges

1 Comment

Ryan Neuffer Over a year ago

In his application, this would overwrite the the firstName property value each time the button was pressed-as opposed to adding it to a list and maintaining a count.

Dickens A S · Accepted Answer · 2015-07-10 05:04:33Z

0

There is a difference between [] and {}

The push() method and length property is only applicable to [] becuase it actually the JavaScript array

Therefore in your case you should put your JSON Object inside a JSON Array

var list = [{
    firstName:"John",
    middleName:"Will",
    lastName:"Doe"
},
{
    firstName:"Ben",
    middleName:"Thomas",
    lastName:"Smith"
},
{
    firstName:"Brooke",
    middleName:"James",
    lastName:"Kanter"
}];

If you do like this then you do code in your button click event as

list.push({
    firstName: document.getElementById("firstName").value,
    middleName: document.getElementById("middleName").value,
    lastName: document.getElementById("lastName").value
});

answered Jul 10, 2015 at 5:04

Dickens A S

4,0743 gold badges27 silver badges53 bronze badges

Comments

gaan10 · Accepted Answer · 2016-07-09 09:11:05Z

how to search for a particular keyword from the user provided name fields.

var list = [],
  $ins = $('#firstName, #middleName, #lastName'),
  counter = {
    firstName: {},
    middleName: {},
    lastName: {}
  };
$('#add').click(function() {
  var obj = {},
    valid = true;
  $ins.each(function() {
    var val = this.value.trim();
    if (val) {
      obj[this.id] = val;
    } else {
      var name = this.previousSibling.nodeValue.trim();
      alert(name.substring(0, name.length - 1) + ' cannot be blank');
      this.focus();
      valid = false;
      return false;
    }
  });
  if (valid) {
    list.push(obj);
    $ins.val('');

    $.each(obj, function(key, value) {
      var count = counter[key][value] || 0;
      counter[key][value] = count + 1;
    });

  }
});

$('#print').click(function() {
  $('pre').text(JSON.stringify(list) + '\n\n');
  $('pre').append(document.createTextNode(JSON.stringify(counter)));
})

pre {
  white-space: pre-wrap;
}

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<!-- To show result in the dom instead of console, only to be used in the snippet not in production -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>First Name:
  <input type='text' name='firstName' id='firstName' placeholder="First Name">
</label>
<br>
<br>
<label>Middle Name:
  <input type='text' name='middleName' id='middleName' placeholder="Middle Name">
</label>
<br>
<br>
<label>Last Name:
  <input type='text' name='lastName' id='lastName' placeholder="Last Name">
</label>
<br>
<br>
<button type="button" id="add">Add to List</button>
<button type="button" id="print">Print</button>

<pre></pre>

Collectives™ on Stack Overflow

How to store HTML form input as JavaScript Object

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related