JQuery와 아약스 기반 검색

Question

내가, 아약스 JQuery와 JS를 사용하여 검색을 수행 할

그 I have taken this piece of code from here에 대한 : -

이제

내가 몇 가지 문제를 가지고 내가 가진이 자바 스크립트 코드 : -

<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> 

내 양식 : -

이 내 검색 텍스트 상자

<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> 

입니다

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

이

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

이 내 표시 영역 내 검색 버튼입니다 : -

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

지금 나는 데이터 즉 con1를 전송하고 버튼의 클릭에 알고 싶어요. 두 개의 데이터를 searchuser function에 보내고 하나는 선택한 옵션 버튼 값이고 다른 하나는 textbox의 텍스트입니다. 함수에 데이터를 모두 보낸 후 함수의 데이터를 어떻게 가져 옵니까? function searchuser(cv)을 function searchuser(cv, cvtwo)으로 변경해야합니까?

또한 $.post(url, {contentVar: cv} ,function(data)이 하나의 데이터 만 PHP 파일로 보내는 동안 데이터 (예 : cv 및 cvtwo)를 php 파일로 보낼 수 있습니까?

Answer 1

먼저이

$("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

, 당신은 jQuery의 기본 바인딩 기능을 쉽게 할 수있는 인라인 함수를 사용하지 마십시오 :

// 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'); 
    } 
}); 

당신은 그러므로 버튼 값을 수집하고 검색 기능을 통해 전달할 수 있습니다

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(); 
    }); 
} 

두 개의 $ _POST 변수를 사용하여 양식을 보냅니다. 하나는 검색 상자에 입력 한 검색 문자열 (search_value)이고 다른 하나는 버튼 값입니다. 모든