Use Dropdown selected value in Mysql query

Question

baloch123 0 Newbie Poster

10 Years Ago

Hi
I have dropdown list of domain names.Which is populated by mysql query(1st query).
And when dropdown value is selected that value is used in another mysql query(2nd query).
I've a submit button,when it is clicked.It is working perfectly.

But i want to remove submit button and i need a jquery solution,when user select a value from dropdown list.
Form is automatically submitted. and selected value should be used in 2nd query

Here is my code.

    <?php
    $sql = "SELECT * FROM `domains`";
    $result = mysql_query($sql);
    ?>
                  <form id="form" name="form" method="post">
        <?php

                  $domain = $_POST['domain'];


         ?>
                <select name='domain'>
                <?php while ($row = mysql_fetch_array($result)) {

                            echo "<option value='" . $row['id'] ."' >" . $row['name'] ."</option>";

                }
                ?></select>
                <button type ="submit" id="submit"> View Domain Details</button>
    </form>

      <form id="form1" name="form1" method="post">


    <div class="well">
        <table class="table">
          <thead>
            <tr>

              <th>Name</th>
              <th>Type</th>
              <th>ttl</th>
              <th>prio</th>
              <th>Content</th>
              <th style="width: 26px;"></th>
            </tr>
          </thead>
          <tbody>

          <?PHP

          $sql1 = "SELECT * FROM `records` WHERE `domain_id` ='".$domain."' ORDER BY `name` ASC";
          $result1 = mysql_query($sql1);
                while ($myrow = mysql_fetch_array($result1)) {

              ?>

            <tr>

              <td><?PHP echo $myrow["name"]; ?></td>
              <td><?PHP echo $myrow["type"]; ?></td>
              <td><?PHP echo $myrow["ttl"]; ?></td>
              <td><?PHP echo  $myrow["prio"]; ?></td>
              <td><?PHP echo  $myrow["content"]; ?></td>

            </tr>
     <?PHP
          }
              ?>

          </tbody>
        </table>
        </div>

dropdown jquery mysql php

2 Contributors
8 Replies
18K Views
1 Day Discussion Span
Latest Post 10 Years Ago Latest Post by diafol

All 8 Replies

diafol

10 Years Ago

Here's a very simple example to get you started:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<form>
<select id="first">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

<select id="second">
</select>
<div id="msg"></div>

</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $('#first').change(function()
    {
        populateSecond();
    });

    $('#second').change(function()
    {
        addToDB();
    });

    function populateSecond()
    {
        var first = $('#first').val();
        var req = $.post('getSelect2.php', {val: first});
        req.done(function(data)
        {
            $('#second').html(data);
            $('#msg').html('Second dropdown populated with data from option ' + first + ' in first dropdown');
        });

    }

    function addToDB()
    {
        var first = $('#first').val();
        var second = $('#second').val();
        if(second != "0")
        {       
            var req = $.post('addToDB.php', {val1: first, val2: second});
            req.done(function(data)
            {
                $('#msg').html(data);
            });
        }
    }
    //run this on page load
    populateSecond();

</script>

</body>
</html>

getSelect2.php

<?php
/*
    As a rule this would be a dynamic call to the DB to build up the option items based on $_POST['val']
*/
?>

<option value="0">--SELECT--</option>
<option value="1">Option 1 for First Box Option <?php echo $_POST['val'];?></option>
<option value="2">Option 2 for First Box Option <?php echo $_POST['val'];?></option>
<option value="3">Option 3 for First Box Option <?php echo $_POST['val'];?></option>

addToDB.php

<?php
    $first = (isset($_POST['val1'])) ? $_POST['val1'] : NULL;
    $second = (isset($_POST['val2'])) ? $_POST['val2'] : NULL;

    //do you db stuff

    echo "The values '$first' for first and '$second' for second were inserted to the DB";
?>

But there are many ways to skin a cat. :)

diafol

10 Years Ago

Ajax calls typically use 2 pages. A require/include file can actually be used for ajax too...

Here's an example:

main.php

<?php
    require "getDB.php";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<select id="first">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>
</form>

<table id="mytable">
<?php echo $dataTable;?>
</table>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $('#first').change(function()
    {
        var first = $('#first').val();
        var req = $.get('getDB.php', {dd: first, action: 'ajax'});
        req.done(function(data)
        {
            $('#mytable').html(data);
        });
    });
</script>
</body>
</html>

getDB.php

<?php
$ajax = false;
$dbValue = 1; //or the default value of your choice - matched to the default selection value of the dropdown

if(isset($_GET['action']) && $_GET['action'] == 'ajax' && isset($_GET['dd'])) 
{
    $dbValue = intval( $_GET['dd'] );
    $ajax = true;   
}

$conn = mysql_connect("localhost","root","");
mysql_select_db("daniweb",$conn);
$res = mysql_query("SELECT * FROM `table` WHERE id = $dbValue");
$dataTable = '';
while($data = mysql_fetch_assoc($res))
{
    $dataTable .= "<tr><td>" . $data['field1'] . "</td><td>" . $data['field2'] . "</td></tr>"; 
}

if($ajax) echo $dataTable;
?>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

diafol · Answer 1 · 2014-03-07T22:50:15+00:00

Include the jquery library
Create two functions based on the drop down change. They should contain an Ajax routine to:
1) change the 2nd dd content (for 1st dd change)
2) submit data from the form to the server (for 2nd dd change)

However, the second option can be very clumsy. If the default item is already selected and is the option you actually require, then you need to change it - so nonsense. So you may need to insert a 1st item such as "select an item below"

baloch123 0 Newbie Poster · Answer 2 · 2014-03-08T12:49:38+00:00

Thanks diafol

I am new to jquery.
Can you give an example?

baloch123 0 Newbie Poster · Answer 3 · 2014-03-08T17:43:49+00:00

I have one dropdown.And the value selected from that dropdown.
It is used in mysql query to display a data in tablular form not dropdown.

baloch123 0 Newbie Poster · Answer 4 · 2014-03-08T18:36:04+00:00

Thanks diafol.
I want this solution in one page.
I have only one dropdown,See my code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<form>

///Get data from database to populate this dropdown
<select id="dd">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

<table>
<thead>
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th style="width: 26px;"></th>
        </tr>
</thead>
      <tbody>
<tr>

/////query based on dropdown value
<td>Name</td>
<td>Type</td>
</tr>
</table>
<div id="msg"></div>

</form>

When user select value from dropdown.That value is used in Mysql query to display data in table,all this should be done in one page.
Currently i am using $_POST['dd']; to get this work done by submitting form.
I want a solution,that replace submit button,with automatic jquery method

diafol · Answer 5 · 2014-03-08T18:53:37+00:00

OK, well I believe that the code example should be able to get you going. Short of writing the whole thing for you, I don't know what exactly you want me to do.

baloch123 0 Newbie Poster · Answer 6 · 2014-03-08T19:04:03+00:00

I appreciate your efforts.
I want this done in one page.You are using three pages.

How do i send and get the value of jquery in PHP?

Use Dropdown selected value in Mysql query

Recommended Answers Collapse Answers

All 8 Replies

Recommended Answers