Adding multiple data with jQuery ajax

Question

I can process my form values by targeting the form class <form class="my_form_class">:

jQuery.ajax({
        type:"GET",
        url: "/wp-admin/admin-ajax.php",
        data: my_form_class,
        context: this,
        success:function(data){

            // do stuff
        }
});

This works great.

But I want to add more data, so I tried:

data: { my_form_class, security : 'foo' },

It did not work. What am I doing wrong here? I tried:

data: { my_form_class : my_form_class, security : 'foo' },

And it obviously didn't work either.

nicael · Accepted Answer · 2016-07-23 13:41:26Z

6

Data of the form can be serialized, and data can be sent as a string :) I didn't test this, but it should work :)

jQuery.ajax({
        type:"GET",
        url: "/wp-admin/admin-ajax.php",
        data: $('.my_form_class').serialize() + "&security=foo",
        context: this,
        success:function(data){

            // do stuff
        }
});

edited Jul 23, 2016 at 13:41

nicael

19.1k13 gold badges65 silver badges93 bronze badges

answered Jul 23, 2016 at 13:29

Marko Mackic

2,3431 gold badge12 silver badges19 bronze badges

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

3 Comments

nicael Over a year ago

I guess that should be appended to the url, not data.

Marko Mackic Over a year ago

Well yeah, because it's a get request it can be appended to url, but data should work too :) api.jquery.com/jquery.ajax look at data section, converted to query string if not already a string :)

Marko Mackic Over a year ago

@nicael I don't know how I forgot quotes :)

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

According to the definition of jQuery ajax

data

Type: PlainObject or String or Array Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

You may use jquery param and jQuery serialize:

$('.my_form_class').serialize()  + '&' + $.param({security : 'foo'});

My snippet:

$(function () {
  $('#btn').on('click', function(e) {
    console.log($('.my_form_class').serialize()  + '&' + $.param({security : 'foo'}));
    $.ajax({
      type:"GET",
      url: "/wp-admin/admin-ajax.php",
      data: $('.my_form_class').serialize()  + '&' + $.param({security : 'foo'}),
      context: this,
      success:function(data){
        // do stuff
      }
    }).fail(function(jqXHR, textStatus, errorThrown) {
      console.log('ajax error: ' + textStatus)
    });
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<form class="my_form_class">
    First name:<br>
    <input type="text" name="firstname" value="name"><br>
    Last name:<br>
    <input type="text" name="lastname" value="surname">
</form>
<button id="btn">Submit Form with Ajax</button>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 23, 2016 at 13:33

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

3 Comments

nicael Over a year ago

@Henrik Why would you accept the more lengthy solution, when there's a simpler one, which also has been posted eariler?

Henrik Petterson Over a year ago

@nicael I was not aware that answer was posted earlier than this one, and at the time when accepting this one as correct, the other one had a typo with the quotes (which I believe that you addressed).

nicael Over a year ago

@Henrik Yep, there was a typo. Not something making the answer semantically incorrect.

Shubham Khatri · Accepted Answer · 2016-07-23 16:17:18Z

Use FormData and loop over your data object and append it as

var fd = new FormData();
fd.append('key', value);

$(function(){
  $('#btn').on('click',function(){
    var value = 'abc';
    var fd = new FormData();
    var my_form_data = {
      fname: $('#firstname').val(),
      lname: $('#lastname').val()
    };
    for (var key in my_form_data) {
      if (my_form_data.hasOwnProperty(key)) {
        fd.append(key, my_form_data[key]);
      }
    }
    fd.append('value', value);
    console.log(fd);
    jQuery.ajax({
            type:"GET",
            url: "/wp-admin/admin-ajax.php",
            data: fd,
            context: this,
            success:function(data){

                // do stuff
            }
    });
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form_data">
  First name:<br>
  <input type="text" id="firstname"><br>
  Last name:<br>
  <input type="text" id="lastname">
</form>
<button id="btn">Submit</button>

Another method includes using .serialize(). It can be used when you want data in query string as

var data = $('.my_form_data').serialize();
data += '&security=foo';

AJAX

jQuery.ajax({
        type:"GET",
        url: "/wp-admin/admin-ajax.php",
        data: data,
        context: this,
        success:function(data){

            // do stuff
        }
});

Collectives™ on Stack Overflow

Adding multiple data with jQuery ajax

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related