Question

<html>
  <body>
    <form class="totalpayment">
      <input class="paid" type="text" name="numberOne" />
      <input class="due" type="text" name="numberTwo" />
      <button>Add</button>
    </form>
    <p class="total"></p>  

    <script src="jquery.min.js"></script>
    <script>
      // Sum the value when submitting the form
      $(".totalpayment").submit(function(e){
        e.preventDefault();
        var paid = parseInt($('.paid').val());
        var due = parseInt($('.due').val());
        $(".total").html(paid + due);
      });
    </script> 
  </body>
</html>

我有一个表格可以将两个数字加在一起。我的问题是，它只有一个按钮，即添加按钮。让我们说我想添加一个取消按钮的处理程序，它将清除这两个框，我将如何实现它？

Answer 1

只需添加一个按钮即可重置表单。详细了解Reset button

无需添加任何处理程序来重置表单。

<button type="reset" value="Cancel">Cancel</button>

示例代码：

＆＃13;

<html>
  <body>
    <form class="totalpayment">
      <input class="paid" type="text" name="numberOne" />
      <input class="due" type="text" name="numberTwo" />
      <button>Add</button>
      <button type="reset" value="Cancel">Cancel</button>
    </form>
    <p class="total"></p>  

    <script src="jquery.min.js"></script>
    <script>
      // Sum the value when submitting the form
      $(".totalpayment").submit(function(e){
        e.preventDefault();
        var paid = parseInt($('.paid').val());
        var due = parseInt($('.due').val());
        $(".total").html(paid + due);
      });
    </script> 
  </body>
</html>

＆＃13;

JQuery - 如何实现取消按钮

1 个答案: