Change Jquery AJAX post URL based on radio button

Question

I currently have a product search box; you can search via Cartridge Name or Printer Name. Those are different SQL queries, so I have made the appropriate PHP files for the queries, but I am having trouble getting Jquery to check the value of the radio button and then modify the post file based on that radio button.

It needs to check for the radio button update anytime a user does anything with the form of course.

Any help would be appreciated greatly!

Here is the 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;
        });
    });

Here is the HTML for the 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 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>

Answer 1

To get the value of the selected radio box you can use $('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");
                }
            }
        });
    }
}