Jquery Ajax based search

Question

I want to do the search using ajax jquery js, for that I have taken this piece of code from here:-

Now i have some issues, I have this Javascript code:-

<script language="JavaScript" type="text/javascript">
<!--
function searchuser(cv) {
    $("#SearchResult").html('<img src="loader.gif"/>').show();
    var url = "elements/search-user.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $("#SearchResult").html(data).show();
    });
}
//-->
</script>

My Form:-

<label>
        <input onClick="generatenew();" type="radio" name="search_option" value="code" id="search_option_0">
        Customer Code</label></td>
      <td><label>
        <input onClick="generatenew();" type="radio" name="search_option" value="company" id="search_option_1">
        Customer Company</label></td>
      <td><label>
        <input onClick="generatenew();" type="radio" name="search_option" value="name" id="search_option_2">
        Customer Name</label></td>
      <td><label>
        <input onClick="generatenew();" type="radio" name="search_option" value="email" id="search_option_3">
        Customer Email</label>

This is my search textbox

<input type="text" name="searchuser_text" id="newInput" size="25" maxlength="25" class="inputbox MarginTop10">

This is my search button

<input onclick="javascript:searchuser('con1');" class="Button" name="search_user_submit" type="button" value="Search">

This is my Display Area :-

<div id="SearchResult">My default content for this page element when the page initially loads</div>

Now i want to know on click of button i am sending a data i.e. con1. I want to send two data to the searchuser function, one the selected option button value and the another one is the text in the textbox. After sending both the data to the function how will i get the data in the function? Do i need to change the function searchuser(cv) to function searchuser(cv, cvtwo).

Also while the $.post(url, {contentVar: cv} ,function(data) is sending only one data to the php file, how can i send both the data i.e. cv and cvtwo to the php file?

Answer 1

First of all you can modify the search function to something like this

$("input[name='search_user_submit']").click(function(){
var cv = $('#newInput').val();
var cvtwo = //similar to above
var data = 'cv='+ cv + '&cvtwo='+cvtwo; // sending two variables
$("#myDiv").html('<img src="loader.gif"/>').show();
    var url = "elements/search-user.php";
    $.post(url, {contentVar: data} ,function(data) {
       $("#SearchResult").html(data).show();
    });

});

Answer 2

Don't use inline functions, you can do it easily with jQuery's native bind functionality:

// Search when you click on submit
$(document).on('click', '.submit_button', function(){
   search('click_button');
});

// Search when you press enter
$(document).on('keypress', "#searchString", function(e){
    var c = (e.keyCode ? e.keyCode : e.which);
    if(c == 13) {
        search('pressed_enter');
    }
});

You can therefore collect the button value and pass it through to your search function:

function search(button_value) {
    $("#myDiv").html('<img src="loader.gif"/>').show();
    $.post("elements/search-user.php", { search_value: $('#newInput').val(), button_value: button_value} ,function(data) {
       $("#SearchResult").html(data).show();
    });
}

What you're doing is send off the form with two $_POST variables: one is the search string you've inputted in to the search box (called search_value) and the other is the button value.