CODEWITHSUNDEEP
javascriptjqueryhtml
Strange
Strange

Reputation: 308

Hide form after submit JQuery

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.

Upvotes: 1

Views: 2430

Answers (3)

Sathiraumesh
Sathiraumesh

Reputation: 6117

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

Upvotes: 1

vrintle
vrintle

Reputation: 5596

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>

Upvotes: 2

Jack Bashford
Jack Bashford

Reputation: 44135

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>

Upvotes: 2

Related Questions