使用 php 从小费计算器打印表格 - Printing a table from a tip calculator using php

Printing a table from a tip calculator using php

本文关键字：计算器打印表格 php 使用 | 更新日期: 2023-09-27

我正在尝试使用 php 将小费计算器的结果显示到表格中，当我输入账单金额和小费时，我希望它有一个两列和第一列三行的表格，我希望它显示这些结果-

账单金额：

，小费百分比：和总金额：小费计算器的结果显示在另一列中。

我只需要帮助使用 php 启动这段代码，以便我的结果显示在我输入的表格中，这是我到目前为止的代码：

 <!DOCTYPE html>
 <form id="calculator">
     <p>Amount: <input id="amount" /></p>
  <p>Tip Percentage: <input id="percentage" /></p>
  <hr />
<p>Tip: <input id="tip" disabled="disabled" /></p>
<p>Total: <input id="total" disabled="disabled" /></p>
<p><input type="submit" /></p>
</form>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
  function calculate () {
   var amount = $('#amount').val();
   var percentage = $('#percentage').val();
  var tip = amount * (percentage / 100);

   var total = Number(amount) + tip;
   $('#tip').val( tip.toFixed(2) );
   $('#total').val( total.toFixed(2) );

   return false;
   }
   $('#calculator').submit( calculate );
   </script>

正如注释中正确指出的那样，您可以使用jQuery（无需PHP）执行所有操作。

$('#calculator').submit(function()
{
   var amount = $('#amount').val();
   var percentage = $('#percentage').val();
   // do some basic validation
   if(!$.isNumeric(amount) || amount<0 ||
      !$.isNumeric(percentage) || percentage<0)
   {
       $('#prompt').html('Please enter correct values!');
       return false;
   }
   var tip = amount * (percentage / 100);
   var total = Number(amount) + tip;
   $('#tip').html(tip.toFixed(2));
   $('#total').html(total.toFixed(2));
   return false;
});

小提琴

我刚刚在您的输入中添加了一些基本验证，更正了一些布局（即 #tip和#total是结果，因此您可以在表单外部创建结果表），添加了显示错误的提示，并将val()更改为html()以更新结果。希望对您有所帮助。