DaniWeb Forum Index > Web Development > PHP

Ajax Problem

Please support our PHP advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Aug 2007

Posts: 64

Reputation: nil_gh_80 is an unknown quantity at this point

Solved Threads: 0

nil_gh_80

Offline

Junior Poster in Training

Ajax Problem

Dec 22nd, 2008

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..

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<?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>
<?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....

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<?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 &nbsp;";
	$disp_opt .= "<input type=\"checkbox\" name=\"sex\" value=\"f\" onChange=\"ajaxFunction();\">Female &nbsp;<br>";
	echo $disp_opt;
	}
}
 
 
?>
<?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 &nbsp;";
	$disp_opt .= "<input type=\"checkbox\" name=\"sex\" value=\"f\" onChange=\"ajaxFunction();\">Female &nbsp;<br>";
	echo $disp_opt;
	}
}


?>