Filling input based on <select> in PHP MySQL
ookahh1
Posted messages
61
Registration date
Status
Member
Last intervention
-
daggoon -
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>
```
<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
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.
The list of materials displays correctly, but when I select, the price doesn't show up.
Hello,
If the unit price is in the same SQL table, you can start by retrieving that column in your query:
Then you define the price for each line of your select with a custom attribute:
Finally, you use JavaScript to display the unit price when a line is selected. Here’s a complete example with jQuery:
Have a nice day
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
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?
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?
Thank you for your help Pitet. I finally found something with links in PHP and JavaScript
then displaying with JavaScript
and it works!!!!!!!
<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!!!!!!!
It works with this code... just remove .first
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$('#des').change(function() {
var pu = $('#des option:selected').attr('data-pu');
$('#pu').val(pu);
});
</script>