Populate text field based on result of dropdown selection - both with php mysql ajax requests

Question

I have a form with a dropdown select menu of products and a text field that should contain the price of the product. The dropdown menu is dynamically populated from a mysql database via php. I need for the text field to automatically be filled with the price associated with that product (in the same row in the database) once the product is selected from the dropdown list.

What I have so far is:

<label>Product or Service</label>
    <select name="product" required>
        <option value=""></option>

            <?php $productSql = "SELECT product_id, product, price FROM products ORDER BY product desc";

                  $productResult = mysql_query($productSql, $link);

                  while($productRow = mysql_fetch_assoc($productResult)){?>

                  <option value="<?php echo $productRow['product_id'];?>"><?php echo $productRow['product']; ?></option><?php } ?>
    </select>

<label>Price</label>
    <input type="text" name="price">

What is your problem/issue? There are a lot examples of ajax on select change here on SO. Please show your attempted code. — Sean
– Sean, Commented Aug 14, 2014 at 15:46

jcaron · Accepted Answer · 2014-08-14 15:49:41Z

Add the information as a data-price attribute to the option.

Then you can get the currently selected option of the <select>, get the corresponding data-price attribute, and update the text field with it.

It's easier with jQuery:

$('select[name="product"]').change(function()
    {
         $('#textfieldid').val($('select[name="product"] option:selected').data('price'));
    }
);

but you can certainly achieve the same result using pure JS if needed.

NB: you want to correctly escape any text you output. The echo $productRow['product']; can lead to weird results if it contains any & or <.

Collectives™ on Stack Overflow

Populate text field based on result of dropdown selection - both with php mysql ajax requests

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related