I'm trying to POST a variable through a select box, which will submit the data through AJAX and then I need to be able to use that vairable on the original page, which updates the sql queries.
Here is the code I have got so far:
<script type="text/javascript">
function selectCategory() {
document.getElementById('categoryText').addEventListener("change", function() {
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","/category.php?category3="
+document.getElementById("categoryText").value, false);
xmlhttp.send(null);
});
}
</script>
and the AJAX (which im struggling with)
<?php
/*Retreving the Value from the select box */
$categoryFilter = $_GET['category3'];
?>
When you say "select box" do you mean a select menu - ie: dropdown? If that is the case then generally you access the value of the selected element like this:-
var oSel=document.getElementById("categoryText");
var value=oSel.options[ oSel.options.selectedIndex ].value
<script type="text/javascript">
function selectCategory() {
var oSel=document.getElementById('categoryText')
oSel.addEventListener("change", function() {
var xmlhttp=new XMLHttpRequest();
xmlhttp.open( "GET", "/category.php?category3="+this.options[ this.options.selectedIndex ].value, false );
xmlhttp.send(null);
}.bind( oSel ) );
}
selectCategory.call( this );
</script>
Maybe:
data=[];
data.push({name: 'category3', value: checked/unchecked });
$('.submit').click(function() {
$.ajax({
type: 'POST',
url: 'your php page url',
data: formData,
success:function(data){
// successful request; do something with the data
alert(data);
},
error:function(){
// failed request; give feedback to user
alert("error");
}
});
});
and in PHP:
$categoryFilter = $POST['category3'];