2013-03-01 98 views
0

我現在有一個產品搜索框;您可以通過Cartridge Name或Printer Name進行搜索。這些是不同的SQL查詢,所以我已經爲查詢製作了合適的PHP文件,但是我無法讓Jquery檢查單選按鈕的值,然後根據該單選按鈕修改後文件。更改jQuery的AJAX後URL基於單選按鈕

它需要檢查的單選按鈕隨時更新用戶不具有當然的形式什麼。

任何幫助將不勝感激!

這裏是Jquery的:

  $("#faq_search_input").watermark("Begin Typing to Search"); 
     $("#faq_search_input").keyup(function() 
     { 
      var faq_search_input = $(this).val(); 
      var dataString = 'keyword='+ faq_search_input; 
      if(faq_search_input.length>1) 
      { 
       var search_method = $("#search_method").val(); 
       if(search_method == 'Cartridge'){ 
        $.ajax({ 
         type: "GET", 
         url: "<?php echo $site_Config_Url; ?>/resources/ajax-search.php", 
         data: dataString, 
         beforeSend: function() { 
          $('input#faq_search_input').addClass('loading'); 
         }, 
         success: function(server_response){ 
          $('#searchresultdata').html(server_response).show(); 
          $('span#faq_category_title').html(faq_search_input); 

          if ($('input#faq_search_input').hasClass("loading")) { 
           $("input#faq_search_input").removeClass("loading"); 
          } 
         } 
        }); 
       }else{ 
        $.ajax({ 
         type: "GET", 
         url: "<?php echo $site_Config_Url; ?>/resources/ajax-search2.php", 
         data: dataString, 
         beforeSend: function() { 
          $('input#faq_search_input').addClass('loading'); 
         }, 
         success: function(server_response){ 
          $('#searchresultdata').html(server_response).show(); 
          $('span#faq_category_title').html(faq_search_input); 

          if ($('input#faq_search_input').hasClass("loading")) { 
           $("input#faq_search_input").removeClass("loading"); 
          } 
         } 
        }); 
       } 
      }return false; 
     }); 
    }); 

這裏是窗體的HTML:

<form action="<?php echo $site_Config_Url; ?>controllers/product_Search_Process.Controllers.php" method="get"> 
<div style="width:885px;padding-left:15px;height:127px;padding-top:50px;margin-left:auto;margin-right:auto;background-image:url(<?php echo $site_Config_Url; ?>/display/img/layout/ink_and_toner_finder.png);"> 
    <div style="width:400px;height:108px;float:left;padding-top:7px;"> 
     <div style="width:400px;padding-left:20px;float:left;"> 
      <div style="float:left;"> 
       <select name="drop_1" id="drop_1" style="width:300px;"> 
        <option value="" selected="selected" disabled="disabled">Select Printer Brand</option> 
        <?php getTierOne(); ?> 
       </select> 
      </div> 
      <div style="width:80px;padding-left:5px;padding-top:5px;float:left;"> 
       <span id="wait_1"> 
        <img alt="Please Wait" src="<?php echo $site_Config_Url; ?>display/img/ui/ajax-loader.gif"/> 
       </span> 
      </div> 
      <div class="clear"></div> 
     </div> 
     <div class="clear"></div> 

     <span id="result_1" style="display: none;"></span> 
     <span id="result_2" style="display: none;"></span> 

    </div> 
    <div style="width:70px;height:115px;float:left;"></div> 
    <div style="width:400px;float:left;"> 
     <h2 style="padding-top:15px;padding-bottom:0;margin-bottom:0;padding-left:10px;">Search by Cartridge or Printer</h2> 
     <div class="clear"></div> 
     <div style="padding-left:10px;padding-top:10px;"> 
      <span style="padding-left:10px;"><input type="radio" name="search_method" value="Cartridge" checked>Cartridge</span> 
      <span style="padding-left:20px;"><input type="radio" name="search_method" value="Printer">Printer</span> 
      <div class="clear"></div> 
      <div style="padding-top:5px;"> 
       <div style="padding-top:5px;float:left;"> 
        <input type="text" name="search_text" style="float:left;width:230px;" id="faq_search_input"/> 
       </div> 
       <div style="padding-left:18px;float:left;"> 
        <input id="submit_right" type="submit" name="submit_right" value="Find Ink!" /> 
       </div> 
       <div class="clear"></div> 
      </div> 
     </div> 
     <div id="searchresultdata" class="faq-articles"> </div> 
    </div> 
</div> 

+0

TH是否只有變化的是網址? – 2013-03-01 15:50:30

回答

1

獲取所選的無線框的值,你可以使用$('input:radio[name="search_method"]:checked').val();

$("#faq_search_input").watermark("Begin Typing to Search"); 
$("#faq_search_input").keyup(function() { 
    updateResult(); 
    return false; 
}); 

$('input[name="search_method"]').on('click', updateResult) 

function updateResult(){ 
    var faq_search_input = $('#faq_search_input').val(); 
    var dataString = 'keyword='+ faq_search_input; 
    if(faq_search_input.length>1) 
    { 
     var search_method = $('input:radio[name="search_method"]:checked').val(); 

     $.ajax({ 
      type: "GET", 
      url: "<?php echo $site_Config_Url; ?>/resources/ajax-search" + (search_method == 'Cartridge'? '': '2') + ".php", 
      data: dataString, 
      beforeSend: function() { 
       $('input#faq_search_input').addClass('loading'); 
      }, 
      success: function(server_response){ 
       $('#searchresultdata').html(server_response).show(); 
       $('span#faq_category_title').html(faq_search_input); 

       if ($('input#faq_search_input').hasClass("loading")) { 
        $("input#faq_search_input").removeClass("loading"); 
       } 
      } 
     }); 
    } 
} 
+0

這工作完美!你能推薦最好的方式來添加一個監聽器到單選按鈕,如果用戶已經鍵入了某些東西並改變了單選按鈕,那麼查詢也會重新運行? – ihateartists 2013-03-01 16:01:28

+1

@ihateartists看到我更新的答案 – 2013-03-01 16:11:15

+0

嗯,我試過了,但它似乎並不奏效。我輸入'23',然後更改單選按鈕,但結果不會改變。我嘗試修改你的例子:'$('input [name =「search_method」]')。change(function(){ \t updateResult(); });'但是沒有工作 – ihateartists 2013-03-01 16:17:45