CODEWITHSUNDEEP
ajax
madcoder
madcoder

Reputation: 35

sending values to database and return the results to same page with Ajax onclick

can one help on how can i submit the form to search page script on index page and return the results of search script on specific DIV id search_results we out going to the search.php or refresh the index page using AJAX onClick Am not good in Ajax but i try my best to come out with the following code which does what am looking for but is loading the page we out clicking anything i need a user to trigger the event when he/she enters what they are looking for? Any answer or suggestion is greatly appreciate

<script language="javascript" src="js/jquery-8.js"></script>
<script language="javascript">
        var grbData = $.ajax({
        type : "GET",
        url : "search_m.php",
        data : "q=",
        success: function (html) {
        $("#more-info").html(html);
        }
});
</script>

<div id="more-info"></div>

I wish the above code to use this following htm form

<form method="get" style="width:230px; margin:0 auto;" id="find">
<input type="image" src="images/searchthis.png" id="search_btn">
<input type="text" id="search_toggle" name="q" placeHolder="type to start searching">
</form>

Upvotes: 1

Views: 269

Answers (1)

Sean Kenny
Sean Kenny

Reputation: 1636

Add a click event to the search_btn element.

$('#search_btn').click(function(e) {
  e.preventDefault();

  $.ajax({
    type : "GET",
    url : "search_m.php",
    data : $('#search_toggle').val(),
    success: function (html) {
      $("#more-info").html(html);
    }
});

HTH.

Upvotes: 1

Related Questions