Multiple variables passed via querystring

Question

julianmoors 0 Newbie Poster

14 Years Ago

Hi guys,

I have a form which has multiple drop-down menus using the standard <select> tags, but I can only get the results for the first drop-down menu. Does anyone know how I can expand the below code to support multiple variables using a querystring?

Thanks,
Julian

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="zh-HK" />
    <title>Timetable</title>
    <script type="text/javascript">
        function showCourse(string)
        {
            if (string == "") {
                document.getElementById("dynamic_display").innerHTML = "";
                return;
            }
                        
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            
            xmlhttp.onreadystatechange = function()
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("dynamic_display").innerHTML = xmlhttp.responseText;
                }
            }

            xmlhttp.open("GET", "search.php?Subject=" + string, true);
            xmlhttp.send();
        }
    </script>
    <style type="text/css">
        body {
            font-size: 0.75em;
            margin: 0px;
            padding: 0px;
        }
        
        table#search {
            border-collapse: collapse;
            margin: auto;
            width: 956px;
        }
        table#search tr th {
            border: solid #000000 1px;
        }
        
        table#results {
            border-collapse: collapse;
            margin: auto;
            width: 956px;
        }
        table#results tr th {
            background-color: #00561c;
            border: solid #000000 1px;
            color: #ffffff;
        }
        table#results tr td {
            border: solid #000000 1px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table id="search">
        <form>
            <tr>
                <th>
                    <select name="Subject" onchange="showCourse(this.value);">
                        <option selected="selected" value="">Subject:</option>
                        <option value="Maths">Maths</option>
                        <option value="English">English</option>
                        <option value="Science">Science</option>       
                </th>
                <th>
                    <select name="Tutor" onchange="showCourse(this.value);">
                        <option selected="selected">Tutor:</option>
                        <option value="Tutor%201">Tutor 1</option>
                        <option value="Tutor%202">Tutor 2</option>
                        <option value="Tutor%203">Tutor 3</option>
                    </select>
                </th>
                <th>
                    <select name="Level" onchange="showCourse(this.value);">
                        <option selected="selected">Level:</option>
                        <option value="Year%201">Year 1</option>
                        <option value="Year%202">Year 2</option>
                        <option value="Year%203">Year 3</option>
                    </select>
                </th>
            </tr>
        </form>
    </table>
    <div id="dynamic_display"></div>
</body>
</html>

javascript php

2 Contributors
6 Replies
212 Views
9 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by julianmoors

vibhaJ 126 Master Poster

14 Years Ago

Some points to mention:
-> form tag must always start exact html portion. e.g. in your code form should be above table tag.

<form id="form" name="form" method="get" >
    <table id="search">        
            <tr>

-> Subject select tag is not completed with </select>
-> try method="get" in form. and check how many variables are passed in url.

vibhaJ 126 Master Poster

14 Years Ago

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="zh-HK" />
	<title>Cantab Education: Timetable</title>
	<script type="text/javascript">
		function showCourse(string,key)
		{
			if (string == "") {
				document.getElementById("dynamic_display").innerHTML = "";
				return;
			}
						
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			
			xmlhttp.onreadystatechange = function()
			{
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					document.getElementById("dynamic_display").innerHTML = xmlhttp.responseText;
				}
			}

			xmlhttp.open("GET", "search.php?key="+ key +"&search=" + string, true);
			xmlhttp.send();
		}
	</script>
    <style type="text/css">
		body {
			font-size: 0.75em;
			margin: 0px;
			padding: 0px;
		}
		
		table#search {
			border-collapse: collapse;
			margin: auto;
			width: 956px;
		}
		table#search tr th {
			border: solid #000000 1px;
		}
		
		table#results {
			border-collapse: collapse;
			margin: auto;
			width: 956px;
		}
		table#results tr th {
			background-color: #00561c;
			border: solid #000000 1px;
			color: #ffffff;
		}
		table#results tr td {
			border: solid #000000 1px;
			text-align: center;
		}
	</style>
