Clever Geek Handbook

Order using selected values ​​from a dropdown list without using a form

Looked for many options to find some simple solution where I can sort the results but cannot find them. I want to order the displayed results using selected dropdown values. I do not want to use a "form". Want a different way to sort.

<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 dropdown. Below is our initial $ sql 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 do this so far, but it looks like 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 to be ordered in ascending order;

My jquery / ajax script is -

<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's wrong because it doesn't work for me? I don't want to use a form. Please give me some easy solutions.

+3


source to share


5 answers


First, something is wrong here ...

<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>

will look 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>

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

+2


source


Try adding a space before the order.



$sql = " SELECT candidate.cand_number,candidate.cand_fname,candidate.cand_source 
FROM candidate ".$join.' where '.$condition." order by candidate.cand_number" ;
0


source


Your dropdown is like this:

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

When you publish the dropdown, the value will be the value = "..." attribute of the selected option, not the display text.

So your sort conditions are not good, it should be:

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

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

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


source


@CodeSniper .. try checking for some spaces. I'm sure you will get a solution with this.

0


source


I made a small example to show you how to use jQuery to dynamically reload your data. You will of course have to adapt this to your case.

In this example I am using my localhost with database = 'test' and a table named "candidate" with three columns: ID, Name and Source.

There are two files: index.php and request.php (in the same folder).

index.php file:

<?php
    // Database connection
    $db = mysqli_connect('localhost', 'root', '', 'test');
    // First request, on load
    $sql = "SELECT ID, Name, Source FROM candidate";
    $exe = $db->query($sql);
?>
<html>
    <head>
        <!-- Including jQuery -->
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    </head>
    <body>
        <div>
            <!-- Generate table on load -->
            <table border="1">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Source</th>
                    </tr>
                </thead>
                <tbody id="list">
                    <?php
                        while($row = mysqli_fetch_assoc($exe)) {
                            echo "
                                <tr>
                                    <td>".$row['ID']."</td>
                                    <td>".$row['Name']."</td>
                                    <td>".$row['Source']."</td>
                                </tr>";
                        }
                    ?>
                </tbody>
            </table>
            Sort by :
            <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>
        </div>
        <script>
            $(document).ready(function(){
                // Each time you change your sort list, send AJAX request
                $("#sortby").change(function(){
                    $.ajax({
                        method: "POST",
                        url: "request.php",
                        data: { sortby:$("#sortby").val() }
                    })
                    // Copy the AJAX response in the table
                    .done(function( msg ) {
                        $("#list").html(msg);
                    });
                });
            });
        </script>
    </body>
</html>

request.php file:

<?php

$db = mysqli_connect('localhost', 'root', '', 'test');

if(isset($_POST['sortby'])) {
    if($_POST['sortby'] == "ID") {
        $sql = "SELECT ID, Name, Source FROM candidate ORDER BY ID";
    } else if($_POST['sortby'] == "Name") {
        $sql = "SELECT ID, Name, Source FROM candidate ORDER BY Name";
    } else if($_POST['sortby'] == "Source") {
        $sql = "SELECT ID, Name, Source FROM candidate ORDER BY Source";
    }
} else {
    $sql = "SELECT ID, Name, Source FROM candidate";
}

$exe = $db->query($sql);

while($row = mysqli_fetch_assoc($exe)) {
    echo "
        <tr>
            <td>".$row['ID']."</td>
            <td>".$row['Name']."</td>
            <td>".$row['Source']."</td>
        </tr>";
}

?>

Demo: http://maxime-mettey.com/projects/dropdownajax/

Upload files: http://maxime-mettey.com/projects/dropdownajax/dropdownajax.zip

0


source






More articles:


All Articles