current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 6 down vote favorite
2

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.

share|improve this question
up vote 3 down vote accepted

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>

share|improve this answer
    
Works great, thank you for the snippet. – Henrik Petterson yesterday
1  
@Henrik Why would you accept the more lengthy solution, when there's a simpler one, which also has been posted eariler? – nicael yesterday
    
@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). – Henrik Petterson yesterday
    
@Henrik Yep, there was a typo. Not something making the answer semantically incorrect. – nicael yesterday
up vote 6 down vote

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
        }
});
share|improve this answer
    
I guess that should be appended to the url, not data. – nicael yesterday
1  
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 yesterday
    
Yep, then it seems to be the right approach. – nicael yesterday
    
@nicael I don't know how I forgot quotes :) – Marko Mackic yesterday
up vote 1 down vote

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
        }
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.