从 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) {
    	calculate();
    })
    
    function calculate() {
    	$('#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);
    }
} 

现在从您的每个“this-thing-has-been-updated”函数中调用它。

您可能想让#arrivalprice 无法更改。您可以在表单上使用<p> 标记，但这会阻止它提交 - 也就是说，在处理代码中相信此页面上直观显示的价格是不明智的，因为可以通过一些简单的黑客攻击轻松修改。现在，人们所要做的就是改变这个价值，突然之间，他们得到了相当不错的折扣。所以你最好从其他答案中计算出来，就像你在这里做的那样。

如果您确实想将其保留为输入并将其设为只读，请使用readonly 属性：https://stackoverflow.com/a/3676132/6855449

您的 $(document).ready() 也仅在 $('#airport').change() 上扩展，因此您在末尾有一组无关的大括号。我猜你想解决这个问题。