リフレッシュせずに値を送信してから値を再計算する

Question

商品にアクセサリーを追加する選択肢があります。私がしたいことは、ページをリフレッシュせずに価格を再計算することです。これは私が今までに得たものです：

<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; 

これは素晴らしいですが、ページを更新する必要があります。ページを更新することなく新しい価格を再計算する方法はありますか？ そしてまた、例えばページ上の他の場所でのオプションの値を使用し

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

歓迎は

Answer 1

が

あなたはAJAXを使用するか、または可能性がすべてのヘルプに必要な情報は、基づいているように見えるページ内にすでにある場合あなたの例のコードを、あなたは関数であることをonchangeを変更することができます：

onchange='updatePrice()' 

サンプル・機能コード：

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

Answer 2

selectタグのフックonchangeイベント。

例：

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

* .jsファイル：

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