Dear members,
I'm facing a problem using ajax..I ve two files language.php and ajax-language.php. In language.php I have a list of languages with checkbox where if i click a checkbox then a male female option will be shown. now the problem is when i'm going to click gender option then it shows nothing(in firefox error console it says "document.form1.sex is undefined")....can anybody plzzzzz take care to solve this isssue.
language.php..
<?php
echo $_REQUEST['langId'];
?>
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
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("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
// To display gender options
if(document.form1.scripts.length > 0){
var ajaxGenderDisplay = document.getElementById('gender');
ajaxGenderDisplay.innerHTML = ajaxRequest.responseText;
}
// TO display voice options
if(document.form1.scripts.length > 0 && document.form1.sex.length > 0){
var ajaxVoiceDisplay = document.getElementById('voice');
ajaxVoiceDisplay.innerHTML = ajaxRequest.responseText;
}
}
}
var total=""
for(var i=0; i < document.form1.scripts.length; i++){
if(document.form1.scripts[i].checked){
//total +=document.form1.scripts[i].value + ",";
if(document.form1.sex.length == 0){
total +=document.form1.scripts[i].value + ",";
}else{
for(var i=0; i < document.form1.sex.length; i++){
if(document.form1.sex[i].checked){
total +=document.form1.scripts[i].value + "sex" + document.form1.sex[i].value + ",";
}
}
}
}
}
//alert(total);
var queryString = "?language=" + total ;
ajaxRequest.open("GET", "ajax-language.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
</head>
<body>
<table border='0' width='50%' cellspacing='0' cellpadding='0' >
<tr>
<th>Language</th>
<th>Gender</th>
<th>Voice</th>
<th>Quotation</th>
<form name="form1" method="post">
<tr>
<td align=left valign="top">
<input type="checkbox" name="scripts" value='JavaScript' onChange="ajaxFunction();">JavaScript<br>
<input type="checkbox" name="scripts" value='PHP' onChange="ajaxFunction();">PHP <br>
<input type="checkbox" name="scripts" value='HTML' onChange="ajaxFunction();">HTML <br>
</td>
<td valign="top">
<div id="gender"></div>
</td>
<td valign="top">
<div id="voice"></div>
</td>
<td valign="top">
<div id="quotation"></div>
</td>
</tr>
</form>
</table>
</body>
</html>ajax-example.php....
<?php
$language = $_REQUEST['language'];
//echo $language;
$language = explode(',', $language);
foreach($language as $val){
if($val !=''){
$disp_opt = "<b>".$val."</b><br>";
$disp_opt .= "<input type=\"checkbox\" name=\"sex\" value=\"m\" onChange=\"ajaxFunction();\">Male ";
$disp_opt .= "<input type=\"checkbox\" name=\"sex\" value=\"f\" onChange=\"ajaxFunction();\">Female <br>";
echo $disp_opt;
}
}
?>