Babyhay Babyhay - 23 days ago 3x
PHP Question

Show price after selected a element in drop list

Long ago, I search all over the web but I was unable to find a solution that suits me. I have to write what I want the forum to find help that suits me.

To begin, I have a drop-down which offers several choices. Here is the list

<Form name = "sellalcatel" form method = "post" action = "traitement.php" onchange = "return vefify ();">
<Select name = "Alcatel">
<Option> Please Select <option>
<Option value = "Alcatel-1230 + ZTE811"> Alcatel 1230 (ZTE 811) </ option>
<Option value = "Alcatel-1231"> Alcatel 1231 </ option>
<Option value = "Alcatel-351"> Alcatel 351 </ option>
</ Select>
<Li class = "last">
Country <input type = "text" size = "40">
<P> Name <INPUT NAME = "Name" SIZE = 40> </ p>
<P> Enter your Mail <input name = "email" placeholder = "" required> </ p>
<Input name = "button" type = "submit" value = "unlock"> </ input>
</ Li>
</ Form>

I want that after the selection of the drop-down list to display the price depending on the selection: for example, if the customer chose the first that should show $ 3 usd, if the second Usd $ 4, $ 2 for the third usd so on.

NB ~ I want to recover the money but simply display it without reloading the page, many of the sites proposed to make a BDD but my problem is that I do not know how to put the price in the database and also the attribute to its correct value in the dropdown.

So is there any other solutions to display the price or can I get help or a database like I want to aficher price?


To achieve the feature you want for your system, you can use Javascript. But for my answer, we will be using jQuery, which is a Javascript library.

Download jQuery first, then call it in your header:

<script src="jquery-1.9.1.min.js"></script> <!-- REPLACE THE SRC DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->

Option 1:

Lets create a div on where we can display the price:

<div id="result"></div>

Then lets add an id tag on your select:

<select name="Alcatel" id="alcatel">

If your options are fix, you can manually create conditions for each options on your javascript.

$(document).on("change", "#alcatel", function(){

    var alcatelval = $(this).val();

    if(alcatelval == 'Alcatel-1230 + ZTE811'){
        $("#result").text('USD 399');
    } else if(alcatelval == 'Alcatel-1231'){
        $("#result").text('USD 299');
    } else if(alcatelval == 'Alcatel-351'){
        $("#result").text('USD 169');


You can check this jsfiddle for example.

Option 2:

Put all of the options in your database, along with the corresponding prices:


phone_id | brand_id | model | price
    1    |     1    | 1230  |  399
    2    |     1    | 1231  |  299
    3    |     1    | 351   |  169


brand_id | brand_desc
    1    |  Alcatel
    2    |  Samsung
    3    |  Apple

Then fetch the options for your drop-down, where you can include the price along with the model and description, so you won't have to use Javascript in order to learn the price of a device:

<select name="Alcatel" id="alcatel">

    $stmt = $YourDBConnection->prepare("SELECT a.phone_id, a.model, a.price, b.brand_desc FROM phone_tb a LEFT JOIN brand_tb b ON a.brand_id = b.brand_id");
    $stmt->bind_result($phoneid, $model, $price, $brand);
        echo '<option value="'.$phoneid.'">'.$brand.'-'.$model.' - '.price.'</option>';