Forums

EamonnMac

Hey guys, could use some help with this - it's my first non-wordpress effort with PHP and my first ever effort with mySQL and my first functional piece of JQuery! So!

Anyway I have a form here http://www.oldkitbag.com/form/resource.php that worked fine when the results showed up on a new page (I guess through using the _POST function). But I tried to add a little something to the form where the results would be appended by JQuery to the forms' container div - i.e. on the same page.

Now, due to the error msg, I know that the form is still talking to the PHP processor, but it's not returning any results anymore. Also I now have the added problem that any new queries are appended onto the old ones at the bottom of the container rather than replacing them. Any ideas on how to solve these problems?

Here's the code for the form:


		<script type=\"text/javascript\">
			$(function() {
				$('.button').click(function() {
					$('<div id=\"info\" />').load('results.php #results', function() {
						$(this).hide()
								.appendTo('.container')
								.slideDown(1000);
						});
						
						return false;
				})
			});
		</script>

</head>

<body>
<h1>Form 1</h1>
<div class=\"container\">
	<div id=\"form\">
		<form action=\"http://www.oldkitbag.com/form/results.php\" method=\"post\" class=\"jqtransform\"> 
		
		<div class=\"rowElem\">
			<label>You are Searching by Resource:</label>
			<select name=\"category\" id=\"category\"> 
				<option>Type</option>
				<option>Title</option>
				<option>Author</option>
			</select>
		</div>
		
		<div class=\"rowElem\">
			<label for=\"resourcesubject\">And Subject:</label>
			<select name=\"resourcesubject\" id=\"resourcesubject\"> 
				<option></option>
				<option>Adult Education</option>
                                ...
				<option>Youth Education</option>
			</select>
		</div>
		
		
		<div class=\"rowElem\">
			<label for=\"filter\"><b>Enter Your Search Term Here:</b></label>
			<input type=\"text\" size=\"50\"  name=\"filter\" id=\"filter\">
			<input type=\"submit\" value=\"GO!\" class=\"button\"> 
		</div>
		
		
		</form>
		<ul>
			<li>To View all Resources available, leave the Subject Selection at 'blank' and leave the input bar Empty.</li>
			<li>To View all Resources available within a particular subject, simply select that subject and leave the input bar empty.</li>
			<li>To View all Resources available of a particular type, leave the Subject Selection at 'blank' and Enter 'Book', 'Journal', 'Video', or 'Manual' in the input bar.</li>
		</ul>
	</div><!--end form-->
</div><!--end container-->

</body>
</html>

And here's the Processor:

<?php
echo \"<table cellspacing='0' cellpadding='5' width='100%' id='results' >\" . \"<tr class='bold'><td>Resource</td><td>Subject</td><td>Title</td><td>Author</td><td>Amount in Stock</td></tr>\";

$host = \"xxxx\";
$user = \"xxxx\";
$password = \"xxxx\";
$reqdatabase = \"xxxx\";

	$mysql = new mysqli($host,$user,$password,$reqdatabase) or die('you\'re dead');



$filtercategory = $_POST['category'];
$filtersubject = $_POST['resourcesubject'];
$filterterm = $_POST['filter'];

