I was trying to use some code I found on here, but I can't get it to work..
Original question: https://www.daniweb.com/programming/web-development/threads/374722/update-database-with-ajax-and-with-different-input-names
The code mostly works great for me, so thanks for this code but I have a problem.
In the code it gives handlers for text input and textarea input and suggests adding extra handlers for other input types. I need to use radio buttons and checkboxes, but I'm awful at javascript and though I got radio buttons to work in Firefox, I can't get them to work on Safari. My page needs to work on iPad/Safari. I couldn't get checkboxes to work on any platform. I don't know how to write the handlers, tried various ways, perhaps the functions themselves need tweaking, I don't know enough. I'm hoping this will be so simple for someone in the know to fix. I'm here because I'm well and truly stuck!
Here is my code (very much like original in link).
<html>
<head>
<script type='text/javascript'>
<!--
window.onload = function() {
alert(document.getElementById("year"));
};
function GetXmlHttpObject() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) {
//Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function updateDB(formElement, elementType, txtHint, xmlHttp, tim) {
clearTimeout(tim);
xmlHttp.abort();//abort any incomplete request for this request object that is currently in progress.
var val = null, timeoutVal = 5000;
switch(elementType) {
case 'select':
val = formElement[formElement.selectedIndex].value;
//window.alert("select");
break;
case 'radio':
val = formElement[formElement.checked].value;
break;
case 'checkbox':
val = formElement[formElement.checked].value;
break;
default:
val = formElement.value;
break;
}
if (val !== null) {
var url = "includes/ajaxProcess-screening.php?recordID=<?php echo $recordID; ?>&" + formElement.name + '=' + val;
url += "&sid=" + new Date().getTime();//good idea to avoid the consequences of cacheing
// txtHint.innerHTML = 'updating...'; //✓
txtHint.innerHTML = '✓';
tim = setTimeout(function(){
if(txtHint){
xmlHttp.abort();
if(txtHint) { txtHint.innerHTML = 'timeout'; }
}
}, timeoutVal);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState==4) {
clearTimeout(tim);
if (xmlHttp.status==200) {//success
if(txtHint) { txtHint.innerHTML = xmlHttp.responseText; }//or something based on xmlHttp.responseText
}
else {//error
if(txtHint) { txtHint.innerHTML = "update failed (" + xmlHttp.status + ")"; }
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
}
function updateDB_closure(formElement, elementType) {//formElement and elementType are trapped in the closure and are reused
var xmlHttp = GetXmlHttpObject();//xmlHttp is trapped in the closure and is reused
if (xmlHttp==null) {
alert ("Browser does not support HTTP Request");
return;
}
var txtHint = document.getElementById(formElement.getAttribute("txtHintID"));//txtHint is trapped in the closure and is reused
var tim;
return function(evt) {//this retuned function becomes the handler for the designated event
updateDB(formElement, elementType, txtHint, xmlHttp, tim);//use of the variables here causes a closure to be formed.
};
}
onload = function(){
var i;
var elements = document.getElementsByTagName('input');
for(i=0; i<elements.length; i++){
if(elements[i].className.indexOf('updateDB') > -1){
elements[i].onblur = updateDB_closure(elements[i], 'input');
}
}
elements = document.getElementsByTagName('select');
for(i=0; i<elements.length; i++){
if(elements[i].className.indexOf('updateDB') > -1){
elements[i].onchange = updateDB_closure(elements[i], 'select');
}
}
elements = document.getElementsByTagName('textarea');
for(i=0; i<elements.length; i++){
if(elements[i].className.indexOf('updateDB') > -1){
elements[i].onblur = updateDB_closure(elements[i], 'textarea');
}
}
elements = document.getElementsByTagName('radio');
for(i=0; i<elements.length; i++){
if(elements[i].className.indexOf('updateDB') > -1){
elements[i].onchange = updateDB_closure(elements[i], 'radio');
}
}
elements = document.getElementsByTagName('checkbox');
for(i=0; i<elements.length; i++){
if(elements[i].className.indexOf('updateDB') > -1){
elements[i].onchange = updateDB_closure(elements[i], 'checkbox');
}
}
}
//-->
</script>
</head>
<body>
<h1>Form</h1>
<span id="txthint_1"></span>
<form>
<input type="radio" name="icd" class="updateDB" value="1" txtHintID="txthint_1" <?php if($icd=="1"){echo "checked";}?> > YES
<input type="radio" name="icd" class="updateDB" value="0" txtHintID="txthint_1" <?php if($icd=="0"){echo "checked";};?> > NO
</form>
</body>
</html>
<!--Below is the php in the file include ajaxProcess-screening.php -->
<?php
$recordID = $_GET['recordID']; // the primary id for table
$getVars = array_keys($_GET); // array of all the $_GET variable names
$dbVariableName = $getVars[1]; // Second one, in this case the one matching database field name
$formValue = $_GET[$dbVariableName]; // It's value
$query = "UPDATE Screening SET ".$dbVariableName."='".$formValue."' WHERE recordID= '$recordID'";
$updateresult = MYSQL_QUERY($query);
?>
