Geek Answers Handbook

How to save HTML form input as a JavaScript object

I myself study JS and work on an exercise that takes input from the user (first name, middle name, last name) and stores the input data in the JS object (later I will manipulate the object itself and sort it, check for duplicates, etc.)

I searched everywhere and can’t find any direction on this. I am familiar with saving HTML input as variables (var n = document.getElementById ('x'). Value), but I'm very new to objects.

How do I save user login to objects? And can I save the “multiples” views in an object, like in “load an object from user input” and then process it at a later stage?

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>

I think that the JS object should look like this, and every time the user clicks "Add to list", the program adds another name to the list "First / Middle / Last" .:

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

*** Please note that later I plan to read the frequency of each first / middle / last name and display it on the screen .. ie: 'FirstName'Jason: 2, 'FirstName'Ed:3; 'MiddleName'Marie:5; 'LastName'Smith:3' 'FirstName'Jason: 2, 'FirstName'Ed:3; 'MiddleName'Marie:5; 'LastName'Smith:3'

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

+5
source share
6 answers

You can 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.imtqy.com/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>
+3
source

Js objects are very easy to manipulate (which makes it prone to more errors many times). If you want to add a property, just add it to 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
+1
source

You can create an object from the inputs (how they look in this markup), for example:

 function buildList(){ var list = {}; $("body").find("input").each(function() { var field= $(this).attr('id'); var value= $(this).val(); list[field] = value; }); }

fiddle

0
source

If your goal is to match the frequency of each name, using three hashes may be the most efficient option. As an example, for 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); }

This way you get something like var firstNames = {tom: 3, dick: 10, harry: 2, ...} . Here's the fiddle: https://jsfiddle.net/n3yhu6as/2/

0
source

There is a difference between [] and {}

The push () method and the length property only apply to [] , because it is actually a JavaScript array

So in your case you have to 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 like it, you make the code in the button click event

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

how to search for a specific keyword from 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.imtqy.com/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>
0
source

More articles:


All Articles