79

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>
2
  • 1
    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. 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?! Sep 18, 2016 at 4:20

6 Answers 6

155

Use the serialize method:

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

Docs: serialize()

4
  • 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
    – Dss
    Jan 14, 2014 at 2:49
  • 3
    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
    Jan 14, 2014 at 3:08
  • 11
    There's also another method: use serializeArray. data = $("form").serializeArray(); data.push({ name: "myvar", value: 123 }); $.param(data);
    – Robin
    Jan 14, 2014 at 3:13
  • yes this was the ticket I figured out last night as well.. I had to manually add the + '&' + between each. Thanks!
    – Dss
    Jan 14, 2014 at 15:20
17
$("#registerSubmit").serialize() // returns all the data in your form
$.ajax({
     type: "POST",
     url: 'your url',
     data: $("#registerSubmit").serialize(),
     success: function() {
          //success message mybe...
     }
});
6

you can use val function to collect data from inputs:

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

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

1
  • 5
    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.
    – Robin
    Sep 15, 2011 at 15:08
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.

1
var username = $('#username').val();
var email= $('#email').val();
var password= $('#password').val();
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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