Never used ajax before
I have a drop down select list with 3 hard coded options.
Once one is selected i want it to update the database
<select name="status" id="id" onchange="updateStatus(this.value,<?php echo $row['id']; ?>)">
<option value="<?php echo $row['status']; ?>"><?php echo $row['status']; ?></option>
<option value="Order Placed">Order Placed</option>
<option value="Processing">Processing</option>
<option value="Dispatched">Dispatched</option>
</select>
function updateStatus(status, id){
var url = “updatestatus.html”;
function DoCallback(data){
if (window.XMLHttpRequest) { // branch for native XMLHttpRequest object
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(data);
} else if (window.ActiveXObject) { // branch for IE/Windows ActiveX version
req = new ActiveXObject('Microsoft.XMLHTTP')
if (req) {
req.onreadystatechange = processReqChange;
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(data);
}
}
}
}
First suggestion is to format the code properly. From what I could read, you should change the url where data is being posted to your php script and handle all database stuff in that script:
var url = 'updatestatus.php';
For update script it’s as simple as checking POST data and then updating database with new value.
changed the function to this
function updateStatus(status, id){
var url = "updatestatus.php";
if (window.XMLHttpRequest) { // branch for native XMLHttpRequest object
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(data);
/*xmlhttp.open("POST","updatestatus.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");*/
} else if (window.ActiveXObject) { // branch for IE/Windows ActiveX version
req = new ActiveXObject('Microsoft.XMLHTTP')
alert("update2");
if (req) {
req.onreadystatechange = processReqChange;
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(data);
alert("update3");
}
}
}
By adding in alerts the i found they stoped showing up at req.onreadystatechange = processReqChange; in the first of the if statement
How do i pass along the status and id?
Is that in the req.send(data)?
req.onreadystatechange should have function assigned to it, from your code I can’t tell if processReqChange is defined at all.
Yes, you pass your variables in data:
var data = {status: status, id: id};
or directly
req.send({status: status, id: id});
Got it sorted
function updateStatus(status, id){
var url = "updatestatus.php";
var xmlhttp;
if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}else{// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("status="+status+"&id="+id);
}
Thanks took you to make me realise about the processReqChange.
I thought it was an ajax function or something
Thanks