<form class="form" id="frm" name="frm">
    <div class="frm-overlay">
        <input data-id="593" id="male" name="gender" type="radio" value="Male" />
            <label for="male">Male</label>
        <input data-id="594" id="female" name="gender" type="radio" value="Female" />
            <label for="female">Female</label>
        <input checked="checked" data-id="0" id="all" name="gender" type="radio" value="All" />
            <label for="all">All</label>
        <select>
            <option data-id="0">Select a Category</option>
            <option data-id="0">All</option>
            <option data-id="601">Smart</option>
            <option data-id="602">Celebrity</option>
            <option data-id="603">Cute</option>
            <option data-id="598">Tall</option>
        </select>
    </div>
    <div class="btn">
        <button id="submit" type="submit">Show Names</button>
    </div>
</form>

[
    {
      "Name":"Aaliyah",
      "Female":594,
      "Celebrity":601
    },
    {
      "Name":"Abby",
      "Female":594
     },
     {
       "Name":"Abe",
       "Male":593,
       "Tall":598
      },
      {
         "Name":"Abigail",
         "Female":594,
         "Celebrity":601
      },
      {
         "Name":"Abu",
         "Male":593,
         "Tall":598
       },
       {
          "Name":"Ace",
          "Male":593,
          "Celebrity":601,
          "Cute":603
       }
    ]

$('#frm').submit(function(e){
    var cat_id = $('.frm-overlay > select > option:selected').data('id') || 0;
    var cat_title = $('.dnt-overlay > select > option:selected').text() || 'All';
    if (cat_id === 0)
    {
        cat_title = 'All';
    }

    var frm_url = $('.frm-overlay > select > option:selected').val();
    var gender = $('.frm-overlay > [name=gender]:checked').data('id') || 0;
    var gender_title = $('.frm-overlay > [name=gender]:checked').val() || 'All';
    var title = cat_title;
    var html = '';

    var params = '';

    if(window.innerWidth <= 320)
    {
        params = '?limit=18';
    }
    else
    {
        params = '?limit=21';
    }


    if (cat_id > 0)
    {
        params += '&' + 'cat_id=' + cat_id;
    }

    if (gender > 0 && cat_title != 'Gender Agnostic' && cat_title != 'Unisex' && cat_title != 'Male' && cat_title != 'Female')
    {
        title += ' ' + gender_title;
        params += '&' + 'gender=' + gender;
        if(cat_title == 'All')
        {
            frm_url += gender_title.toLowerCase() + '/';
        }
        else
        {
            frm_url += '?gender=' + gender_title.charAt(0).toLowerCase();
        }
    }

    title += 'Names';



    $.ajax({
      type : 'GET',
      dataType: "json",
      url: "frm.json" + params,
    })

       .done(function( data ) {



        $.each(data, function( index, value ) {
             if(index==21){
                return false;
             }
            html +='<li>' + value.Name + '</li>';
        });//each data

        cosole.log(.results-list > ul'.html(html));


});///submit function