CODEWITHSUNDEEP
phpjqueryajaxsearchpost
Noise
Noise

Reputation: 34

Ajax search without "submit" button

I have a search form:

<form action="search.php" method="post" name="form" id="form" onsubmit="return false;">
        <input name="search" type="text" id="search">
        <input name="name" type="text" id="name">
    <select name="car" id="car">
      <option value="audi">AUDI</option>
          <option value=bmw">BMW</option>
          <option value="mini">MINI</option>
        </select>
    <select name="year" id="year">
      <option value="2000">2000</option>
          <option value="2005">2005</option>
          <option value="2006">2006</option>
        </select>
</form>

And search.php

<?php
$search = $_POST['search'];
$search = addslashes($search);
$search = htmlspecialchars($search);
$search = stripslashes($search);
$year = $_POST['option'];
$year = addslashes($year);
$year = htmlspecialchars($year);
$year = stripslashes($year);
if($search == '')
    exit("Enter name");
elseif(!preg_match("/^[a-zа-я0-9]+$/ui", $search))  
    exit("Incorrectly");
include 'dbsetting.php';

$mysqli->set_charset("utf8"); 
$query = "SELECT * FROM cars WHERE (type LIKE '%".$search."%' OR name LIKE '%".$search."%' OR class LIKE '%".$search."%') AND year = '".$year."'";

Live search works. Using AJAX code:

$(function() {
            $("#search").keyup(function(){
                var search = $("#search").val();

                     $.ajax({
                        type: "POST",
                        url: "search.php",
                        data: {"search": search},
                        cache: false,                       
                        success: function(response){
                                    $("#res").html(response);
                                 }
                     });
                     return false;
            });
        });

input name="search" working correctly, but I can not add to search another select and more inputs. How to add to ajax code some inputs and select and how to save and add to search results in search.php?

I'm sorry for my English.

Upvotes: 0

Views: 4150

Answers (4)

Abhijeet Dange
Abhijeet Dange

Reputation: 133

you can post your fields either name value pair format like:-

var search = $("#search").val();
var name = $("#name").val();
var car = $("#car").val();
var year = $("#year").val();

And user that query string while sending ajax request as data field.

data: {"search": search, "name":name, "car": car, "year":year},

Or you can use $( "form" ).serialize(); to convert all forms field automatically into name value pair like.

var my_data = $( "form" ).serialize();
// user that variable in your ajax call.
data: my_data,

Upvotes: 2

SajithNair
SajithNair

Reputation: 3867

$(function() {
            $("#search").keyup(function(){
                var search = $("#search").val();
                var name = $("#name").val();
                var car = $("#car").val();
                var year = $("#year").val();

                     $.ajax({
                        type: "POST",
                        url: "search.php",
                        data: {"search": search, "name":name, "car": car, "year":year},
                        cache: false,                       
                        success: function(response){
                                    $("#res").html(response);
                                 }
                     });
                     return false;
            });
        });

Upvotes: 0

Lal krishnan S L
Lal krishnan S L

Reputation: 1745

Try jquery .on() function

$(function() {
            $("#search").on('keyup',function(){
                var search = $("#search").val();

                     $.ajax({
                        type: "POST",
                        url: "search.php",
                        data: {"search": search},
                        cache: false,                       
                        success: function(response){
                                    $("#res").html(response);
                                 }
                     });
                     return false;
            });
        });

Upvotes: -1

Dimag Kharab
Dimag Kharab

Reputation: 4519

Try this , use jquery bind 

$('#search, #car, #year').bind( "keyup change", function() {
  //put your ajax here
});

Upvotes: 1

Related Questions