JQuery - 如何实现取消按钮

时间:2015-07-23 14:25:51

标签: javascript jquery

<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>

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

1 个答案:

答案 0 :(得分:2)

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

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

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

示例代码:

&#13;
&#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;
&#13;
&#13;