jQuery - Getting form values for ajax POST

Question

I am trying to post form values via AJAX to a php file. How do I collect my form values to send inside of the "data" parameter?

$.ajax({
        type: "POST",
        data: "submit=1&username="+username+"&email="+email+"&password="+password+"&passconf="+passconf,
        url: "http://rt.ja.com/includes/register.php",
        success: function(data)
        {   
            //alert(data);
            $('#userError').html(data);
            $("#userError").html(userChar);
            $("#userError").html(userTaken);
        }
    });

HTML:

<div id="border">
  <form  action="/" id="registerSubmit">
    <div id="userError"></div>
      Username: <input type="text" name="username" id="username" size="10"/><br>
      <div id="emailError" ></div>
      Email: <input type="text" name="email" size="10" id="email"/><br>
      <div id="passError" ></div>
      Password: <input type="password" name="password" size="10" id="password"/><br>
      <div id="passConfError" ></div>
      Confirm Password: <input type="password" name="passconf" size="10" id="passconf"/><br>
      <input type="submit" name="submit" value="Register" />
  </form>
</div>

You should send it in json format {"key":value, "key":value}. What i would suggest is create a javascript object with your parameters as its properties and use JSON.stringify(object) to convert the object into json format. — Sang Suantak
– Sang Suantak, Commented Sep 15, 2011 at 5:08
@SangSuantak, why would you bother with JSON conversions when you would not need them with the normal set of name/value pairs?! — Alexis Wilke
– Alexis Wilke, Commented Sep 18, 2016 at 4:20

guettli · Accepted Answer · 2016-08-09 13:41:49Z

157

Use the serialize method:

$.ajax({
    ...
    data: $("#registerSubmit").serialize(),
    ...
})

Docs: serialize()

edited Aug 9, 2016 at 13:41

guettli

27.7k109 gold badges423 silver badges779 bronze badges

answered Sep 15, 2011 at 5:11

Robin

22k10 gold badges66 silver badges87 bronze badges

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

4 Comments

Dss Over a year ago

How do you get the form data and an extra manually set variable? like data: $("#registerSubmit").serialize() + '&myvar=123' ? that doesn't seem to work the way I have it

Robin Over a year ago

I don't see what that wouldn't be working. If the data you want to append is more complex, you can use $.param. $("form").serialize() + "&" + $.param({ myvar: 123 }).

Robin Over a year ago

There's also another method: use serializeArray. data = $("form").serializeArray(); data.push({ name: "myvar", value: 123 }); $.param(data);

Dss Over a year ago

yes this was the ticket I figured out last night as well.. I had to manually add the + '&' + between each. Thanks!

AbdelHady · Accepted Answer · 2013-12-05 12:35:40Z

17

$("#registerSubmit").serialize() // returns all the data in your form
$.ajax({
     type: "POST",
     url: 'your url',
     data: $("#registerSubmit").serialize(),
     success: function() {
          //success message mybe...
     }
});

edited Dec 5, 2013 at 12:35

AbdelHady

9,8228 gold badges59 silver badges88 bronze badges

answered Aug 28, 2013 at 14:03

Ritchie

4083 silver badges12 bronze badges

Comments

Headshota · Accepted Answer · 2011-09-15 05:06:03Z

6

you can use val function to collect data from inputs:

jQuery("#myInput1").val();

http://api.jquery.com/val/

answered Sep 15, 2011 at 5:06

Headshota

21.4k13 gold badges63 silver badges82 bronze badges

1 Comment

Robin Over a year ago

Yeah, but you shouldn't have to do it manually for every field. That's what serialize is for. What if you add a field? You dont want to have to change your js.

Baz1nga · Accepted Answer · 2011-09-15 05:13:12Z

6

var data={
 userName: $('#userName').val(),
 email: $('#email').val(),
 //add other properties similarly
}

and

$.ajax({
        type: "POST",
        url: "http://rt.ja.com/includes/register.php?submit=1",
        data: data

        success: function(html)
        {   
            //alert(html);
            $('#userError').html(html);
            $("#userError").html(userChar);
            $("#userError").html(userTaken);
        }
    });

You dont have to bother about anything else. jquery will handle the serialization etc. also you can append the submit query string parameter submit=1 into the data json object.

answered Sep 15, 2011 at 5:13

Baz1nga

15.6k3 gold badges38 silver badges63 bronze badges

Comments

Kanishka Panamaldeniya · Accepted Answer · 2011-09-15 05:12:19Z

1

var username = $('#username').val();
var email= $('#email').val();
var password= $('#password').val();

answered Sep 15, 2011 at 5:12

Kanishka Panamaldeniya

17.6k31 gold badges128 silver badges195 bronze badges

Comments

Chandresh M · Accepted Answer · 2011-09-15 05:14:40Z

1

try as this code.

$.ajax({
        type: "POST",
        url: "http://rt.ja.com/includes/register.php?submit=1",
        data: "username="+username+"&email="+email+"&password="+password+"&passconf="+passconf,

        success: function(html)
        {   
            //alert(html);
            $('#userError').html(html);
            $("#userError").html(userChar);
            $("#userError").html(userTaken);
        }
    });

i think this will work definitely..

you can also use .serialize() function for sending data via jquery Ajax..

i.e: data : $("#registerSubmit").serialize()

Thanks.

edited Sep 15, 2011 at 5:14

answered Sep 15, 2011 at 5:09

Chandresh M

3,4932 gold badges27 silver badges48 bronze badges

Collectives™ on Stack Overflow

jQuery - Getting form values for ajax POST

6 Answers 6

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related