提交JQuery后隐藏表单

Question

I have a html form inside the table and i want to make it disappear after the user submits the form

Form:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td colspan="3"> <h6>Have Discount Coupon? Apply it here...</h6> </td> <td> <div id="form"> <form class="coupon" method="post"> <input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off"> <input type="submit" name="coupon" value="Apply Coupon"> </form> </div> </td> </tr> <script type="text/Javascript"> $('#form').submit(function() { $(this).hide(); }); </script> 

After the submission, the form is still visible and nothing happening.

Answer 1

You have to prevent the default action first in order to hide the form using event.preventDefault()

Further if you're working on a commercial level and you want your form to be submitted without redirection , then you can use XHR request

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td colspan="3"> <h6>Have Discount Coupon? Apply it here...</h6> </td> <td> <div id="form"> <form class="coupon" method="post"> <input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off"> <input type="submit" name="coupon" value="Apply Coupon"> </form> </div> </td> </tr> <script type="text/Javascript"> $('#form').submit(function(event) { event.preventDefault(); // ... XHR request to submit form $(this).hide(); }); </script> 

Answer 2

The problem is the selector:

$('#form')

The <form> element does not have the attribute id="form" — (that's the <div id="form"> - not a form and therefore not submittable) — all you need to do is target the actual <form> element. Change your code to this:

$('form').submit(function(e) { //NOTE: Removed "#" 
    e.preventDefault();
    $(this).hide(); 
})

And it will work:

 $('form').submit(function() { $(this).hide(); }) 

 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <tr> <td colspan="3"> <h6>Have Discount Coupon? Apply it here...</h6> </td> <td> <div id="form"> <form class="coupon" method="post"> <input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off"> <input type="submit" name="coupon" value="Apply Coupon"> </form> </div> </td> </tr> 

Answer 3

There is a Problem in the approach that You use. Each time you run click the submit button in the page your page gets reloaded **this will hide the form when you click and again render the whole page from the begining . because of that you want be able to get what you want.Instead try to send data using Ajax by having a button rather than using the default form submission approach