Order by using selected values from drop down list without using form

Question

Searched many options to find some easy solution where i can sort my results but din't find any. I want to order the displayed results by selected drop down values. I don't want to use "form". Want the other way to sort it.

<div class="col-lg-2">
<label class="margin-bottom:25px;" style="margin-left:75px;"> Sort by: <label>
</div>
<div class="col-lg-2">
    <select class="form-control" id="sortby" name="sortby">
        <option selected value="ID">ID</option>
        <option value="Name">Name</option>
        <option value="Source">Source</option>
        <option value="Location">Location</option>
    </select>
</div>

The above is my drop down list. The below is our $sql initial query :

$condition = implode(' AND ', $query);
$sql = " SELECT candidate.cand_number,candidate.cand_fname,candidate.cand_source,candidate_contact.cand_location FROM candidate ".$join.' where '.$condition;

Now we have tried to this so far ,but it seems something is wrong.

if($_POST['sortby']=="ID")
{
 $sql = " SELECT candidate.cand_number,candidate.cand_fname,candidate.cand_source,candidate_contact.cand_location FROM candidate ".$join.' where '.$condition." order by candidate.cand_number asc";
}

if($_POST['sortby']=="Name")
{
 $sql = " SELECT candidate.cand_number,candidate.cand_fname,candidate.cand_source,candidate_contact.cand_location FROM candidate ".$join.' where '.$condition." order by candidate.cand_fname asc";
}

if($_POST['sortby']=="Source")
{
 $sql = " SELECT candidate.cand_number,candidate.cand_fname,candidate.cand_source,candidate_contact.cand_source FROM candidate ".$join.' where '.$condition." order by candidate.cand_source asc";
}

if($_POST['sortby']=="Location")
{
 $sql = " SELECT candidate.cand_number,candidate.cand_fname,candidate.cand_source,candidate_contact.cand_source FROM candidate_contact ".$join.' where '.$condition." order by candidate.cand_location asc";
}

asc- Its for ordering in ascending order;

My jquery/ajax script-

<script>
        $(document).ready(function(){
            // Each time you change your sort list, send AJAX request
            $("#sortby").change(function(){
                $.ajax({
                    method: "POST",
                    url: "viewcandidate.php",
                    data: { sortby:$("#sortby").val() }
                })
                // Copy the AJAX response in the table
                .done(function( msg ) {
                    $("#list").html(msg);
                });
            });
        });
    </script>
    //even tried with $(window).load(function){.....but no result.

What is wrong as this is not working for me ? I dont want to use form. Suggest me some easy solution.

Answer 1

Firstly Here something wrong...

<select class="form-control" id="sortby" name="sortby">
    <option selected value="ID">ID</option>
    <option value="Relevance">Name</option><!-- Value ???-->
    <option value="Name">Source</option><!-- Value ???-->
</select>

would be like

<select class="form-control" id="sortby" name="sortby">
    <option selected value="ID">ID</option>
    <option value="Name">Name</option>
    <option value="Source">Source</option>
</select>

As you compare like $_POST['sortby']=="Name" and $_POST['sortby']=="Source"