Hide form after submit JQuery

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>

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>

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