asked on

Ajax radio button value with php

I have these radio buttons but it doesn't send the value to data base for some reason. can someone help
Thanks

<div style="width:100%; border:solid 1px; margin-left:2%; height:105px;">

<div style="width:25%; float:left;">

</div>

<div style="width:74%; float:right;">

<div style="width:64%; border:solid 1px; float:right; background:#FFFFCC;">

1<input name="PC" type="radio" id ="PC1" value="1" <?php if ($row["PC"]==1) echo "checked"; ?> onChange="ajaxFunction('PC');" /> :    
2<input name="PC" type="radio" id ="PC2" value="2" <?php if ($row["PC"]==2) echo "checked"; ?> onChange="ajaxFunction('PC');" /> :    
3<input name="PC" type="radio" id ="PC3" value="3" <?php if ($row["PC"]==3) echo "checked"; ?> onChange="ajaxFunction('PC');" /> :    
4<input name="PC" type="radio" id ="PC4" value="4" <?php if ($row["PC"]==4) echo "checked"; ?> onChange="ajaxFunction('PC');" /> :    
5 <input name="PC" type="radio" id ="PC5" value="5" <?php if ($row["PC"]==5) echo "checked"; ?> onChange="ajaxFunction('PC');" /> :    
6<input name="PC" type="radio" id ="PC6" value="6" <?php if ($row["PC"]==6) echo "checked"; ?> onChange="ajaxFunction('PC');" /> :    
7 <input name="PC" id ="PC7" type="radio" value="7" <?php if ($row["PC"]==7) echo "checked"; ?> onChange="ajaxFunction('PC');" /><div id="updatePC"></div>
</div>

<div style="width: 35%; float: right;">



</div>

</div>

</div>

Below is my ajax code

function ajaxFunction(element){
	var ajaxRequest;  // The variable that makes Ajax possible!
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Please update your browser!");
				return false;
			}
		}
	}
	var url="mainsurvey.php?T=" + encodeURIComponent(document.getElementById('T').value) 
	+ "&PC1="+(document.getElementById('PC1').checked ? 1 : 0)
	+ "&PC2="+(document.getElementById('PC2').checked ? 2 : 0)
	+ "&PC3="+(document.getElementById('PC3').checked ? 3 : 0)
	+ "&PC4="+(document.getElementById('PC4').checked ? 4 : 0)
	+ "&PC5="+(document.getElementById('PC5').checked ? 5 : 0)
	+ "&PC6="+(document.getElementById('PC6').checked ? 6 : 0)
	+ '&element=' + element;
	ajaxRequest.open("GET", url, true);
    ajaxRequest.onreadystatechange = function(){            
      switch(ajaxRequest.readyState) {
        case 4:
        if(ajaxRequest.status!=200) {
            alert("Error:"+ajaxRequest.status); 
        }else{
        	var xml = ajaxRequest.responseXML;
            var updateElement = xml.getElementsByTagName("element")[0];
            document.getElementById('update' + updateElement.firstChild.nodeValue).innerHTML = '<img src="img/greencheck.jpg" height="20" width="20" alt="Updated">';
        }
        break;
 
        default:
            return false;
        break;     
    }
  };	
	ajaxRequest.send(null);
 
 
 
}
function changeColor(obj,color){
obj.style.backgroundColor = color;
}

Open in new window

hielo

use onclick:
onclick="ajaxFunction('PC');"

NOT onchange:
onChange="ajaxFunction('PC');"

jarospirit

I think I solve something similar by pre-selecting only one item, and hidding it with css(so it was not display in the browser), then allowing the user to make the selection.

it helped me a lot, to look at the render HTML code in every step of the process.

It seem without seeing the rest of the code that the error is on the form code and the way you are capturing the result from the user.

hope that helps.