I am a complete newbie in ajax, but I read that Ajax is the only way to store a variable from jQuery and send it back to PHP to use it.
As you can see in this example, I have a drop down list populate from a MySQL database:
$query = "SELECT * FROM my_gallery";
$execute = mysqli_query($link, $query);
$results = mysqli_num_rows($execute);
if ($results!=0) {
echo '<label>The galleries are: ';
echo '<select id="galleries" name="galleries">';
echo '<option value=""></option>';
for ($i=0; $i<$results; $i++) {
$row = mysqli_fetch_array($execute);
$name = htmlspecialchars($row['galleryName']);
echo '<option value="' .$name. '">' .$name. '</option>';
}
echo '</select>';
echo '</label>';
}
With jQuery I add the selected attribute:
$('#page').change(function(e) {
e.preventDefault();
var selectedOption = $(this).find('option:selected');
$('#page option').removeAttr('selected');
$(selectedOption).attr('selected','selected');
var selectedOptionValue = $(selectedOption).val();
var selectedOptionText = $(selectedOption).text();
alert("You selected " + selectedOptionText + " Value: " + selectedOptionValue);
});
How can I store the selected option in a variable and send it back to PHP? Never used ajax, so please be as much detailed as possible and patience! :)
I updated your jsfiddle
basically you would need to add this to your code:
$.ajax({
url: 'your url', //the url that you are sending data to
type: 'POST', //the method you want to use can change to 'GET'
data: {data : selectedOptionText}, //the data you want to send as an object , to receive in on the PHP end you would use $_POST['data']
dataType: 'text', //your PHP can send back data using 'echo' can be HTML, JSON, or TEXT
success: function(data){
//do something with the returned data, either put it in html or you don't need to do anything with it
}
});
If you want to send ajax request on change
event then try
$('#galleries').change(function() {
var selected = $(this).val(); // getting selected value
$.ajax({
url: "upload.php", // url to send ajax request
type: "POST", // request method
data: {selected: selected}, // passing selected data
success: function(data) { // success callback function
alert(data); // the response data
}
});
});
In your upload.php
<?php
$selected=$_POST['selected']; //getting the selected value
//other code
echo "your result";
?>
With some jquery
$.ajax({
type: "GET",
url: "some.php",
data: "a="+$('#galleries option').filter(':selected').text()+"&b=someval",
beforeSend: function() { },
success: function(html){
$('#content').html(html);
}
});
..and php
echo "a = ". $_GET['a'];