CODEWITHSUNDEEP
phpjavascriptjquery
Alex Berg
Alex Berg

Reputation: 747

How to use different pages for form input and results using AJAX

So, I have a search form in a php page (top.php) which is an include for the site I'm working on, one php page where all the mySQL stuff happens and the results are stored in a variable and echoed (dosearch.php) and lastly a php page where the results are displayed in a div through jQuery (search.php). This is the javascript code: 

$(document).ready(function(){
    $('#search_button').click(function(e) {
        e.preventDefault(); 
        var searchVal = $('#search_term').attr('value');
        var categoryVal = $('#category').attr('value');
        $.ajax({
            type: 'POST',
            url: 'dosearch.php',
            data: "search_term=" + searchVal + "&category=" + categoryVal,
            beforeSend: function() {
                $('#results_cont').html('');
                $('#loader').html('<img src="layout/ajax-loader.gif" alt="Searching..." />');
                if(!searchVal[0]) {
                    $('#loader').html('');
                    $('#results_cont').html('No input...');     
                    return false;
                }   
            },
            success: function(response) {
                $('#loader').html('');
                $('#results_cont').html(response);
            }
        });
    });
});

The #search_term and #category fields are in top.php, the other divs (#loader and #results_cont) are in search.php. How would I go by in order to make the form submit and display the results in search.php from the top.php without problems? It works perfectly if the form and javascript are in search.php but I can't seem to separate those and make it work. What am I doing wrong?

PS. Sorry if I'm not clear enough, am at work, really tired. :(

Upvotes: 0

Views: 501

Answers (2)

Luca Filosofi
Luca Filosofi

Reputation: 31173

SPLITTING:

  <? include('functions-or-classes.php'); ?>

    <!DOCTYPE html>
    <html>
       <head>
      <title></title>

         <? include('js-script.php'); ?>

      </head>
      <body>

        <? include('results-div.php'); ?>

          <? include('search-form.php'); ?>

      </body>
    </html>

You should just respect this order then you can split the code in different pieces and include it into your main php file;

PS: peraphs your code should look like this:

<!DOCTYPE html>
<html>
   <head>
  <title></title>
  <script> 
$(function() {
    $('#search-form').submit(function(e) {
        e.preventDefault();
        var searchVal = $('#search_term').val();
        var query = $(this).serialize(); // search_term=lorem&category=foo
        if (!searchVal) {
            $('#results_cont').html('No input...');
        } else {
            $('#results_cont').html('<div id="loader">'+
                 '<img src="layout/ajax-loader.gif" alt="" /><div>');
            $.ajax({
                type: 'POST',
                url: 'dosearch.php',
                data: query,
                success: function(response) {
                    $('#results_cont').html(response);
                }
            });
        }
    });
});
  </script>
  </head>
  <body>
  <form id="search-form">
       <input type="text" id="search_term" name="search_term" />
       <select id="category" name="category">
         <option value="foo">foo</option>
         <option value="bar">bar</option>
       </select>
       <input type="submit" name="search_button" />
  </form>
  <div id="results_cont"></div>
  </body>
</html>

Upvotes: 1

Kimtho6
Kimtho6

Reputation: 6184

you can make your search_button redirect to your search.php an do the work when the pages is loaded instead of doing it on the click event.

and use $_GET['Search'] on the search page

and your url should look like this

/search.php?Search=1337

Upvotes: 0

Related Questions