Input text value based on select option value loaded dynamically from sql db

Question

I have a form that has a select field that loads the options dynamically from a db result query. Here is what the code looks like. See the description text input afterwards? I need the code to return the description of the item selected under productID. How do I go about this? Thanks very much for all replies.

    <div class="row-fluid">
    <div class="span3">
        <label>SKU</label>
        <?php  echo '<select name="ITEM" id="user" class="textfield1">';
        while($res= mysql_fetch_assoc($sql))
        {
        echo '<option value="'.$res['productID'].'">';
        echo $res['SKU'] ; 
        echo'</option>';
        }
        echo'</select>';

        ?>
    </div>
</div>
<div class="row-fluid">             
    <div class="span3">
        <label>Description</label>
        <input type="text" name="description" value=""/>
    </div>
</div>

your page is refreshing? or you need to load it with ajax? jQuery maybe? — Mihai Matei
– Mihai Matei, Commented Nov 2, 2012 at 7:16
If i am right, you need the description value to be filled up with the corresponding description of the productID the user selects. — Ravi
– Ravi, Commented Nov 2, 2012 at 7:16
Please, don't use mysql_* functions in new code. They are no longer maintained and the deprecation process has begun on it. See the red box? Learn about prepared statements instead, and use PDO or MySQLi - this article will help you decide which. If you choose PDO, here is a good tutorial. — tereško
– tereško, Commented Nov 2, 2012 at 9:10

Mihai Matei · Accepted Answer · 2012-11-02 08:09:52Z

1

You can do this in 2 ways:

First way is by redirecting the page having a $_GET parameter which will contain the product id:

<div class="row-fluid">
    <div class="span3">
        <label>SKU</label>
        <?php  echo '<select name="ITEM" id="user" class="textfield1" 
                      onchange="document.location=\'my-page.php?pid=\' + this.value">';
        while($res= mysql_fetch_assoc($sql))
        {
          echo '<option value="'.$res['productID'].'"';
          // LATER EDIT
            if(isset($_GET['pid']) && $_GET['pid'] == $res['productID'])
              echo 'selected="selected"';
          // END LATER EDIT
          echo '>';
          echo $res['SKU'] ; 
          echo'</option>';
        }
        echo'</select>';

        ?>
    </div>
</div>
<div class="row-fluid">             
    <div class="span3">
        <label>Description</label>
        <?php
            if(isset($_GET['pid']) && is_numeric($_GET['pid'])) {
                $sql = mysql_query("SELECT description 
                                    FROM products 
                                    WHERE product_id='" . mysql_real_escape_string($_GET['pid']) . "'");
                $row = mysql_fetch_assoc($sql);
            }
        ?>
        <input type="text" name="description" value="<?=$row['description']?>"/>
    </div>
</div>

Second way is to have an ajax call and fill description input dynamically, without refresing the page

// this is the JS code
$(document).ready(function(){
   $('#user').change(function(){
       $.POST("my-ajax-call-page.php",
               {pid: $("#user").val()},
               function(data){
                   $('input[name="description"]').val(data.description);
               }, "json");
   });
});

and your my-ajax-call-page.php should be like this:

<?php
    include("mysql-connection.php");

    $sql = mysql_query("SELECT description 
                        FROM products 
                        WHERE product_id='" . mysql_real_escape_string($_POST['pid']) . "'");
    $row = mysql_fetch_assoc($sql);

    echo json_encode("description" => $row['description']);
?>

You will find many examples and documentation for using jQuery library on jQuery library website

edited Nov 2, 2012 at 8:09

answered Nov 2, 2012 at 7:26

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Renee Cribe Over a year ago

Thanks very much @Matei Mihai. I opted for the refresh $_GET option as I understood it more. Sorry I am still learning so I'll look into AJAX later on. My only problem now is that after the page refreshes, the productID reverts to the first value in the option list but the product description is correct based on the selected productID before the refresh.

Mihai Matei Over a year ago

I've edited my answer, so search for LATER EDIT code. Welcome! :)

sachin jat · Accepted Answer · 2012-11-02 07:37:23Z

0

<div class="row-fluid">
    <div class="span3">
        <label>SKU</label>
        <?php  echo '<select name="ITEM" id="user" class="textfield1" onchange="showDesc()">';
        $desHTML = "";
        echo "<option value='0'>Please select</option>"
        while($res= mysql_fetch_assoc($sql))
        {
        echo '<option value="'.$res['productID'].'">';
        echo $res["SKU"] ; 
        echo'</option>';
        $desHTML .="<div class'descBox' id='".$res['productID']."' style='display:none'>".$res['description']."</div>";
        }
        echo'</select>';

        ?>
    </div>
</div>
<div class="row-fluid">             
    <div class="span3">
        <label>Description</label>
        <?php echo $desHTML; ?>
    </div>
</div>

Now create one js function and call on onchange of select box. Js function Hint:

$(".descBox").hide(); $("#"+selectedItemValue).show();

Let me know if you need any help for JS function.

answered Nov 2, 2012 at 7:37

sachin jat

212 bronze badges

3 Comments

Buksy Over a year ago

You shouldnt insert div tags insert select. Also your div id is number, id (as name of any other variable) should start with character. To you this, at least generate your divs into php string, which you will print after your select and make their ids as id="description'.$res['productID'].'"

Renee Cribe Over a year ago

@sachin jat. Thanks very much for the reply. I am still learning so I opted for the onchange refresh code by Matei. I will definitely try your code though as soon as I figure out how to code the JS function. =)

sachin jat Over a year ago

function showDesc(){ $(".descBox").hide(); $("#"+$("#user").val()).show(); } Please include jQuery lib files. :)

Buksy · Accepted Answer · 2012-11-02 07:41:10Z

0

You haven't shown us your SQL query, but I assume that you have a column named description and you are selecting this column in your query too.

So then, you can use jQuery to insert description of selected item to input

<div class="row-fluid">
<div class="span3">
    <label>SKU</label>
    <?php  echo '<select name="ITEM" id="user" class="textfield1">';

    $js_array = array(); // This variable will contain your Javascript array with descriptions
    while($res= mysql_fetch_assoc($sql))
    {
    echo '<option value="'.$res['productID'].'">';
    echo $res['SKU'] ; 
    echo'</option>';

    // Fill your array with descriptions; ID of item will be the index of array
    $js_array[$res['productID']] = $res['description'];
    }
    echo'</select>';
    ?>
    <script>
    var description;
    <?php
    foreach($js_array as $description => $id)
    {
      echo("description['".$id."'] = '".$description."';\n");
    }
    ?>

    $(document).ready(function(){
      $('#user').change(function(){
        $("#description").val(description[$('#user').val()]);
      })
    });
    </script>
</div>
</div>
<div class="row-fluid">             
    <div class="span3">
        <label>Description</label>
        <input type="text" name="description" id="description" value=""/>
    </div>
</div>

Be sure to not forget to add id attribute to your input type="text"

answered Nov 2, 2012 at 7:41

Buksy

12.4k9 gold badges65 silver badges70 bronze badges

2 Comments

Renee Cribe Over a year ago

Thank you very much for the reply. I have opted to go with Matei's GET refresh code as I am still trying to learn (total noob) and it was the code I understood easiest. I will definitely experiment on your code though =)

Buksy Over a year ago

No problem, this code may look little complex at first sight but its very easy too. This way you can update value of input type=text without refreshing the site and without extra php file. But if you have many items in the select (hundreds+) then Matei's second way will be best solution. Let me know in case of any questions

Collectives™ on Stack Overflow

Input text value based on select option value loaded dynamically from sql db

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related