Update and display Price without re-load

[Riparian]

Sorry but I am not very switched on with JS

 

Problem :

 

I wish to display the price of an item chosen from a drop down (select) menu on a php page without refreshing the page ?

 

Also, if the user adds another item from another select menu the price will update and display, again without refresh.

 

I believe this can be done with JS but have no idea where to start.

 

Any help greatly appreciated

[jl5501]

What you need for this is ajax functions in your javascript and a server side script to actually send the data (which will be php, or whatever your server-side language is).

 

The javascript will consist of a function to capture information from your dropdown, and trigger the server-side script, and another function to handle the results returned by the server-side script.

[Adam]

If it's a pretty small amount of items and you only want the price, you could just use something as simple as:

 

<script type="text/javascript">
var items = {
    'prod_1': 12.50,
    'prod_2': 1.25,
    'prod_3': 4.35,
    'prod_4': 3.33
};

function updatePrice(obj)
{
    if (items[obj.value] == undefined)
    {
        return false;
    }

    document.getElementById('price').innerHTML = items[obj.value];
}
</script>

<select onchange="updatePrice(this);">
    <option value="prod_1">Prod 1</option>
    <option value="prod_2">Prod 2</option>
    <option value="prod_3">Prod 3</option>
    <option value="prod_4">Prod 4</option>
</select>

£<span id="price">-</span>

 

..Generating the JS array with PHP.

[Riparian]

Thank guys this is of tremendous help.

 

would it be a simple matter to add the value from a second select table to the value of the first ?

[Riparian]

From what  MrAdam has put I have just duplicated the input but can someone tell me how to combine the result from the 2 select fields.

 

I can pass the values no prob but not getting a result.

 

 

<?php

$p1=12.5;

$p2=1.25;

$p3=4.50;

$p4=6.90;

 

$p6=12.5;

$p7=1.25;

$p8=4.50;

$p9=6.90;

?>

<script type="text/javascript">

var items = {

    'prod_1': <?=$p1?>,

    'prod_2': <?=$p2?>,

    'prod_3': <?=$p3?>,

    'prod_4': <?=$p4?>

}

var items2 = {

    'prod_6': <?=$p6?>,

    'prod_7': <?=$p7?>,

    'prod_8': <?=$p8?>,

    'prod_9': <?=$p9?>

};

 

function updatePrice(obj)

{

    if (items[obj.value] == undefined)

    {

        return false;

    }

 

 

    document.getElementById('price').innerHTML = (items[obj.value]);

 

var value1 = (items[obj.value]);

 

 

}

function updatePrice2(obj)

{

 

if (items2[obj.value] == undefined)

    {

        return false;

    }

 

document.getElementById('price2').innerHTML = (items2[obj.value]);

 

var value2 = items2[obj.value];

}

</script>

 

<select onchange="updatePrice(this);">

    <option value="prod_1">Prod 1</option>

    <option value="prod_2">Prod 2</option>

    <option value="prod_3">Prod 3</option>

    <option value="prod_4">Prod 4</option>

</select>

 

<select onchange="updatePrice2(this);">

    <option value="prod_6">Prod 6</option>

    <option value="prod_7">Prod 7</option>

    <option value="prod_8">Prod 8</option>

    <option value="prod_9">Prod 9</option>

</select><br />

<br />

<br />

<br />

 

 

$<span id="price">-</span>$<span id="price2">-</span><br />

<br />

<script language="JavaScript" type="text/javascript">document.write(value1+value2);</script>