if( $filtersubject == \"\" ) {
	$result = $mysql->query(\"SELECT * FROM resourcelist 
				WHERE $filtercategory LIKE '%$filterterm%'\") 
			 		or die('Oops! Something went wrong. Why don\'t you try again?');
}else {
	$result = $mysql->query(\"SELECT * FROM resourcelist 
				WHERE $filtercategory LIKE '%$filterterm%' AND Subject = '$filtersubject' \") 
			 		or die('Oops! Something went wrong. Why don\'t you try again?');
}


if($result) {
	
	while($row = $result->fetch_object()) {
		$title = $row->Title;
		$author = $row->Author;
		$amount = $row->resourceAmount;
		$subject = $row->Subject;
		$description = $row->Type;

		
		$author = htmlentities($author);
		$title = htmlentities($title);
		
		echo \"<tr>\" . \"<td class='nowrap'>$description</td>\" . \"<td class='nowrap'>$subject</td>\" . \"<td><b>$title</b></td>\" . \"<td>$author</td>\" . \"<td class='number'>$amount</td>\" . \"</tr>\";

	}
}


		echo \"</table>\";
?>

So, in short, why is my Processor no longer returning results, and how can I hide those results when I hit the submit button again (although I know that's really a JQuery question!)?

Bearing in mind this form is my first foray into the field and is literally patched together from various tuts, any help in cleaning it up would also be greatly appreciated - if that's not pushing my luck too far! :D

Ta in advance.

TT_Mark

Feel free to ignore me, but I prefer the JQuery AJAX function to the load function. I would also have a new div for the results, we'll give it an id of searchResults. This would mean that it overwrites every time you make a new search. So my jQuery code may look something like this;


<script type=\"text/javascript\">
    $(function() {
        $('.button').click(function() {
            var data = \"category=\"+$(\"input#category\").val()+\"&\";
            data += \"resourcesubject=\"$(\"input#resourcesubject\").val()+\"&\";
            data += \"filter=\"$(\"input#filter\").val();

            $.ajax({
                type: \"POST\",  	// We are goin to submit the form using the POST method
                url: \"pathtoprocessorscript.php\",   // The AJAX call will look for the response from this URL
                data: data,      //pass in the POST data we defined in the data variable
                success: function(results) {    // If the AJAX request is successful
                    $('#searchResults').html(results);   // Put the returned data in the searchResults div
                }
            });
            return false;
        })
    });
</script>

If you could let us know the error message you get then I could probably tell you why the PHP doesn't work

EamonnMac

Aha! I was trying to do something like that on another trial page just now! Couldn't get it to work at all though. I will certainly try your script. My problem with it originally though was the 'data' line - I didn't understand how this worked and communicated with the processor script. If you could go into it in a little more detail I'd be most grateful. Particularly how it translates to my existing 'receiving' script of


$filtercategory = $_POST['category'];
$filtersubject = $_POST['resourcesubject'];
$filterterm = $_POST['filter'];

The error script is "Warning: mysqli::query() expects at least 1 parameter, 0 given", so seemingly, my _POST functions aren't all that they should be... :?

Thanks again!

TT_Mark

The "data" variable basically just creates the data that will be passed by the browser as POST data. It has the same format as GET data which is normally appended to the URL e.g. posting.php?mode=reply&f=6&t=6163 so what should be passed into yours is are the three values from the input form e.g. category=adulteducation&resourcesubject=something&filter=phpprogramming

Then this:


$filtercategory = $_POST['category'];
$filtersubject = $_POST['resourcesubject'];
$filterterm = $_POST['filter'];

should get all the values you have passed as POST. If in doubt about the variables passing properly simply type

var_dump($_POST);

and it should dump the contents of the POST variable to the screen in a way that you will hopefully be able to understand.

I'm not sure about the error you are getting though as your query looks fine, however what may be a good idea to check is if all your parameters are being passed so have:


 $query = \"SELECT * FROM resourcelist 
            WHERE $filtercategory LIKE '%$filterterm%'\";
 echo $query;

and see what it comes up with

EamonnMac

Excellent. Will try that now and let you know how I get on.

EamonnMac

No joy, I'm clearly doing it wrong again. Here's what I've written:

    
$(function() {
        $('.button').click(function() {
            var data = \"category=\"+$(\"input#category\").val()+\"&\";
            data += \"resourcesubject=\"$(\"input#resourcesubject\").val()+\"&\";
            data += \"filter=\"$(\"input#filter\").val();

            $.ajax({
                type: \"POST\",     // We are goin to submit the form using the POST method
                url: \"results.php\",   // The AJAX call will look for the response from this URL
                data: category=category&resourcesubject=resourcesubject&filter=filter,      //pass in the POST data we defined in the data variable
                success: function(results) {    // If the AJAX request is successful
                    $('#tablediv').html(results);   // Put the returned data in the searchResults div
                }
            });
            return false;
        })
    });

Being honest, and sorry for being so thick, I still don't get the whole data thing. At all. Everything else I can read and understand, but here we seem to be establishing our data variable twice?

TT_Mark

Sorry, I may have confused you!

In the ajax section after data: just write the word data and this will pass the data variable into it

EamonnMac

I get easily confused! :D

Anyway, changed that, but nothing doing - not even an mySQL error msg.

Just so we're still on the same page, here's the code for the two pages so far:

Form page:


<!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\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />

<title></title>

	<link rel=\"stylesheet\" href=\"jqtransform/css/jqtransform.css\" type=\"text/css\" media=\"all\" />
	<link rel=\"stylesheet\" href=\"jqtransform/css/style.css\" type=\"text/css\" media=\"all\" />
	<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"all\" />
	
	<script src=\"http://www.google.com/jsapi\" type=\"text/javascript\"></script>
	<script type=\"text/javascript\">
	        google.load(\"jquery\", \"1.3.2\");
	</script>
    
	<script type=\"text/javascript\" src=\"jqtransform/js/jquery.jqtransform.js\"></script>
	
	<script language=\"javascript\">
		$(function(){
			$('form').jqTransform({imgPath:'jqtransform/css/img/'});
		});
	</script>

<script type=\"text/javascript\">
    $(function() {
        $('.button').click(function() {
            var data = \"category=\"+$(\"input#category\").val()+\"&\";
            data += \"resourcesubject=\"$(\"input#resourcesubject\").val()+\"&\";
            data += \"filter=\"$(\"input#filter\").val();

            $.ajax({
                type: \"POST\",     // We are goin to submit the form using the POST method
                url: \"results.php\",   // The AJAX call will look for the response from this URL
                data: data,      //pass in the POST data we defined in the data variable
                success: function(results) {    // If the AJAX request is successful
                    $('#searchResults').html(results);   // Put the returned data in the searchResults div
                }
            });
            return false;
        })
    });
</script>

</head>

<body>
<h1>Form 1</h1>
<div class=\"container\">
	<div id=\"form\">
		<form action=\"\" method=\"post\" class=\"jqtransform\"> 
		
		<div class=\"rowElem\">
			<label>You are Searching by Resource:</label>
			<select name=\"category\" id=\"filtercategory\"> 
				<option>Type</option>
				<option>Title</option>
				<option>Author</option>
			</select>
		</div>
		
		<div class=\"rowElem\">
			<label for=\"resourcesubject\">And Subject:</label>
			<select name=\"resourcesubject\" id=\"filtersubject\"> 
				<option></option>
				<option>Adult Education</option>
				<option>Anti-Bullying</option>
				...
				<option>Topic Pack</option>
				<option>Youth Education</option>
			</select>
		</div>
		
		
		<div class=\"rowElem\">
			<label for=\"filter\"><b>Enter Your Search Term Here:</b></label>
			<input type=\"text\" size=\"50\"  name=\"filter\" id=\"filterterm\">
			<input type=\"submit\" value=\"GO!\" class=\"button\"> 
		</div>
		
		
		</form>
		<ul>
			<li>To View all Resources available, leave the Subject Selection at 'blank' and leave the input bar Empty.</li>
			<li>To View all Resources available within a particular subject, simply select that subject and leave the input bar empty.</li>
			<li>To View all Resources available of a particular type, leave the Subject Selection at 'blank' and Enter 'Book', 'Journal', 'Video', or 'Manual' in the input bar.</li>
		</ul>
	</div><!--end form-->
	
	<div id=\"searchResults\">
	</div><!--end search results-->
	
</div><!--end container-->


</body>
</html>

and processor ('results.php')

<?php
$host = \"xxxx\";
$user = \"xxxx\";
$password = \"xxxx\";
$reqdatabase = \"xxxx\";

	$mysql = new mysqli($host,$user,$password,$reqdatabase) or die('you\'re dead');



var_dump($_POST);

		echo \"<table cellspacing='0' cellpadding='5' width='100%' id='results'>\" . \"<tr class='bold'><td>Resource</td><td>Subject</td><td>Title</td><td>Author</td><td>Amount in Stock</td></tr>\";

if ( $filtercategory == \"\" ) {
		echo 'mysql_error';
		
}elseif( $filtersubject == \"\" ) {
	$result = $mysql->query(\"SELECT * FROM resourcelist 
				WHERE $filtercategory LIKE '%$filterterm%'\") 
			 		or die('Oops! Something went wrong. Why don\'t you try again?');
}else {
	$result = $mysql->query(\"SELECT * FROM resourcelist 
				WHERE $filtercategory LIKE '%$filterterm%' AND Subject = '$filtersubject' \") 
			 		or die('Oops! Something went wrong. Why don\'t you try again?');
echo $query;
}

	


if($result) {
	
	while($row = $result->fetch_object()) {
		$title = $row->Title;
		$author = $row->Author;
		$amount = $row->resourceAmount;
		$subject = $row->Subject;
		$description = $row->Type;

		
		$author = htmlentities($author);
		$title = htmlentities($title);
		
		echo \"<tr>\" . \"<td class='nowrap'>$description</td>\" . \"<td class='nowrap'>$subject</td>\" . \"<td><b>$title</b></td>\" . \"<td>$author</td>\" . \"<td class='number'>$amount</td>\" . \"</tr>\";

	}
}
		echo \"</table>\";
?>

Thanks for all your help - seriously, not a clue otherwise!

EamonnMac

Any luck? Am I destined to wander forever in the land of two-page forms? Is there no hope doctor? :(

TT_Mark

According to Safari's Web Developer toolbar, there is an error on line 29 of resource.php

Any idea what that line is?

EamonnMac

Aha! Maybe there's hope for me yet! :D

It's this one:

            data += \"resourcesubject=\"$(\"input#resourcesubject\").val()+\"&\";

the second line of the fuction:

$(function() {
        $('.button').click(function() {
            var data = \"category=\"+$(\"input#category\").val()+\"&\";
            data += \"resourcesubject=\"$(\"input#resourcesubject\").val()+\"&\";
            data += \"filter=\"$(\"input#filter\").val();

TT_Mark

Well in that line you are missing a '+' sign between the

 \"resourcesubject=\"

and

$(\"input#resourcesubject\").val()

as you are concatenating two strings. So it should be

\"resourcesubject=\"+$(\"input#resourcesubject\").val()

EamonnMac

Excellent! So now it reads


            var data = \"category=\"+$(\"input#category\").val()+\"&\";
            data += \"resourcesubject=\"+$(\"input#resourcesubject\").val();
            data += \"filter=\"+$(\"input#filter\").val();

I added a + to the third line as well, cos without it nothing happened. Now it's reading an error:

array(2) { ["category"]=> string(9) "undefined" ["resourcesubject"]=> string(25) "undefinedfilter=undefined" }

but it is sort of working. The table headings were echo-ed even if it went pear shaped after that! Whoo Hoo! Thanks for sticking with it so far, by the way. Appreciate it.

I've tried messing around with the input ID's and Names, as that seems to be where it's falling down, but even when it's category=>category, subject=>subject, and filter=>filter, there's no joy - still 'undefined'. (Will this code work even if the value is left empty? ) When all inputs have values, the error persists.

TT_Mark

Right, well we seem to be getting somewhere now. The 'error' message is just the result of the var_dump($_POST) that is in your results.php file, so we know it's calling that file and returning the result to the screen, just not the right one. From the var_dump(), I can see another error on the data variable where this line:

data += \"resourcesubject=\"+$(\"input#resourcesubject\").val();

is missing an ampersand so should be

data += \"resourcesubject=\"+$(\"input#resourcesubject\").val()+\"&\";

The only other thing I think you need to do now is give your select options a value to pass on the form.

<select name=\"category\" id=\"filtercategory\"> 
            <option value=\"Type\">Type</option>
etc....etc....etc

You can also remove the var_dump() from your code.

EamonnMac

IT WORKS!!!!!!! :D :D :D

Really appreciate you sticking with it. Thanks bud, you are at One with the Quan. :ugeek:

TT_Mark

*Breathes huge sigh of relief*
:D

treehouse : what would you like to learn today?

Forums

[Solved] Form Not Returning Results when Coupled with JQuery