Hot to map html input properties to object with jQuery?

Question

I want to read all page inputs ids and values into object and pass it to function which loop throuhg them and extract id and value.

I started with:

function send()
{
var data = [];
var inputs = $(":text");
for (var i = 0, l = inputs.length; i < l; i++) {
   var input;
   input.id = inputs[i].attr("id");
   input.text = inputs[i].val();
   data[i] = input;
}
receive(data);
}

function receive(data)
{
    for (var input in data) {
        alert(input.id);
        alert(input.text);        
    }
}

Why this does not work?

user1106925 · Accepted Answer · 2012-01-21 15:37:59Z

3

If you give your input elements a name attribute, you could just do this...

var data = $(":text").serializeArray();

...which results in this data structure (taken from the docs)...

[
  {
    name: "a",
    value: "1"
  },
  {
    name: "b",
    value: "2"
  },
  {
    name: "c",
    value: "3"
  },
  {
    name: "d",
    value: "4"
  },
  {
    name: "e",
    value: "5"
  }
]

answered Jan 21, 2012 at 15:37

user1106925

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

Comments

T. Stone · Accepted Answer · 2012-01-21 15:49:20Z

1

For adding items to an array, you likely want to use .push() instead of accessing it via the numeric index. Also, jQuery provides a .each to iterate over a set.

var data = [];
$(':input:not(:button)').each(function() {
   data.push({
      id: this.id,
      text: $(this).val()
   });
});

One more thing. jQuery does include a .map function, which returns an array "mapped" over a given set which could shorten the above code down to...

var data = $(':input:not(:button)').map(function() {
    return { id: this.id, text: $(this).val() };
});

edited Jan 21, 2012 at 15:49

answered Jan 21, 2012 at 15:36

T. Stone

19.5k15 gold badges72 silver badges100 bronze badges

1 Comment

jlp Over a year ago

you forgot closing bracket in first example

Yaron U. · Accepted Answer · 2012-01-21 15:39:34Z

0

Use jquery's serializeArray function

HTML:

<form id="test">
    <input type="hidden" name="a1" value="test" />
    <input type="text" name="a2" value="test2" />
    <input type="text" name="a3" value="test2" />
    <input type="text" name="a4" value="test2" />
</form>

JS:

function getData(){
    var data = $("#test").serializeArray();
    for(var i in data){
       alert(data[i].name+":"+data[i].value);   
    }
}

jsFiddle example: http://jsfiddle.net/k2Dd4/

answered Jan 21, 2012 at 15:39

Yaron U.

7,9333 gold badges33 silver badges45 bronze badges

Comments

Shane · Accepted Answer · 2012-01-21 15:40:12Z

0

I am not sure of the exact implementation in jQuery, but in Javascript I would do it as

var inputs = document.getElementsByTagName("input");
var textelems;

for (var i=0;i<inputs.length;i++) {
    if (inputs[i].type == "text") {
        tempElem = [];
        tempElem['id'] = inputs[i].id;
        tempElem['value'] = inputs[i].value;
        textelems.push(tempElem);
    }
}

This would give you a 2D-array (tempElems) where each index is a textbox with its own indexes of id and value.

answered Jan 21, 2012 at 15:40

Shane

2,06719 silver badges33 bronze badges

Comments

jlp · Accepted Answer · 2012-01-21 15:40:39Z

0

Correct code would look like:

function send()
{
var data = [];
var inputs = $(":text");
for (var i = 0, l = inputs.length; i < l; i++) {
    var input = {};
    input.id = $("#" + inputs[i].id).attr("id");
    input.text = $("#" + inputs[i].id).val();            
    data[i] = input;
}
receive(data);
}

function receive(data)
{
    for (var i = 0, l = data.length; i < l; i++) {
       alert(data[i].id);
       alert(data[i].text);
    }
}

answered Jan 21, 2012 at 15:40

jlp

10.4k16 gold badges57 silver badges76 bronze badges

Collectives™ on Stack Overflow

Hot to map html input properties to object with jQuery?

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related