Reputation: 3025
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?
Upvotes: 1
Views: 2173
Reputation: 33628
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();
});
});
Upvotes: 2
Reputation: 11588
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.
Upvotes: 2