Submit a value from dropdown without refresh then use the value re calculate a price

Question

I have a select option to add accessories to a product. What I want to do is recalculate the price without have to refresh the page. This is what I'v got so far:

  <form action="" method="post">
    <select name="option" onchange="this.form.submit()">
    <option value="15">Acc1</option>
    <option value"30">Acc2</option>
    <option value"45">Acc3</option>
    </select>
    </form>
$oldprice ='678';
    $option = $_POST['option'];
    $newPrice= $oldprice + $option;

This works great, however it has to refresh the page. Is there a way to recalculate the new price without having to refresh the page. And also use the option value in other places on the page for example

If ($_POST['option] == '15'){ \do something}

Any help welcome

Possible duplicate of [Update data on a page without refreshing](https://stackoverflow.com/questions/22577457/update-data-on-a-page-without-refreshing) — Madhawa Priyashantha, Jun 10 '17 at 12:23
@FastSnail Thanks for your reply I already looked at that page, however I don't see how I can use the submitted value without refreshing the page, . Sorry — Ria, Jun 10 '17 at 12:26

score 0 · Answer 1 · answered Jun 10 '17 at 12:32

0

You could use ajax or if the needed information is already in the page which it seems to be based on your example code, then you could change the onchange to be a function:

onchange='updatePrice()'

Sample function code:

function updatePrice(){
    var e = document.getElementsByName("option")[0];
    var accessory_value = e.options[e.selectedIndex].value;
    //additional code to update the price where
}

answered Jun 10 '17 at 12:32

Peter Schweitzer Jr

258
2
8

Thanks for your reply, however I'm still not sure how to get the actual price to recalculate. I tries to put this $newPrice = $oldprice + $option where it said //addition code here but that is not the right way as the price turns to 0 if there is no option selected – Ria Jun 10 '17 at 12:44
`$newPrice = $oldprice + $option` is PHP code not Javascript code. The additional code should be Javascript code that selects the element that displays the price and updating its value or innerHTML. You will want to keep the base price stored somewhere in case the user changes the accessory. – Peter Schweitzer Jr Jun 10 '17 at 12:52
The problems you probably guessed is that i'm not very familiar with Javascript, so to be honest I have not much of an idea where to start here. – Ria Jun 10 '17 at 13:00

score 0 · Answer 2 · edited Jun 10 '17 at 21:35

0

Hook onchange event in select tag.

Ex:

<select onChange="calculate(e)">
   // option here
</select>

*.js:

function calculate(e) {
    console.log(e.target.value);
}

edited Jun 10 '17 at 21:35

Nisse Engström

4,738
23
27
42

answered Jun 10 '17 at 13:57

Anjo Tadena

56
4

sorry that didn't work it didn't update to the new price – Ria Jun 10 '17 at 14:01

Submit a value from dropdown without refresh then use the value re calculate a price

2 Answers2