CODEWITHSUNDEEP
javascriptjquery
user5078574
user5078574

Reputation:

JQuery - How to implement Cancel Button

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

I have a form that adds two numbers together. My issue is, it only has one button, the add button. Let's say I wanted to add the handler for a cancel button which will clear the two boxes, how would I implement this?

Upvotes: 0

Views: 5037

Answers (1)

Braj
Braj

Reputation: 46871

Just add one more button to reset the form. Read more about Reset button

There is no need to add any handler for resetting the form.

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

Sample code:

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

Upvotes: 2

Related Questions