Как автоматически рассчитать цену и количество, а затем отобразить результат?AJAX PHP

Question

Я создаю этот простой проект, который включает в себя автоматический расчет цены и количества, а затем отображает его только после того, как два тега

это мой код в HTML:

<form method="post">
    <select name="days">
        <option value="2">2 days</option>
        <option value="3">3 days</option>
    </select>
    <select name="persons">
        <option value="2">2 persons</option>
        <option value="4">4 persons</option>
        <option value="6">6 persons</option>
        <option value="8">8 persons</option>
    </select>
</form>

Предположим, что в моей базе данных

день 2 == 1000

день 3 == 2000

это мой код в PHP:

if(isset($_POST['submit'])) {

    $days     = $_POST['days'];
    $persons  = $_POST['persons'];

    // get database of the 'price' from rates tbl 
    $sql = "SELECT * FROM rates WHERE duration='$days'";
    $res = mysqli_query($conn,$sql);

        $rates_tbl = mysqli_fetch_assoc($res);

    $rates = $rates_tbl['price'];

    $total_price = ($rates*$persons);

    echo 'total: ' . number_format($total_price) . '.00';

}

Должен ли я использовать этот тип AJAX ??Я даже не знаю, правильно ли это.

    <script type="text/javascript"> 
       $.ajax({  
            url:"autocalculate.php",  
            method:"POST"
       }) 
    </script>

Answer 1

Если целью является отображение значений на экране, вы можете использовать это.

<form method="post">
<select name="days">
    <option value="2">2 days</option>
    <option value="3">3 days</option>
</select>
<select name="persons">
    <option value="2">2 persons</option>
    <option value="4">4 persons</option>
    <option value="6">6 persons</option>
    <option value="8">8 persons</option>
</select>

и ваш скрипт jQuery

    var readyToCalculate = false;
var optionChanges = 0;
$('select').on('change', function (e) {
   if(readyToCalculate==true){
        calculate();
   } else {
    optionChanges ++;   
    if (optionChanges==2){
    readyToCalculate = true;
    calculate();
    }
   }
});

function calculate(){

var val1 =  parseInt($('select[name=days]').val());
var val2 =  parseInt($('select[name=persons]').val());
var result = (val1 + val2);
$(".results").html(result);
}