Multiple Input Filtering - PHP, MySQL & ajax

Question

ettypaldos 0 Newbie Poster

13 Years Ago

I would like to alter the example provided here so that there is a second dropdown input for 'Male/Female'. I know the example itself does not provide a 'Sex' field in the MySQL db, but let's just pretend it does. Furthermore, assume we have a new in out select for 'All', which lists all people stored in the db.

I would like the second dropdown, 'Male/Female' to sort and display results matching the selection. I know how to do this on the PHP side, my question is:

How do I alter the HTML(form) and Javascript to carry over the form results for PHP processing?

--------------------------------------------------------------------------------
Example is based off of: http://www.w3schools.com/php/php_ajax_database.asp

Here is the HTML + JS:

<html> <head> <script type="text/javascript"> function showUser(str) { if (str=="")   {   document.getElementById("txtHint").innerHTML="";   return;   }  if (window.XMLHttpRequest)   {// code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest();   } else   {// code for IE6, IE5   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   } xmlhttp.onreadystatechange=function()   {   if (xmlhttp.readyState==4 && xmlhttp.status==200)     {     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;     }   } xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } </script> </head> <body>  <form> <select name="users" onchange="showUser(this.value)"> <option value="">Select a person:</option> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Glenn Quagmire</option> <option value="4">Joseph Swanson</option> </select> </form> <br /> <div id="txtHint"><b>Person info will be listed here.</b></div>  </body> </html>

And here is the PHP:

<?php $q=$_GET["q"];  $con = mysql_connect('localhost', 'peter', 'abc123'); if (!$con)   {   die('Could not connect: ' . mysql_error());   }  mysql_select_db("ajax_demo", $con);  $sql="SELECT * FROM user WHERE id = '".$q."'";  $result = mysql_query($sql);  echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> </tr>";  while($row = mysql_fetch_array($result))   {   echo "<tr>";   echo "<td>" . $row['FirstName'] . "</td>";   echo "<td>" . $row['LastName'] . "</td>";   echo "<td>" . $row['Age'] . "</td>";   echo "<td>" . $row['Hometown'] . "</td>";   echo "<td>" . $row['Job'] . "</td>";   echo "</tr>";   } echo "</table>";  mysql_close($con); ?>

Thanks!

javascript mysql php

Edited 13 Years Ago by ettypaldos because: n/a

5 Contributors
9 Replies
5K Views
10 Months Discussion Span
Latest Post 12 Years Ago Latest Post by johns1982

ddymacek 15 Posting Whiz

13 Years Ago

Tizag.com has much better example code than www3.
page 1, input form:

<html> <head> 
<script type="text/javascript"> 

function showUser(str){
	var ajaxRequest;  // The variable that makes Ajax possible!
	if (str=="") {   
		document.getElementById("txtHint").innerHTML="";   
		return;   
	}  	
	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){
			var ajaxDisplay = document.getElementById('txtHint');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.open("GET","getuser.php?q="+str,true); 
	ajaxRequest.send(null); 	
}
function showSex(str){
	var ajaxRequest;  // The variable that makes Ajax possible!
	if (str=="") {   
		document.getElementById("txtHint").innerHTML="";   
		return;   
	}  	
	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){
			var ajaxDisplay = document.getElementById('txtHint');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
	}
	ajaxRequest.open("GET","getsex.php?q="+str,true); 
	ajaxRequest.send(null); 	
}
//-->	
</script> 
</head> 
<body>  
<form> 
<select name="users" onchange="showUser(this.value)"> 
<option value="">Select a person:</option> 
<option value="1">Peter Griffin</option> 
<option value="2">Lois Griffin</option> 
<option value="3">Glenn Quagmire</option> 
<option value="4">Joseph Swanson</option> 
</select><br />
<select name="sex" onchange="showSex(this.value)"> 
<option value="">Male/Female:</option> 
<option value="1">All</option> 
<option value="2">Male</option> 
<option value="3">Female</option> 
</select> </form> <br /> 
<div id="txtHint"><b>Person info will be listed here.</b></div>  </body> </html>

Page 2: getuser.php

<?php 
	$q=$_GET["q"]; 
	$con = mysql_connect('localhost', 'root', ''); 
	if (!$con) { 
		die('Could not connect: ' . mysql_error()); 
	} 
	mysql_select_db("ajax_demo", $con); 
	$sql="SELECT * FROM user WHERE id = '".$q."'"; 
	$result = mysql_query($sql); 
	echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> <th>Sex</th></tr>"; 
	while($row = mysql_fetch_array($result)) { 
		echo "<tr>"; 
		echo "<td>" . $row['FirstName'] . "</td>"; 
		echo "<td>" . $row['LastName'] . "</td>"; 
		echo "<td>" . $row['Age'] . "</td>"; 
		echo "<td>" . $row['Hometown'] . "</td>"; 
		echo "<td>" . $row['job'] . "</td>"; 
		echo "<td>" . $row['sex'] . "</td>"; 
		echo "</tr>"; } 
		echo "</table>"; 
		mysql_close($con); 
	?>

page 3, getsex.php (as referenced from input form)

<?php 
	$q=$_GET["q"]; 
	// check for your q values, 1 = all, 2 = M, 3 = F
		$con = mysql_connect('localhost', 'root', ''); 
	if (!$con) { 
		die('Could not connect: ' . mysql_error()); 
	} 
	mysql_select_db("ajax_demo", $con); 
	// based on the value passed in we may have to change query, if all run this...
	if ($q == 1) {
		$sql="SELECT * FROM user"; 
	} else if($q == 2){
		$sql="SELECT * FROM user WHERE sex = 'M'"; 
	} else if($q == 3){
		$sql="SELECT * FROM user WHERE sex = 'F'"; 		
	}
	$result = mysql_query($sql); 
	echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> <th>Sex</th></tr>"; 
	while($row = mysql_fetch_array($result)) { 
		echo "<tr>"; 
		echo "<td>" . $row['FirstName'] . "</td>"; 
		echo "<td>" . $row['LastName'] . "</td>"; 
		echo "<td>" . $row['Age'] . "</td>"; 
		echo "<td>" . $row['Hometown'] . "</td>"; 
		echo "<td>" . $row['job'] . "</td>"; 
		echo "<td>" . $row['sex'] . "</td>"; 
		echo "</tr>"; } 
		echo "</table>"; 
		mysql_close($con); 
	?>

I actually named a database ajax_demo, and a table named user ...you can make it if you wish:

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `FirstName` text,
  `LastName` text,
  `Age` int(11) DEFAULT NULL,
  `Hometown` text,
  `job` text,
  `sex` enum('M','F') NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `user`
--

INSERT INTO `user` (`id`, `FirstName`, `LastName`, `Age`, `Hometown`, `job`, `sex`) VALUES
(1, 'Peter', 'Griffin', 41, 'Quahog', 'Brewery', 'M'),
(2, 'Lois', 'Griffin', 40, 'Newport', 'Piano Teacher', 'F'),
(3, 'Joseph', 'Swanson', 39, 'Newport', 'Police Officer', 'M'),
(4, 'Glenn', 'Quagmire', 41, 'Newport', 'Pilot', 'M');

I used the txtHnt field to display both return values, however you can rename the div in the second instance if you do not want it in the same spot.
This all actually works if you make the db, and the proper connection to it.
Enjoy

vibhaJ 126 Master Poster

13 Years Ago

You can also have one single ajax function and pass both user and sex parameter on ajax request.

<html>
<head>
<script type="text/javascript"> 
function showUser() 
{ 
	var users = document.getElementById('users').value;
	var sex = document.getElementById('sex').value;
	
	  if (users=="" && sex=="")
	  {
		document.getElementById("txtHint").innerHTML="";
		 return;
	  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getuser.php?users="+users+"&sex="+sex,true);
xmlhttp.send();
}
 </script>
</head>
<body>
<form>
  <select name="users" id="users" onChange="showUser()">
    <option value="">Select a person:</option>
    <option value="1">Peter Griffin</option>
    <option value="2">Lois Griffin</option>
    <option value="3">Glenn Quagmire</option>
    <option value="4">Joseph Swanson</option>
  </select>
  
<select name="sex" id="sex" onchange="showUser()">
<option value="">Male/Female:</option>
<option value="1">All</option>
<option value="2">Male</option>
<option value="3">Female</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>

On php side you have two variable GET. users and sex.
You can create sql query based on that.

vibhaJ 126 Master Poster

12 Years Ago

John, don't attack on old post. Create new thread with your question and code you have tried.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

akmal1981 0 Newbie Poster · Answer 1 · 2011-12-13T19:16:53+00:00

Hello !

I tried to run the codes by ddymacek but got the following error :

Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in C:\xampp\htdocs\cimb4\getuser.php on line 10

<?php 
	$q=$_GET["q"]; 
	$con = mysql_connect('localhost', 'root', ''); 
	if (!$con) { 
		die('Could not connect: ' . mysql_error()); 
	} 
	mysql_select_db("a_database", $con); 
	$sql="SELECT * FROM idiot WHERE id = '".$q."'"; 
	$result = mysql_query($sql); 
	echo "<<strong class="highlight">table</strong> border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> <th>Sex</th></tr>"; 
	while($row = mysql_fetch_array($result)) { 
		echo "<tr>"; 
		echo "<td>" . $row['FirstName'] . "</td>"; 
		echo "<td>" . $row['LastName'] . "</td>"; 
		echo "<td>" . $row['Age'] . "</td>"; 
		echo "<td>" . $row['Hometown'] . "</td>"; 
		echo "<td>" . $row['job'] . "</td>"; 
		echo "<td>" . $row['sex'] . "</td>"; 
		echo "</tr>"; } 
		echo "</table>"; 
		mysql_close($con); 
	?>

please help !!! I couldnt see what is going wrong here !

akmal1981 0 Newbie Poster · Answer 2 · 2011-12-13T19:47:15+00:00

akmal1981 0 Newbie Poster

13 Years Ago

uh sorry , please ignore my post above

akmal1981 0 Newbie Poster · Answer 3 · 2011-12-13T20:18:41+00:00

ok sorry 1 more question ,

the code i got above is running fine ... but i received the following notice :

Notice: Undefined index: job in C:\xampp\htdocs\cimb4\getsex.php on line 25

Could someone please enlighten this noobie ?

the getsex.php :

<?php 
	$q=$_GET["q"]; 
	// check for your q values, 1 = all, 2 = M, 3 = F
		$con = mysql_connect('localhost', 'root', ''); 
	if (!$con) { 
		die('Could not connect: ' . mysql_error()); 
	} 
	mysql_select_db("a_database", $con); 
	// based on the value passed in we may have to change query, if all run this...
	if ($q == 1) {
		$sql="SELECT * FROM idiot"; 
	} else if($q == 2){
		$sql="SELECT * FROM idiot WHERE sex = 'M'"; 
	} else if($q == 3){
		$sql="SELECT * FROM idiot WHERE sex = 'F'"; 		
	}
	$result = mysql_query($sql); 
	echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>job</th> <th>Sex</th></tr>"; 
	while($row = mysql_fetch_array($result)) { 
		echo "<tr>"; 
		echo "<td>" . $row['FirstName'] . "</td>"; 
		echo "<td>" . $row['LastName'] . "</td>"; 
		echo "<td>" . $row['Age'] . "</td>"; 
		echo "<td>" . $row['Hometown'] . "</td>"; 
		echo "<td>" . $row['job'] . "</td>"; 
		echo "<td>" . $row['sex'] . "</td>"; 
		echo "</tr>"; } 
		echo "</table>"; 
		mysql_close($con); 
	?>

akmal1981 0 Newbie Poster · Answer 4 · 2011-12-13T20:28:13+00:00

ok ok ..... very sorry guys , i got it .... my database and code doesnt match (capital letter and small letter - Job (in database) , job (in code)

thanks for looking anyway - noobie

johns1982 0 Newbie Poster · Answer 5 · 2012-06-06T23:27:06+00:00

default page is empty. how can i show data on default page?

johns1982 0 Newbie Poster · Answer 6 · 2012-06-07T17:05:47+00:00

just created new thread. http://www.daniweb.com/web-development/php/threads/425070/php-mysql-ajax-with-data-on-default-page
i am using a similar code

thanks