javascript - JQuery - 如何实现取消按钮

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

我有一个将两个数字相加的表单。我的问题是,它只有一个按钮,即“添加”按钮。假设我想添加取消按钮的处理程序,该处理程序将清除两个框,我将如何实现它?

最佳答案

只需再添加一个按钮即可重置表单。了解更多关于 Reset button

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

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

示例代码:

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

关于javascript - JQuery - 如何实现取消按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31590237/

相关文章:

php - Magento Ajax 购物车删除时重定向到删除页面

javascript - 如何将格式为 "YYYY-MM-DD hh:mm:ss"的日期转换为 UNIX 时间戳

javascript - 如何使用jquery验证器来确定一个字段的值大于另一字段?

javascript - .addClass() 到 $(this) 附近但在其外部的元素

javascript - 为什么我网站上的头像链接会泄露?

jquery - 跨域 AJAX 请求未设置 Cookie

javascript - 使用 jquery 和/或 Rails JS 突出显示主题标签和@用户名

javascript - 无法让 jquery 代码每秒执行一次..?

javascript - 在每个文本字段后插入文本区域

javascript - 单击链接更改内容