ページを更新せずに3つの入力フィールドからデータを取得して価格を計算する

Question

誰かが私を助けてくれますか？私はこれは私がこれまでに得たものですが、入力されたHTMLフォームフィールドがビットこの

のように見えます

を働いていない価格を計算し、ページに

を更新せず、入力フィールドに自動的にそれを追加する必要があります

<form method="post" action="<? echo $_SERVER['PHP_SELF']; ?>"> 
    <b>Airport:</b> &nbsp;&nbsp;&nbsp;&nbsp; 
    <select size="1" name="arrivalairport" id="airport"> 
     <option value=""></option> 
      <? 
      $airportresult = mysql_query("SELECT * FROM ms_airport_airport WHERE LENGTH (ms_airport_airport_name) > 1 ORDER BY ms_airport_airport_name"); 
      if (mysql_num_rows($airportresult) > 0) { 
       while (($airsubrow = mysql_fetch_assoc($airportresult)) !== false){ 
        $airportname = $airsubrow['ms_airport_airport_name']; 
        echo '<option value="'.$airportname.'">'.$airportname.'</option>'; 
       } 
      } 
      ?> 
     </select> 
     <p> 
     <b># Passengers:</b>&nbsp;&nbsp;&nbsp;&nbsp; 
     <input type="text" name="arrivalnrpass" id="arrivalnrpass" size="3"> 
     <p> 
     <b>Babyseat:</b>&nbsp;&nbsp;&nbsp;&nbsp; 
     <input type="text" name="arrivalbaby" id="arrivalbaby" size="3"> 
     <p> 
     <b>Price:</b>&nbsp;&nbsp;&nbsp;&nbsp; 
     <input type="text" name="arrivalprice" id="arrivalprice" size="5"> &euro; 
     <p> 
     <input class="button" type="submit" value="Add" name="action"> 
</form> 

、これは私がAJAX

<script> 
    $(document).ready(function(){ 
     $('#airport').change(function(){ 
      var airport_name = $(this).val(); 
     });  
    }); 

    $('#arrivalnrpass').keyup(function(){ 
     var arrivalnrpass = $(this).val(); 
    }); 

    $('#arrivalbaby').keyup(function(){ 
     var arrivalbaby = $(this).val(); 
    }); 

    if (airport_name == 'Alicante' && arrivalnrpass < 4 && arrivalbaby == 0) { 
     var price = 40 
     $('#arrivalprice').val(price); 
    } 
}); 

    </script> 

として、私は、誰かが私を助けることを願ってきたものである - 感謝

Answer 1

あなたはこれを試すことができます。

$(document).ready(function(){ 
 

 
var airport_name; 
 
var arrivalnrpass = 0; 
 
var arrivalbaby = 0; 
 

 
     $('#airport').change(function(){ 
 
      airport_name = $(this).val(); 
 
     }); 
 

 
    $('#arrivalnrpass').on('input', function(){ 
 
     arrivalnrpass = $(this).val(); 
 
     calculate(); 
 
    }); 
 

 
    $('#arrivalbaby').on('input', function(){ 
 
     arrivalbaby = $(this).val(); 
 
     calculate(); 
 
    }); 
 
    
 
    $('#arrivalprice').on('focus', function(e) { 
 
    \t calculate(); 
 
    }) 
 
    
 
    function calculate() { 
 
    \t $('#arrivalprice').val(parseInt(arrivalnrpass) + parseInt(arrivalbaby)); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" action="#"> 
 
    <b>Airport:</b> &nbsp;&nbsp;&nbsp;&nbsp; 
 
    <select size="1" name="arrivalairport" id="airport"> 
 
     <option value="">Airport 1</option> 
 
     <option value="">Airport 2</option> 
 
     <option value="">Airport 3</option> 
 
     </select> 
 
     <p> 
 
     <b># Passengers:</b>&nbsp;&nbsp;&nbsp;&nbsp; 
 
     <input type="number" name="arrivalnrpass" id="arrivalnrpass" size="3"> 
 
     <p> 
 
     <b>Babyseat:</b>&nbsp;&nbsp;&nbsp;&nbsp; 
 
     <input type="number" name="arrivalbaby" id="arrivalbaby" size="3"> 
 
     <p> 
 
     <b>Price:</b>&nbsp;&nbsp;&nbsp;&nbsp; 
 
     <input type="number" name="arrivalprice" id="arrivalprice" size="5"> &euro; 
 
     <p> 
 
     <input class="button" type="submit" value="Add" name="action"> 
 
</form>

は、この情報がお役に立てば幸い！

Answer 2

私の主な問題は、価格を計算するためのJavascript（if文）が最初に実行されたときだけであることです。 .change（）または.keyup（）イベントが実行されるたびに呼び出される必要があるため、関数にラップして呼び出します。

function calculatePrice() { 
    if (airport_name == 'Alicante' && arrivalnrpass < 4 && arrivalbaby == 0) { 
     var price = 40 
     $('#arrivalprice').val(price); 
    } 
} 

「これが更新されました」の各機能からそれを呼び出してください。

#arrivalpriceを変更することはできません。フォーム上で<p>タグを使用することはできますが、それが送信できない場合があります。つまり、簡単なハッキングで簡単に修正できるため、このページに視覚的に表示されている価格を処理コードで信頼するのは賢明ではありません。今誰かがしなければならないことは、その価値を変えることであり、突然彼らはかなり甘い割引を得ています。だから、あなたがここでやっているように、他の答えからそれを計算する方が良い。

あなたは、入力として、それを維持し、それが読み取り専用に、readonly属性を使用したい場合：https://stackoverflow.com/a/3676132/6855449

があなたの$（ドキュメント）.ready（）はまた、唯一の$（ '＃空港に及びます'）.change（）を実行すると、最終的に無関係な中カッコがセットされます。私はそれを修正したいと思っています。