View original (French)

Filling input based on <select> in PHP MySQL

ookahh1 -  
```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 Author
    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
    1. Pitet
      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
      1. ookahh1 Author
        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
        1. ookahh1 Author
          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