</head>
<body>
	<form>
		<table id="search">
            <tr>
                <th>
                	<select name="subject" onchange="showCourse(this.value,'Subject');">
                    	<option selected="selected" value="">Subject:</option>
                        <option value="A%20Math">A Math</option>
                        <option value="BAFS(A)">BAFS(A)</option>
                        <option value="BAFS(Acc)">BAFS(Acc)</option>                       
                    </select>
                </th>
                <th>
                	<select name="tutor" onchange="showCourse(this.value,'Tutor');">
                		<option selected="selected" value="">Tutor:</option>
                		<option value="A.%20Yiu">A. Yiu</option>
                		<option value="Alan%20x%20Cars">Alan x Cars</option>
                		<option value="Ally">Ally</option>                		
                	</select>
                </th>
                <th>
                	<select name="level" onchange="showCourse(this.value,'Level');">
                		<option selected="selected" value="">Level:</option>
                		<option value="Form%201">Form 1</option>
                		<option value="Form%202">Form 2</option>
                		<option value="Form%203">Form 3</option>                		
                	</select>
                </th>
                <th>
                	<select name="center" onchange="showCourse(this.value,'Primary Center');">
                		<option selected="selected" value="">Center:</option>
                		<option value="Causeway%20Bay">Causeway Bay</option>
                		<option value="Fo%20Tan">Fo Tan</option>
                		<option value="Hung%20Hom">Hung Hom</option>                		
                	</select>
                </th>
            </tr>
    	</table>
    </form>
    <div id="dynamic_display"></div>
</body>
</html>

search.php

<?php
	require_once('MagicParser.php');	
	$counter = 0;
	$limit_results = 1000;
		
	$key = $_GET['key'];
	$search = $_GET['search'];
		
	print "
	<table id=\"results\">
    	<tr>
       	    <th>Subject</th>
            <th>Tutor</th>
            <th>Level</th>
            <th>Code</th>
            <th>Center</th>
            <th>Date</th>
            <th>Timetable</th>
            <th>Outline</th>
		</tr>
	";
	
	MagicParser_parse("course-data.csv", "recordHandler");
	
	function recordHandler($record)
	{
		global $subject;
		global $tutor;
		global $counter;
		global $limit_results;
			
		
		if( $record[$key] == $search  )
		{		
			print "<tr><td>".$record['Subject']."</td>";
			print "<td>".$record['Tutor']."</td>";		
			print "<td>".$record['Level']."</td>";
			print "<td>".$record['Course Code']."</td>";
			print "<td>".$record['Primary Center']."</td>";
			print "<td>".$record['Lesson 1 Date']."</td>";
			print "<td><a href=\"#\">IMG</a></td>";
			print "<td><a href=\"#\">IMG</a></td></td>";
			print "</tr>";
		}
		else
		{
			return;
		}
		
		$counter ++;
		return ($counter == $limit_results);
	}
	
	print "
	</table>
	";
?>

I havn't run this code.Plz try at your end.
And let me know output.

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.

julianmoors 0 Newbie Poster · Answer 1 · 2010-09-27T16:45:06+00:00

Some points to mention:
-> form tag must always start exact html portion. e.g. in your code form should be above table tag.
<form id="form" name="form" method="get" >
    <table id="search">        
            <tr>
-> Subject select tag is not completed with </select>
-> try method="get" in form. and check how many variables are passed in url.

Hi vibhadevit,

I've moved the form outside of the table. The subject select tag is actually in the code, but I modified it on here as I didn't want to use real code. Do I still need to include method="get" even though I'm using AJAX to submit the form?

Julian

vibhaJ 126 Master Poster · Answer 2 · 2010-09-27T17:00:18+00:00

Okay. Do you want Subject, Tutor, Level drop down values after form submit?
Your ajax portion is replacing dynamic_display inner HTML.which is outside of form.

julianmoors 0 Newbie Poster · Answer 3 · 2010-09-27T17:22:47+00:00

Okay. Do you want Subject, Tutor, Level drop down values after form submit?
Your ajax portion is replacing dynamic_display inner HTML.which is outside of form.

