Ajax post multiple variables via loop?

Question

I am trying to post multiple variables from the already dynamically create-able "username" id's such as "username1", "username2", etc. I'm looking for a way to dynamically send these into ONE ajax post request. My problem is mainly with the data parameter.

  var numOfInputs = $('input').length;

  $.ajax({
     type: "POST",
     url: "ajax.php",
     // need way to dynamically pass more of these via numOfInputs.
     data: ({username1 : $('#username1').val()}),
     success: function(msg){
       $('#statuses').html(msg);
     }
   });

requested html:

<input type="text" id="username1"></input><button id="add">+</button><button id="check">Check</button>

<div id="added-fields">
</div>

<div id="statuses">
</div>

matt b · Accepted Answer · 2011-07-30 01:59:13Z

2

var data = {};
for (var i = 1; i <= numOfInputs; i++) {
   data["username" + i] = $("#username" + i).val();
}
$.ajax(
   ...
   data: data,
   ....
)

answered Jul 30, 2011 at 1:59

matt b

140k66 gold badges287 silver badges352 bronze badges

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

Comments

Mrchief · Accepted Answer · 2011-07-30 02:22:20Z

1

Well you can say:

  $.ajax({
     type: "POST",
     url: "ajax.php",
     data: $('input').map(function() {
                          var o = {};
                          o[this.id] = this.value;
                          return o;
            });
   ...

edited Jul 30, 2011 at 2:22

answered Jul 30, 2011 at 1:56

Mrchief

76.4k20 gold badges145 silver badges193 bronze badges

4 Comments

ThomasReggi Over a year ago

Throws an error in console: Uncaught SyntaxError: Unexpected token .

fsong Over a year ago

Correct me if I'm wrong, but in the map function wouldn't the key word "this" refer to the global object? Shouldn't the map function be written as function(v, i){ return { v.id: v.value; } }

Mrchief Over a year ago

@fsong: this would refer to current element being iterated over. You cannot have v.id : v.value as the key cannot be dynamic. so this is legal "id": v.value" but then, that is not waht the OP wanted.

fsong Over a year ago

Hmm.. according to the api, this in the map function is the global object. I will go and test this. You're absolutely right about the not being able to have dynamic key part though.

Collectives™ on Stack Overflow

Ajax post multiple variables via loop?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related