Getting value of multiple input fields with same class and adding into javascript object

Question

I am faced with a issue as follows:

<input title="1" type="text" class="email">
<input title="2" type="text" class="email">
<input title="3" type="text" class="email">

Above is my html where I am trying to grab the emails of each input box and store it in an object with the title as key.

Here is what my JavaScript currently looks like

var emailObj = {};
$("input[class=email]").each(function() {

    var id = $(this).attr("title");
    var email = $(this).val()

    emailObj[id] = email;
});

Currently console.log displays only the last value added to the object as shown below.

Object { 3="[email protected]"}

Where my expected result should be as show below

Object { 1="[email protected]", 2="[email protected]", 3="[email protected]"}

Could someone shed some light on this issue for me please?

Thank you for reading, Regards.

Don't know whether its gonna suite your situation or not, but why not use .serializeArray(); and put the titles as names. you just need to take care on the serverside part coz its gonna be an array of {name: "", value: ""} — Salman
– Salman, Commented Feb 21, 2013 at 15:57
@FelixKling He has written correct code, may be he is assuming the code is not working because at the time of code execution textbox values are empty — Exception
– Exception, Commented Feb 21, 2013 at 16:23

Exception · Accepted Answer · 2013-02-21 16:21:44Z

There is no problem with your Code. And I would suggest you to write it as utility method

function getValues(selector){
  var tempValues = {};
  $(selector).each(function(){
     var th= $(this);
     tempValues[th.attr('title')] = th.val();
   });
  return tempValues;
}

var values = getValues('.email');

or If you want values into an array

$('.email').map( function(){return $(this).val(); }).get();

.get() will convert it to a regular array.

The code you have written is absolutely correct. But when I have loaded it was returning me null, because at the time of execution, there were no values in textboxes.

James Donnelly · Accepted Answer · 2013-02-21 15:53:21Z

0

Your taskArray is actually an object, not an array.

Replacing var taskArray = {} with this should fix the problem:

var taskArray = new Array();

Edit: on second thoughts, what you have already is perfectly valid!

I'm editing my answer to echo what I've said in the comments: you'll need to debug using the console:

Within the .each(), put: console.log(id); - the expected result would be "1", "2", "3" - if it's just "3", it probably means that your other inputs aren't being picked up for whatever reason. If that is the result, print out the object after you've assigned the value: console.log(emailObj[id]);.

edited Feb 21, 2013 at 15:53

answered Feb 21, 2013 at 15:45

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

6 Comments

Anthony Grist Over a year ago

What problem? The code looks absolutely fine to me. Using an object, and calling it taskArray is odd, but it's not an error.

James Donnelly Over a year ago

Yeah I've just picked up on that myself! Doh!

BaconJuice Over a year ago

Edited the name, sorry about that =/

James Donnelly Over a year ago

Use the console to print out the value of the id for each element. Within the .each(), put: console.log(id); - the expected result would be "1", "2", "3" - if it's just "3", it probably means that your other inputs aren't being picked up for whatever reason. If that is the result, print out the object after you've assigned the value: console.log(emailObj[id]);

BaconJuice Over a year ago

@JamesDonnelly I do see the expected result in the console. However, if I were to print the entire object after the each() the result still remains as my original issue.

|

Collectives™ on Stack Overflow

Getting value of multiple input fields with same class and adding into javascript object

2 Answers 2

Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Linked

Related