Yes, I would like Subject, Tutor, Level drop down values after form submit. However I think I have solved this issue using <option value="Subject=Maths">, <option value="Subject=English"> and <option value="Subject=Science">. Then in the search.php file I use

$query = explode("=", urldecode($_GET['query']));

$subject = "";
$tutor = "";
	
switch($query[0])
{
	case "Subject":
		$subject = $query[1];
		break;
	case "Tutor":
		$tutor = $query[1];
		break;
}

The issue I have now is being able to select Subject, Tutor, Level and Center independently without affecting the other select queries. I'll post the files in their entirety so you can see what I'm doing.

search.php

<?php
	require_once('MagicParser.php');	
	$counter = 0;
	$limit_results = 1000;
		
	$query = explode("=", urldecode($_GET['query']));
		
	$subject = "";
	$tutor = "";
	
	switch($query[0])
	{
		case "Subject":
			$subject = $query[1];
			break;
		case "Tutor":
			$tutor = $query[1];
			break;
	}
	
	print "
	<table id=\"results\">
    	<tr>
       	    <th>Subject</th>
            <th>Tutor</th>
            <th>Level</th>
            <th>Code</th>
            <th>Center</th>
            <th>Date</th>
            <th>Timetable</th>
            <th>Outline</th>
		</tr>
	";
	
	MagicParser_parse("course-data.csv", "recordHandler");
	
	function recordHandler($record)
	{
		global $subject;
		global $tutor;
		global $counter;
		global $limit_results;
				
		if (($subject == $record['Subject']) || ($subject == "")) {
			print "<tr><td>".$record['Subject']."</td>";
		} else {
			return;
		}
		
		print "<td>".$record['Tutor']."</td>";		
		print "<td>".$record['Level']."</td>";
		print "<td>".$record['Course Code']."</td>";
		print "<td>".$record['Primary Center']."</td>";
		print "<td>".$record['Lesson 1 Date']."</td>";
		print "<td><a href=\"#\">IMG</a></td>";
		print "<td><a href=\"#\">IMG</a></td></td>";
		print "</tr>";
		
		$counter ++;
		return ($counter == $limit_results);
	}
	
	print "
	</table>
	";
?>

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="content-language" content="zh-HK" />
	<title>Cantab Education: Timetable</title>
	<script type="text/javascript">
		function showCourse(string)
		{
			if (string == "") {
				document.getElementById("dynamic_display").innerHTML = "";
				return;
			}
						
			if (window.XMLHttpRequest) {
				xmlhttp = new XMLHttpRequest();
			} else {
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			
			xmlhttp.onreadystatechange = function()
			{
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					document.getElementById("dynamic_display").innerHTML = xmlhttp.responseText;
				}
			}

			xmlhttp.open("GET", "search.php?query=" + string, true);
			xmlhttp.send();
		}
	</script>
    <style type="text/css">
		body {
			font-size: 0.75em;
			margin: 0px;
			padding: 0px;
		}
		
		table#search {
			border-collapse: collapse;
			margin: auto;
			width: 956px;
		}
		table#search tr th {
			border: solid #000000 1px;
		}
		
		table#results {
			border-collapse: collapse;
			margin: auto;
			width: 956px;
		}
		table#results tr th {
			background-color: #00561c;
			border: solid #000000 1px;
			color: #ffffff;
		}
		table#results tr td {
			border: solid #000000 1px;
			text-align: center;
		}
	</style>
