View original (French)

Filling input based on <select> in PHP MySQL

ookahh1 Posted messages 61 Registration date   Status Member Last intervention   -  
 daggoon -
```html
<select name="des" id="des" onchange="updatePrice()">
<?php
$con = mysql_connect("localhost","root","");
if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db("bd", $con);
$req = "SELECT des_mat, pu FROM materiel";
$ret = mysql_query($req) or die(mysql_error());

while ($col = mysql_fetch_assoc($ret)) {
echo '<option value="'.$col['des_mat'].'" data-price="'.$col['pu'].'">'.$col['des_mat'].'</option>';
}
?>
</select>
<input type="text" id="price" readonly="readonly" />

<script>
function updatePrice() {
var select = document.getElementById('des');
var priceInput = document.getElementById('price');
var selectedOption = select.options[select.selectedIndex];
var price = selectedOption.getAttribute('data-price');
priceInput.value = price;
}
</script>
```

5 answers

  1.
    ookahh1 Posted messages 61 Registration date   Status Member Last intervention   1
     
    Thank you Pitet for your response, but I can't display the prices from the input.

    The list of materials displays correctly, but when I select, the price doesn't show up.
    1
  2. Pitet Posted messages 2845 Status Member 530
     
    Hello,

    If the unit price is in the same SQL table, you can start by retrieving that column in your query: 

    $req = "SELECT des_mat, pu FROM materiel";

    Then you define the price for each line of your select with a custom attribute: 

    while ( $col = mysql_fetch_row ($ret) )
    {
    echo '<option value="' . $col[0] . '" data-pu="' . $col[1] . '">' . $col[0] . '</option>';
    }

    Finally, you use JavaScript to display the unit price when a line is selected. Here’s a complete example with jQuery: 

    <select id="des">
    <option value="1" data-pu="15">1</option>
    <option value="2" data-pu="30">2</option>
    <option value="3" data-pu="45">3</option>
    </select>

    <input type="text" id="pu" />

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
    $('#des').change(function() {
    var pu = $('#des option:selected').first().attr('data-pu');
    $('#pu').val(pu);
    });
    </script>

    Have a nice day
    0
  3. ookahh1 Posted messages 61 Registration date   Status Member Last intervention   1
     
    finalement I decided to leave the dropdown menu option to use a link.
    that is to say I display my data with my query and when I click on the name of the material it appears in a field, the same for the price.

    could you help me find something?
    0
  4. ookahh1 Posted messages 61 Registration date   Status Member Last intervention   1
     
    Thank you for your help Pitet. I finally found something with links in PHP and JavaScript 

    <input id="id_champ" name="des" >

     <?php
     
    $con = mysql_connect("localhost","root","");
     if (!$con)
     {
     die('Could not connect: ' . mysql_error());
     }
     
    mysql_select_db("db", $con);
    $req = "SELECT des_mat, pu FROM materiel " ;
    $ret = mysql_query ($req) or die (mysql_error ());
    while ( $col = mysql_fetch_row ($ret) )
    {

    echo '<a href="#" onclick="affiche(\''.$col[0].'\');">'.$col[0].'</a>'; 

    echo '<br>';
    }
    ?>


    then displaying with JavaScript 

    <script type="text/javascript"> function affiche(tag) { msgfield = document.getElementById("id_champ"); msgfield.value = tag ; msgfield.focus(); } </script>


    and it works!!!!!!!
    0