Jquery/ Ajax: Send additional php variable to server sided script

I have this select box. The selected option is sent with ajax to a server side script.

<select id="main_select">
    <option selected="selected" value="50">50</option>
       <option value="100">100</option>
       <option value="150">150</option>
</select>

jquery script

$(document).ready(function() {
$('#main_select').change(function() {
$.ajax({
  url: "itemscript.php",
  type: "post",
  data: {
    option: $(this).val()
  },
  success: function(data) {
    $("#details").html(data);
  }
 });
 }).change();
});

And in the server sided script (itemscript.php) I get the variable from the select box like that:

if(isset($_POST["option"]))
{
    $itemlevel = $_POST["option"];
}

Now I want to extend this script to send an additional php variable called $element to the server sided script (itemscript.php). The $element variable is a part of the the current url address.

How can I send the additional $element variable within this jquery/ ajax script?

Answer

Just add the other data items into the data{} part, separated by commas.

Assuming that your $element data is inside an inputbox, then

HTML

<input id="element">
<br>
<select id="main_select">
    <option selected="selected" value="50">50</option>
       <option value="100">100</option>
       <option value="150">150</option>
</select>

$(document).ready(function() {

$('#main_select').change(function() {
$.ajax({
  url: "itemscript.php",
 method: "POST",
  data: {
    option: $(this).val(),
    element: document.getElementById("element").value
  },
  .success: function(data) {
    $("#details").html(data);
  }
 });
 }).change();
});

In the above, $_POST[“element”] will be passed to your php scripts

Advertisement

Answer