put html input values into javascript object

Question

Why isn't this code giving me an object with the keys as the ids of the text inputs, and the values as the values of the text inputs?

JS

$(document).ready(function () {
    $('body').on('click', '#btn', function () {
        var address = {};
        $('input[type="text"].address').each(function (index, element) {
            address[element.id] = $(element).val();
        });
        console.log(address);
    });
});

HTML

  <input class="address" id="attn" value="john doe">
  <input class="address" id="address_1" value="1234 sample st">
  <input class="address" id="address_2" value="Suite 1">
  <input class="address" id="city" value="chicago">
  <input class="address" id="state" value="IL">
  <input class="address" id="zip" value="12345">
  <input class="address" id="country" value="US">
  <input type="button" id="btn" value="btn" />

jsbin

Joseph · Accepted Answer · 2013-02-13 15:27:08Z

2

It's because your inputs don't have type="text" thus $('input[type="text"].address') is not returning anything.

It's better to add them to signify that the inputs are of type text.

answered Feb 13, 2013 at 15:27

Joseph

120k31 gold badges186 silver badges238 bronze badges

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

2 Comments

1252748 Over a year ago

However, even with it added, I'm still just getting object Object in the console. jsbin.com/osufok/2/edit

Bergi Over a year ago

@thomas: expand it, and you will see its properties. Your example works for me.

Bergi · Accepted Answer · 2013-02-13 15:28:05Z

2

Your inputs do not have the [type=text] attribute, so your selector matches none of them. Simply remove it, or use the :text selector:

var address = {};
$(':text.address').each(function (index, element) {
    address[element.id] = element.value;
});
console.log(address);

(updated demo)

answered Feb 13, 2013 at 15:28

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

Explosion Pills · Accepted Answer · 2013-02-13 15:33:18Z

1

The jQuery attribute selector (as well as browser query selectors) work with the DOM elements rather than their properties. If you do not explicitly have the type attribute declaration on your the input elements, $("[type]") and document.querySelector("[type]") will not find the element even if its type property is text (http://jsfiddle.net/g76UC/).

The simplest solution is to add type=text to the input elements in your HTML. Another is to use a different selector that does not require this attribute definition. The final (and least desirable) would be to create a separate selector such as :prop that checks the element's type property instead. However this already exists in the form of jQuery's :text.

answered Feb 13, 2013 at 15:33

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

1 Comment

1252748 Over a year ago

Gotcha. Makes perfect sense. Thank you.

Anton · Accepted Answer · 2013-02-13 15:32:44Z

0

Use this

 $('input.address').each(function () {      
        address[this.id]= $(this).val();
 });

Demo http://jsbin.com/osufok/12/edit

answered Feb 13, 2013 at 15:32

Anton

32.6k5 gold badges47 silver badges54 bronze badges

2 Comments

1252748 Over a year ago

no idea why you got a downvote, but could you explain why using this would be better jquery's each(index, element){}? Thanks!

Anton Over a year ago

Well, its not better, but index and element is not needed in this situation

Aditya Singh · Accepted Answer · 2013-02-13 15:34:14Z

0

Try out this one http://jsfiddle.net/adiioo7/TPYtg/

$(document).ready(function () {
    $('#btn').on('click', function () {
        var address = {};
        $('.address').each(function (index, element) {
            address[element.id] = $(element).val();
        });
        console.log(address);
    });
});

answered Feb 13, 2013 at 15:34

Aditya Singh

9,6125 gold badges35 silver badges56 bronze badges

Collectives™ on Stack Overflow

put html input values into javascript object

5 Answers 5

2 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related