CODEWITHSUNDEEP
jqueryajaxsearch
Jeff Voss
Jeff Voss

Reputation: 3695

AJAX request using jQuery not posting form data

I'm trying to create a search form that posts the results queried from a MySQL database and I'm having trouble. The query is running correctly but the information entered in my form field is not 'posting' into the php document and actually getting through

    <form name="IDsearchform" action="">
    <input class='required digits' type="text" value="" maxlength='8' minlength='8' name="term" id="search" />
    </form>


$(document).ready(function(){
    //show loading bar
    function showLoader(){
        $('.search-background').fadeIn(200);
    }
    //hide loading bar
    function hideLoader(){
        $('#sub_cont').fadeIn(1500);
        $('.search-background').fadeOut(200);
    };
    $('#search').keyup(function(e) {
      if(e.keyCode == 13) {
        showLoader();
        $('#sub_cont').fadeIn(1500);
        $("#content #sub_cont").load("<?php bloginfo('template_directory'); ?>/searchID.php", hideLoader());
      }
      });     
    $(".searchBtn").click(function(){   
        //show the loading bar
        showLoader();
        $('#sub_cont').fadeIn(1500);         
        $("#content #sub_cont").load("<?php bloginfo('template_directory'); ?>/searchID.php", hideLoader());
    });
});

Upvotes: 0

Views: 688

Answers (2)

Pushkar
Pushkar

Reputation: 7580

What you need to do is fist serialize the form data and then send it across. Otherwise jquery does not send the form data. This is what you need to do -

$("#content #sub_cont").load("<?php bloginfo('template_directory'); ?>/searchID.php",$("#IDsearchform").serialize(), hideLoader());

This way your form post data is automatically send my jQuery.

Upvotes: 1

Denise
Denise

Reputation: 2005

You should include the extra parameter in your call to $.load():

$("#content #sub_cont").load("<?php bloginfo('template_directory'); ?>/searchID.php",
 {term:$(#search.value)}, hideLoader());

It's important to include the data, first of all. ;-) Second, you want to make sure that the data is an object so that jquery will do a POST instead of a GET.

Source

Upvotes: 0

Related Questions