I'm stuck: I'm trying to submit a form using AJAX, but I can't find a way to send multiple data fields via my AJAX call.

$(document).ready(function() { $("#btnSubmit").click(function() { var status = $("#activitymessage").val(); var name = "Ronny"; $.ajax({ type: "POST", url: "ajax/activity_save.php", **data: "status="+status+"name="+name"**, success: function(msg) {...

I've tried all sorts of stuff:

data: {status: status, name: name},

Or even stuff like this just for testing purposes:

data: "status=testing&name=ronny",

But whatever I try, I get nothing in my activity_save.php thus nothing in my SQL.

So, what's the correct syntax to put more lines of data in my AJAX call?

5

12 Answers

The correct syntax is:

data: {status: status, name: name},

As specified here:

So if that doesn't work, I would alert those variables to make sure they have values.

5

You can send data through JSON or via normal POST, here is an example for JSON.

 var value1 = 1; var value2 = 2; var value3 = 3; $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "yoururlhere", data: { data1: value1, data2: value2, data3: value3 }, success: function (result) { // do something here } });

If you want to use it via normal post try this

 $.ajax({ type: "POST", url: $('form').attr("action"), data: $('#form0').serialize(), success: function (result) { // do something here } });
1

Try with quotes:

data: {"status": status, "name": name}

It must work fine.

1
var countries = new Array(); countries[0] = 'ga'; countries[1] = 'cd';

after that you can do like:

var new_countries = countries.join(',')

after:

$.ajax({ type: "POST", url: "", data: new_countries, ...

This thing work as JSON string format.

1

According to 

$.ajax({ method: "POST", url: "some.php", data: { name: "John", location: "Boston" } }) .done(function( msg ) { alert( "Data Saved: " + msg ); });

This one works for me.

Here's my PHP:

<div> <?php while($row = mysqli_fetch_assoc($stmt)) { ?> <br/> <input name="vendorName_<?php echo $row["id"]; ?>" value='<?php echo $row["vendorName"]; ?>'> <input name="owner_<?php echo $row["id"]; ?>" value='<?php echo $row["owner"]; ?>'> <input name="city_<?php echo $row["id"]; ?>" value='<?php echo $row["city"]; ?>'> <buttonid"]; ?>">Update</button> <buttonid"]; ?>">Delete</button> <?php } ?> </br></br> <input id = "vendorName_new" value=""> <input id = "owner_new" value=""> <input id = "city_new" value=""> <button id = "addNewVendor" type="submit">+ New Vendor</button> </div>

Here's my jQuery using AJAX:

$("#addNewVendor").click(function() { alert(); $.ajax({ type: "POST", url: "create.php", data: {vendorName: $("#vendorName_new").val(), owner: $("#owner_new").val(), city: $("#city_new").val()}, success: function(){ $(this).hide(); $('div.success').fadeIn(); showUsers() } }); });

I am a beginner at ajax but I think to use this "data: {status: status, name: name}" method datatype must be set to JSON i.e

$.ajax({ type: "POST", dataType: "json", url: "ajax/activity_save.php", data: {status: status, name: name},
1

Use this 

data: '{"username":"' + username + '"}',

I try a lot of syntax to work with laravel it work for me for laravel 4.2 + ajax.

0

Try this:

$(document).ready(function() { $("#btnSubmit").click(function() { var status = $("#activitymessage").val(); var name = "Ronny"; $.ajax({ type: "POST", url: "ajax/activity_save.php", data: {'status': status, 'name': name}, success: function(msg) {...

I am new to AJAX and I have tried this and it works well.

function q1mrks(country,m) { // alert("hellow"); if (country.length==0) { //alert("hellow"); document.getElementById("q1mrks").innerHTML=""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("q1mrks").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","../location/cal_marks.php?q1mrks="+country+"&marks="+m,true); //mygetrequest.open("GET", "basicform.php?name="+namevalue+"&age="+agevalue, true) xmlhttp.send(); }

Try to use :

$.ajax({ type: "GET", url: "something.php", data: { "b": data1, "c": data2 }, dataType: "html", beforeSend: function() {}, error: function() { alert("Error"); }, success: function(data) { $("#result").empty(); $("#result").append(data); } });
1

Here's what works for me after 2 days of head-scratching; why I couldn't get the AJaX 'data' setting to send two key/values (including a variable containing raw image data) was a mystery, but that seems to be what the jQuery.param() function was written for;

create a params array with your variables, without quotes:

var params = { key_name1: var_1, key_name2: var_2 }; // etc. var ser_data = jQuery.param( params ); // arbitrary variable name

Use variable ser_data as your data value;

 $.ajax({ type: 'POST', url: '../php_handler_url.php', data: ser_data, }).success(function(response) { alert(response); });

Documentation is here:

Hope that helps!