CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Bora ALAP
Bora ALAP

Reputation: 329

Resetting form after click submit

So I have a contact form.And when I click on the submit button it, it resets the form if I use .click(). However, when I use .submit() it doesn't work for some reason.

Here is the code for the form.

<form id="foo">
        <div class="form_sides"> 
          <div class="form-group">
            <label for="Your_Name">Name</label>
            <input type="text" class="form-control" name="name" id="name" aria-describedby="nameHelp" placeholder="" required>
          </div>
          <div class="form-group">
            <label for="Your_Email">Email</label>
            <input type="email" name="email" class="form-control" id="email" placeholder="" required>
          </div>
          <div class="form-group">
            <label for="Your_Subject">Subject</label>
            <input type="text" name="subject" class="form-control" id="subject" placeholder="" required>
          </div>
        </div>
        <div class="form_sides">
          <div class="form-group">
            <label for="Your_Phone">Message</label>
            <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
          </div>
          <div class="form-group">
            <div id='success'></div>
            <button id="btn_submit" type="submit" class="btn_submit">Submit</button>
          </div>
        </div>
      </form>

And here is my JavaScript

var reset = function(){
    setTimeout(function(){
        $('form')[0].reset();
    },3000);
}
$('.btn_submit').on('submit', function(){
    reset();
    console.log("debug");
});

In this, I don't get the console.log, however on .click() I do get the console.log. The form is submitting to Google Spread Sheet. Also, while looking at it, if you guys can tell me how to make the reset smoother, that would be great. I want value's to fade out not the input boxes.

Thanks in advance,

Upvotes: 0

Views: 3217

Answers (1)

Avitus
Avitus

Reputation: 15958

If you want to attach to the submit event you have to attach it to the actual form. If you want to do it on click you can attach to the button. However, you can't do a on submit event of a button.

change: 

$('.btn_submit').on('submit', function(){
    reset();
    console.log("debug");
});

to be :

$('#foo').on('submit', function(){
    reset();
    console.log("debug");
});

Alternatively you can attach to the click event of the button and have this code:

$('.btn_submit').on('click', function(){
    reset();
    console.log("debug");
});

Upvotes: 2

Related Questions