获取具有相同类的多个输入字段的值并添加到javascript对象中

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="a@a.com"}

Where my expected result should be as show below

Object { 1="a@a.com", 2="b@b.com", 3="c@c.com"}

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

Thank you for reading, Regards.

Answer 1

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.

Answer 2

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]); .