Grow your CSS skills. Land your dream job.

[Solved] Form Not Returning Results when Coupled with JQuery

  • # January 24, 2010 at 5:27 pm

    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:

    Code:

    Form 1





    • To View all Resources available, leave the Subject Selection at ‘blank’ and leave the input bar Empty.
    • To View all Resources available within a particular subject, simply select that subject and leave the input bar empty.
    • 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.

    And here’s the Processor:

    Code:
    < ?php
    echo "
    ” . “

    “;

    $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 “

    ” . “

    ” . “

    ” . “

    ” . “

    ” . “

    ” . “

    “;

    }
    }

    echo ““;
    ?>

    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.

    # January 24, 2010 at 5:59 pm

    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;

    Code:

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

    # January 24, 2010 at 7:59 pm

    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

    Code:
    $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!

    # January 25, 2010 at 5:20 am

    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:

    Code:
    $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

    Code:
    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:

    Code:
    $query = “SELECT * FROM resourcelist
    WHERE $filtercategory LIKE ‘%$filterterm%'”;
    echo $query;

    and see what it comes up with

    # January 25, 2010 at 11:01 am

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

    # January 25, 2010 at 11:14 am

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

    Code:
    $(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?

    # January 25, 2010 at 1:11 pm

    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

    # January 25, 2010 at 4:19 pm

    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:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Form 1





    • To View all Resources available, leave the Subject Selection at ‘blank’ and leave the input bar Empty.
    • To View all Resources available within a particular subject, simply select that subject and leave the input bar empty.
    • 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.


    and processor (‘results.php’)

    Code:
    < ?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 "

    Resource Subject Title Author Amount in Stock
    $description $subject $title $author $amount
    ” . “

    “;

    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 “

    ” . “

    ” . “

    ” . “

    ” . “

    ” . “

    ” . “

    “;

    }
    }
    echo ““;
    ?>

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

    # January 27, 2010 at 2:29 pm

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

    # January 27, 2010 at 4:19 pm

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

    Any idea what that line is?

    # January 27, 2010 at 8:40 pm

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

    It’s this one:

    Code:
    data += “resourcesubject=”$(“input#resourcesubject”).val()+”&”;

    the second line of the fuction:

    Code:
    $(function() {
    $(‘.button’).click(function() {
    var data = “category=”+$(“input#category”).val()+”&”;
    data += “resourcesubject=”$(“input#resourcesubject”).val()+”&”;
    data += “filter=”$(“input#filter”).val();
    # January 28, 2010 at 5:10 am

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

    Code:
    “resourcesubject=”

    and

    Code:
    $(“input#resourcesubject”).val()

    as you are concatenating two strings. So it should be

    Code:
    “resourcesubject=”+$(“input#resourcesubject”).val()
    # January 28, 2010 at 7:33 am

    Excellent! So now it reads

    Code:
    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:

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

    # January 28, 2010 at 11:35 am

    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:

    Code:
    data += “resourcesubject=”+$(“input#resourcesubject”).val();

    is missing an ampersand so should be

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

    Code:

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

    # January 28, 2010 at 12:05 pm

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

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

    Viewing 15 posts - 1 through 15 (of 16 total)

    You must be logged in to reply to this topic.

    Projects

    Colophon

    CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.

    *May or may not contain any actual "CSS" or "Tricks".

    Resource Subject Title Author Amount in Stock
    $description $subject $title $author $amount