html - Change Jquery AJAX post URL based on radio button -
i have product search box; can search via cartridge name or printer name. different sql queries, have made appropriate php files queries, having trouble getting jquery check value of radio button , modify post file based on radio button.
it needs check radio button update anytime user form of course.
any appreciated greatly!
here jquery:
$("#faq_search_input").watermark("begin typing 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; }); }); here html form:
<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 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>
to value of selected radio box can use $('input:radio[name="search_method"]:checked').val();
$("#faq_search_input").watermark("begin typing 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"); } } }); } }
Comments
Post a Comment