Member Avatar for baloch123

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>
  • 2 Contributors
  • 8 Replies
  • 18K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol

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"

Member Avatar for baloch123

Thanks diafol

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

Member Avatar for diafol

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. :)

Member Avatar for baloch123

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.

Member Avatar for baloch123

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

Member Avatar for diafol

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.

Member Avatar for baloch123

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?

Member Avatar for diafol

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;
?>
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.