</head>
<body>
	<form>
		<table id="search">
            <tr>
                <th>
                	<select onchange="showCourse(this.value);">
                    	<option selected="selected" value="">Subject:</option>
                        <option value="Subject=A%20Math">A Math</option>
                        <option value="Subject=BAFS(A)">BAFS(A)</option>
                        <option value="Subject=BAFS(Acc)">BAFS(Acc)</option>
                        <option value="Subject=BAFS(B)">BAFS(B)</option>
                        <option value="Subject=BAFS(Mgt)">BAFS(Mgt)</option>
                        <option value="Subject=BS(A)">BS(A)</option>
                        <option value="Subject=BS(B)">BS(B)</option>
                        <option value="Subject=BS(C)">BS(C)</option>
                        <option value="Subject=Business%20Studies">Business Studies</option>
                        <option value="Subject=C.Lit">C.Lit</option>
                        <option value="Subject=Chem(A)">Chem(A)</option>
                        <option value="Subject=Chem(B)">Chem(B)</option>
                        <option value="Subject=Chemistry">Chemistry</option>
                        <option value="Subject=Chinese%20Language">Chinese Language</option>
                        <option value="Subject=Chinese%20Language%20and%20Culture">Chinese Language and Culture</option>
                        <option value="Subject=Econ(A)">Econ(A)</option>
                        <option value="Subject=Econ(B)">Econ(B)</option>
                        <option value="Subject=Econ(C)">Econ(C)</option>
                        <option value="Subject=Economics">Economics</option>
                        <option value="Subject=English">English</option>
                        <option value="Subject=English%20Language">English Language</option>
                        <option value="Subject=English***">English***</option>
                        <option value="Subject=F5%20Chemistry">F5 Chemistry</option>
                        <option value="Subject=F7%20Chemistry">F7 Chemistry</option>
                        <option value="Subject=Geography(C)">Geography(C)</option>
                        <option value="Subject=ICT(A)">ICT(A)</option>
                        <option value="Subject=ICT(C)">ICT(C)</option>
                        <option value="Subject=ICT(Core)">ICT(Core)</option>
                        <option value="Subject=ICT(D1)">ICT(D1)</option>
                        <option value="Subject=ICT(D2)">ICT(D2)</option>
                        <option value="Subject=ICT(D3)">ICT(D3)</option>
                        <option value="Subject=IELTS">IELTS</option>
                        <option value="Subject=Junior%20Chinese%20Language">Junior Chinese Language</option>
                        <option value="Subject=Junior%20English">Junior English</option>
                        <option value="Subject=LCCI%20Level%201">LCCI Level 1</option>
                        <option value="Subject=LCCI%20Level%202">LCCI Level 2</option>
                        <option value="Subject=Liberal%20Studies">Liberal Studies</option>
                        <option value="Subject=Liberal%20Studies(A)">Liberal Studies(A)</option>
                        <option value="Subject=Math">Math</option>
                        <option value="Subject=Math(Core)">Math(Core)</option>
                        <option value="Subject=Math(M2)">Math(M2)</option>
                        <option value="Subject=Mathematics">Mathematics</option>
                        <option value="Subject=Mathematics%201">Mathematics 1</option>
                        <option value="Subject=Mathematics%202">Mathematics 2</option>
                        <option value="Subject=MS(A)">MS(A)</option>
                        <option value="Subject=MS(B)">MS(B)</option>
                        <option value="Subject=Phy(E%26M)">Phy(E&M)</option>
                        <option value="Subject=Phy(Heat)">Phy(Heat)</option>
                        <option value="Subject=Phy(Mec1)">Phy(Mec1)</option>
                        <option value="Subject=Phy(Wave)">Phy(Wave)</option>
                        <option value="Subject=Phy%26Chem">Phy&Chem</option>
                        <option value="Subject=Physics">Physics</option>
                        <option value="Subject=Physics%20A">Physics A</option>
                        <option value="Subject=Physics%20B">Physics B</option>
                        <option value="Subject=Physics%20C">Physics C</option>
                        <option value="Subject=Principles%20of%20Accounts">Principles of Accounts</option>
                        <option value="Subject=Pure%20Maths">Pure Maths</option>
                        <option value="Subject=Putonghua">Putonghua</option>
                        <option value="Subject=Use%20of%20English">Use of English</option>
                    </select>
                </th>
                <th>
                	<select onchange="showCourse(this.value);">
                		<option selected="selected" value="">Tutor:</option>
                		<option value="Tutor=A.%20Yiu">A. Yiu</option>
                		<option value="Tutor=Alan%20x%20Cars">Alan x Cars</option>
                		<option value="Tutor=Ally">Ally</option>
                		<option value="Tutor=Andy%20Kwok">Andy Kwok</option>
                		<option value="Tutor=C.Y.%20Chau">C.Y. Chau</option>
                		<option value="Tutor=Cyrus">Cyrus</option>
                		<option value="Tutor=Cyrus%20%26%20Joe%20Suen">Cyrus & Joe Suen</option>
                		<option value="Tutor=Cyrus%20%26%20Tony%20Yoon">Cyrus & Tony Yoon</option>
                		<option value="Tutor=David%20Chiu">David Chiu</option>
                		<option value="Tutor=Frankie%20Tam">Frankie Tam</option>
                		<option value="Tutor=J%20Ng">J Ng</option>
                		<option value="Tutor=J%20Yeung">J Yeung</option>
                		<option value="Tutor=Joe%20Suen">Joe suen</option>
                		<option value="Tutor=Johnny">Johnny</option>
                		<option value="Tutor=JT">JT</option>
                		<option value="Tutor=Kim">Kim</option>
                		<option value="Tutor=Luna%20Chan">Luna Chan</option>
                		<option value="Tutor=Patrick%20Lam">Patrick Lam</option>
                		<option value="Tutor=Peter%20Chow">Peter Chow</option>
                		<option value="Tutor=R%20Wong">R Wong</option>
                		<option value="Tutor=Shun">Shun</option>
                		<option value="Tutor=Stephen%20Tang">Stephen Tang</option>
                		<option value="Tutor=Super%20Admin">Super Admin</option>
                		<option value="Tutor=Super%20English%20Force">Super English Force</option>
                		<option value="Tutor=Thomas%20Yan">Thomas Yan</option>
                		<option value="Tutor=Tony%20Yoon">Tony Yoon</option>
                		<option value="Tutor=W%20Chen%20x%20Leung%20Sir">W Chen x Leung Sir</option>
                	</select>
                </th>
                <th>
                	<select onchange="showCourse(this.value);">
                		<option selected="selected" value="">Level:</option>
                		<option value="Level=Form%201">Form 1</option>
                		<option value="Level=Form%202">Form 2</option>
                		<option value="Level=Form%203">Form 3</option>
                		<option value="Level=Form%204">Form 4</option>
                		<option value="Level=Form%205">Form 5</option>
                		<option value="Level=Form%206">Form 6</option>
                		<option value="Level=Form%207">Form 7</option>
                		<option value="Level=HKCEE">HKCEE</option>
                		<option value="Level=HKALE">HKALE</option>
                		<option value="Level=HKDSE">HKDSE</option>
                		<option value="Level=Junior%201%20%26%202">Junior 1 & 2</option>
                		<option value="Level=Junior%202%20%26%203">Junior 2 & 3</option>
                		<option value="Level=General">General</option>
                	</select>
                </th>
                <th>
                	<select onchange="showCourse(this.value);">
                		<option selected="selected" value="">Center:</option>
                		<option value="Center=Causeway%20Bay">Causeway Bay</option>
                		<option value="Center=Fo%20Tan">Fo Tan</option>
                		<option value="Center=Hung%20Hom">Hung Hom</option>
                		<option value="Center=Prince%20Edward">Prince Edward</option>
                		<option value="Center=San%20Po%20Kong">San Po Kong</option>
                		<option value="Center=Wo%20Che">Wo Che</option>
                		<option value="Center=Sai%20Wan%20Ho">Sai Wan Ho</option>
                		<option value="Center=Tuen%20Mun">Tuen Mun</option>
                		<option value="Center=Tai%20Wo">Tai Wo</option>
                		<option value="Center=Tsuen%20Wan">Tsuen Wan</option>
                		<option value="Center=Wan%20Chai">Wan Chai</option>
                		<option value="Center=Yuen%20Long">Yuen Long</option>
                		<option value="Center=Yau%20Ma%20Tei">Yau Ma Tei</option>
                	</select>
                </th>
            </tr>
    	</table>
    </form>
    <div id="dynamic_display"></div>
</body>
</html>

julianmoors 0 Newbie Poster · Answer 4 · 2010-09-27T18:37:57+00:00

julianmoors 0 Newbie Poster

14 Years Ago

Thank you! Thank you! Thank you!