Change PHP Variable on Select Change using Ajax and use in SQL query

Question

I've been trying to send the value of a select value to a PHP file using Ajax and then use in a SQL query but I can't seem to get it to work.

My select options

<select id="select">
  <option value="yes">Yes</option>
  <option value="no">No</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

My Ajax request to a PHP file which has the SQL query

$(document).ready(function () {
  $('#select').on('change', function () {
    var selectValue = $(this).val();
    $.ajax({
      type: "POST",
      url: "phpsqlajax_genxml3_state.php",
      data: {
        selected: selectValue
      },
      success: function (data) {
        console.log(data);
        // Stuff
      },
      error: function (data) {
        // Stuff
      }
    });
  });
});

Then in my PHP file, I have tried this

if(isset($_POST["selected"]))
{
 $selectedValue = $_POST['selected'];
 $query = "SELECT * FROM customers WHERE delivered='$selectedValue'";
}

And this

$selectedValue = $_POST['selected'];
$query = "SELECT * FROM customers WHERE delivered='$selectedValue'";

The alert pops up the correct value, but it's not updating the variable in the PHP file?

In ajax you call the data variable name "selected" but then in PHP you refer to "selectValue". Try to change that. — popcorn, Feb 05 '20 at 10:40
This line var selectValue = $('#select option:selected').val(); must be in the function, to get the value when you change the select. — digitalway, Feb 05 '20 at 10:41
var selectValue = $('#select option:selected').val(); , This code will always give you the first dropdown value even if you change you are passing the same first selected value as this is outside documentready function. Please change selected: selectValue to ' selected: this.value' . Secondly in Php the variable name which you have used is wrong, pls use '$selectedValue = $_POST['selected'];' — HulkSapien, Feb 05 '20 at 10:44
Assuming your PHP is being ran from `phpsqlajax_genxml3_state.php` and that file is actually being ran, I can't see why this wouldn't be working. — Mark, Feb 05 '20 at 12:05
When I do $selectedValue = $_POST['selected']; $query = "SELECT * FROM customers WHERE delivered = '$selectedValue'"; The query works, but not when I do $selectedValue = $_POST['selected']; $query = "SELECT * FROM customers WHERE delivered = '$selectedValue'"; — Naffa, Feb 05 '20 at 12:29
Both of those bits of code are exactly the same - both must be working or neither do, did you paste the wrong code? — Mark, Feb 05 '20 at 12:56
Ah sorry, what I meant to say was when I do $selectedValue = 'yes'; $query = "SELECT * FROM customers WHERE delivered = '$selectedValue'"; The query works, but not when I do $selectedValue = $_POST['selected']; $query = "SELECT * FROM customers WHERE delivered = '$selectedValue'"; — Naffa, Feb 05 '20 at 13:21
There will be an issue in the Javascript when you're sending the AJAX request, I can't see what that is however, are you using Google Chrome? — Mark, Feb 05 '20 at 14:44
I'm getting this Uncaught TypeError: Cannot read property 'documentElement' of null at scripts.js:75 at XMLHttpRequest.request.onreadystatechange (scripts.js:140) in dev tools — Naffa, Feb 05 '20 at 16:24

Mark · Accepted Answer · 2020-02-05T10:56:22.093

1

First thing:

Instead of writing:

var selectValue = $('#select option:selected').val();

you can just use:

var selectValue = $('#select').val();

Second thing:

You have set the value of the select outside of your function, so when your listener for 'change' runs, the value of selectValue has already been set, you never overwrite it.

You'll want to move where you set the value of the variable to the following:

$(document).ready(function() {
  $('select').on('change', function() {
    var selectValue = $(this).val();

Third thing:

As mentioned in the comments, you are looking for the key selectValue in the below code:

$selectedValue = $_POST['selectValue'];

When you should be looking for:

$selectedValue = $_POST['selected'];

because that's what you sent through via AJAX, here:

data: {
   selected: selectValue
}

Fourth thing:

You've not sanitized the users input at all, leaving you open to SQL injection.

$query = "SELECT * FROM customers WHERE delivered='$selectedValue'";

To protect against SQL injection you'll want to consider updating to PDO:

How to prevent SQL injection

edited Feb 05 '20 at 10:56

answered Feb 05 '20 at 10:45

Mark

1,852
3
18
31

1

I haven't downvoted, but I can see why someone has. All answers (except @MarmikPatels) don't solve all the issues in the code. – Rory McCrossan Feb 05 '20 at 10:51
I have made the changes to all the above, but my varible in my PHP file still isn't updating? – Naffa Feb 05 '20 at 11:01
Can you elaborate, if you `var_dump($selectedValue);` is it showing the correct value? – Mark Feb 05 '20 at 11:02
@MarkOverton I get NULL if i do var_dump($selectedValue); – Naffa Feb 05 '20 at 11:14
It might be easier if you can update your question with your new code so I can try and workout why it's still not working. – Mark Feb 05 '20 at 11:20
@MarkOverton I've updated my code in the initial post – Naffa Feb 05 '20 at 11:56
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/207286/discussion-between-mark-overton-and-naffa). – Mark Feb 05 '20 at 14:46

Marmik Patel · Answer 2 · 2020-02-05T11:00:51.710

-1

Please try below code for get value of parameter

$(document).ready(function () {
 $('#select').on('change', function () {    
    alert($(this).val());
    $.ajax({
      type: "POST",
      url: "phpsqlajax_genxml3_state.php",
      data: {
        selected: $(this).val()
      },
      success: function (data) {
        console.log(data);
        // Stuff
      },
      error: function (data) {
        console.log(data);
        // Stuff
      }
  });
 });
});

in you php code use

$selectedValue = $_POST['selected'];

edited Feb 05 '20 at 11:00

answered Feb 05 '20 at 10:44

Marmik Patel

192
2
12

When I do this I get the alert of the value but then another alert saying '[object XMLDocument]' – Naffa Feb 05 '20 at 11:00
Please use alert($(this).val()); for second alert please use console.log(data) – Marmik Patel Feb 05 '20 at 11:01
What was the issue? Why should OP try this code? Please read on [answer]. – MrUpsidown Feb 06 '20 at 18:24

score -1 · Answer 3 · answered Feb 05 '20 at 11:00

$(document).ready(function () {
  $('#select').on('change', function () {
    alert(this.value);
var selectValue = $(this).val();
    $.ajax({
      type: "POST",
      url: "phpsqlajax_genxml3_state.php",
      data: {
        selected: selectValue
      },
      success: function (data) {
        alert(data);
        // Stuff
      },
      error: function (data) {
        // Stuff
      }
    });
  });
});

<select id="select">
  <option value="yes">Yes</option>
  <option value="no">No</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<?PHP
// phpsqlajax_genxml3_state.php Page 

if(isset($_POST["selected"]))
{
$selectedValue = $_POST['selected'];
$query = "SELECT * FROM customers WHERE delivered='$selectedValue'";
}

?>

What does this do? Why/how does it answer the question? Please read on [answer]. — MrUpsidown, Feb 06 '20 at 18:23

Change PHP Variable on Select Change using Ajax and use in SQL query

3 Answers3