Pass value to from ajax call to PHP

Question

$.ajax({
 url: 'test.php',
 type: "POST",
 data: registerForm.serialize(), region: $("#regio option:selected").text(),
 success: function(data) {
 console.log(data)
 }
});

Now i use this i get all data with registerForm.serialize() i can call them in test.php with $_POST['the_name'];

Now i need to pass to test.php $("#regio option:selected").text() whenever i do echo $_POST['region'] in test.php it doesnt see the region attribute where im sending inside the ajax to test.php.

How do i pass $("#regio option:selected").text() to test.php and call it in test.php.

Answer 1

You could just add another query string into that:

data: registerForm.serialize() + '&region=' + $("#regio option:selected").text(),

Then, just treat it like a normal post value in PHP

$region = $_POST['region'];

Answer 2

Let's re-indent the code:

$.ajax({
   url: 'test.php',
   type: "POST",
   data: registerForm.serialize(), 
   region: $("#regio option:selected").text(),
   success: function(data) {
      console.log(data)
   }
});

The above code defines a region property on the object that has been passed to $.ajax(). The region property doesn't belong to the data property, in fact your data property is not even an object. As the other answer suggests you can add another query parameter by using string concatenation, or use the serializeArray method and push an object into the returned array:

// returns an array of objects with `name` and `value` properties 
var postData = registerForm.serializeArray();
postData.push({
   name: 'region',
   value: $("#regio option:selected").text()
});

$.ajax({
   url: 'test.php',
   type: "POST",
   data: postData, 
   success: function(responseData) {
      console.log(responseData);
   }
});