PHP can't receive data sent using jquery . lead to undifined variable on php file

Question

I'm trying to send data from a HTML select to a PHP file using jQuery. Unfortunately it does not work. I have looked at all the solutions proposed here and it's still not working. Here is the code:

<select id="city" name="city" >
    <optgroup label="Popular Cities">
        <option selected style="display:none;color:#eee;">Entire country</option>
        <option value="city1">city 1</option>
        <option value="city2">city 2</option>
        <option value="city3">city3</option>
        <option value="city4">city4</option>
        <option value="city5">city5</option>
</select>

$("#city").change(function() {
    $.ajax({
        url: 'post.php',
        type: 'POST',
        data: { city: $(this).val() },
        success: function(data) {
            alert(data);
            window.location.replace("post.php");
            window.location.reload("post.php");
        }
    });
});

$city = isset($_POST['city']) ? $_POST['city'] : false;
echo "".$city."";

The alert() works but I still have no data received in post.php . I have tried with the code below as well but still can't have it.

$.post("post.php", { city: $(this).value }, function(data) {
    alert(data);
    window.location.reload("post.php");
    window.location.replace("post.php");
});

Any help?

Answer 1

You need to use form for this as said in comments

<form action="post.php" method="get" id="frmForm">
 <select id="city" name="city" >
<optgroup label="Popular Cities">
    <option selected style="display:none;color:#eee;">Entire   country</option>
    <option value="city1">city 1</option>
    <option value="city2">city 2</option>
    <option value="city3">city3</option>
    <option value="city4">city4</option>
    <option value="city5">city5</option>
 </select>
</form>

Then use jquery to submit form on city selection

$(document).ready(function() {

$("#city").change(function() {
$('#frmForm').submit();    

});

Then you can find city name with $_GET['city'];

Answer 2

It's not how you're meant to use Ajax. What your PHP file should be doing would be to handle the data sent in the Ajax request, and return a content which will be handled by the Ajax success callback.

What you're trying to do here is to:

1. Post data to post.php , which is working fine,
2. Then, go on post.php , which doesn't have the data previously sent, since you're making a completly new HTTP request.

What you should be doing would be to submit the form when your select changes, which would redirect you to post.php using HTML, not JavaScript.

Answer 3

Maybe this suits what you want:

HTML file:

<form action="post.php" method="POST">
<select id="city" name="city" >
    <optgroup label="Popular Cities">
        <option selected style="display:none;color:#eee;">Entire country</option>
        <option value="city1">city 1</option>
        <option value="city2">city 2</option>
        <option value="city3">city3</option>
        <option value="city4">city4</option>
        <option value="city5">city5</option>
</select>
</form>

Then in post.php have the same code as current.