Question

我正在尝试使用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>

Answer 1

正如评论中正确指出的那样，你可以用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;
});

Fiddle

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

使用php从tip计算器打印表

1 个答案: