how to pass radio button value with jquery & PHP?

Question

I am using this javascript and php code to pass value of input field on keyup . which is working fine. But i want to add some radio buttons and unable to pass their value. THe code I am using is :

HTML

<div class="header-right">
<input style="width:150px;" id="searchData" type="text"><br> 
<input type="radio" id="advsrch" name="advsrch" value="name">Name
<input type="radio" id="advsrch" name="advsrch" value="city">City
</div>

Javascript

$(document).ready(function(){

    var advsrch = "";
var selected = $("input[type='radio'][name='advsrch']:checked");
    advsrch = selected.val();


$('#results').html('<p style="padding:5px;">Enter a search term to start filtering.</p>');

  $('#searchData').keyup(function() {

 var searchVal = $(this).val();
      if(searchVal !== '') {

         $.get('search_data/search-data.php?searchData='+searchVal+advsrch, function(returnData) {
             if (!returnData) {
                $('#results').html('<p style="padding:5px;">Search term entered does not return any data.</p>');
            } else {
                $('#results').html(returnData);
            }
        });
    } else {
        $('#results').html('<p style="padding:5px;">Enter a search term to start filtering.</p>');
    }

    });

});

and then getting value in PHP

$param = $_GET["searchData"];
$advsrch = $_GET["advsrch"];

and here i am getting value of searchData but not advsrch

Answer 1

Updated,(shown below),tested and works 100%(screenshot submitted)

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <div class="header-right">
        <input style="width:150px;" id="searchData" type="text"><br>
        <input type="radio" id="advsrch" name="advsrch" value="name">Name
    </div>



    <script>
        $(document).ready(function(){

            var advsrch = "";
            var selected = $("input[type='radio'][name='advsrch']:checked");
            advsrch = selected.val();


            $('#results').html('<p style="padding:5px;">Enter a search term to start filtering.</p>');

            $('#searchData').keyup(function() {

                var searchVal = $(this).val();
                if(searchVal !== '') {

                    $.get('search_data/search-data.php',{ searchData:searchVal, advsrch:advsrch }, function(returnData) {
                        if (!returnData) {
                            $('#results').html('<p style="padding:5px;">Search term entered does not return any data.</p>');
                        } else {
                            $('#results').html(returnData);
                        }
                    });
                } else {
                    $('#results').html('<p style="padding:5px;">Enter a search term to start filtering.</p>');
                }

            });

        });
    </script>

Answer 2

The value of ' advsrch ' always seems to be undefined .

Put this following code right after advsrch = selected.val(); :

if( $('#advsrch').attr("checked") != 'checked'){
    advsrch=0;
}else{
    advsrch=1;
}

This will set advsrch to 0 if checkbox is not check, else the value will be 1.

Answer 3

You url does't pass advsrch parameter . You url would be

$.get("search_data/search-data.php?searchData="+searchVal+"&advsrch="+advsrc, function(returnData) {

Answer 4

now i am getting both values scripts like

HTML

<div class="header-right">
<input style="width:150px;" id="searchData" type="text"><br> 
<input type="radio" id="advsrch" name="advsrch" value="name">Name
<input type="radio" id="advsrch" name="advsrch" value="city">City
</div>

Javascript

$(document).ready(function(){

$('#results').html('<p style="padding:5px;">Enter a search term to start filtering.</p>');

  $('#searchData').keyup(function() {

  var advsrch = "";
var selected = $("input[type='radio'][name='advsrch']:checked");
  advsrch = selected.val();

 var searchVal = $(this).val();
      if(searchVal !== '') {

         $.get("search_data/search-data.php?searchData="+searchVal+"&advsrch="+advsrch, function(returnData) {
             if (!returnData) {
                $('#results').html('<p style="padding:5px;">Search term entered does not return any data.</p>');
            } else {
                $('#results').html(returnData);
            }
        });
    } else {
        $('#results').html('<p style="padding:5px;">Enter a search term to start filtering.</p>');
    }

    });

});