Hide form after submit 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.

vrintle · Answer 1 · 2018-10-20T06:37:51.300

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>

By using [XHR request](https://stackoverflow.com/questions/25983603/how-to-submit-html-form-without-redirection) — vrintle, Oct 20 '18 at 06:07

Jack Bashford · Answer 2 · 2018-10-20T06:26:13.657

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>

edited Oct 20 '18 at 06:26

answered Oct 20 '18 at 06:07

Jack Bashford

43,180
11
50
79

@Strange I've just added a working example - did it fix your problem? – Jack Bashford Oct 20 '18 at 06:14
Actually OP wants only the form to disappear. In your case, the table also disappears (or technically, the page redirects) – vrintle Oct 20 '18 at 06:17
@rv7 Of course, because a form submit reloads the page. – Jack Bashford Oct 20 '18 at 06:17
@rv7 Fixed now, any better? – Jack Bashford Oct 20 '18 at 06:18
Change `$(e)` to `e` at `$(e).preve...` – vrintle Oct 20 '18 at 06:21
@rv7 Sure, still a newbie to that kind of thing – Jack Bashford Oct 20 '18 at 06:26
its hiding the entire table after submission. – Strange Oct 20 '18 at 06:43

score 1 · Answer 3 · answered Oct 20 '18 at 06:50

1

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

answered Oct 20 '18 at 06:50

Sathiraumesh

5,949
1
12
11

Thanks for your suggestion. I will do the same and let you know if it worked. – Strange Oct 20 '18 at 06:51

Hide form after submit JQuery

3 Answers3