jQuery - Getting form values for ajax POST

JqueryAjax

Jquery Problem Overview


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>

Jquery Solutions


Solution 1 - Jquery

Use the serialize method:

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

Docs: serialize()

Solution 2 - Jquery

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

Solution 3 - Jquery

you can use val function to collect data from inputs:

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

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

Solution 4 - Jquery

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.

Solution 5 - Jquery

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

Solution 6 - Jquery

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser547794View Question on Stackoverflow
Solution 1 - JqueryRobinView Answer on Stackoverflow
Solution 2 - JqueryRitchieView Answer on Stackoverflow
Solution 3 - JqueryHeadshotaView Answer on Stackoverflow
Solution 4 - JqueryBaz1ngaView Answer on Stackoverflow
Solution 5 - JqueryKanishka PanamaldeniyaView Answer on Stackoverflow
Solution 6 - JqueryChandresh MView Answer on Stackoverflow