How can I clear form when button clicked?

Question

My code like this :

$('body').on('click', '#add-image', function(e) {
    $(this).find('#form-add').trigger('reset');
    // $(this).find('#form-add').clearForm();
    // $('#form-add').clearForm();
    // $('#form-add').val("");
    // ...
});

If button clicked, I want the form clear

I try like that, but it does not work

How can I solve this problem?

Try simply $('#form-add').trigger('reset'), see https://stackoverflow.com/questions/3786694/how-to-reset-clear-form-through-javascript — Zoltan, Jun 11 '17 at 04:54

score 2 · Accepted Answer · answered Jun 11 '17 at 04:47

2

Clearing an entire form with Javascript or JQuery, it's recommended that you
explicitly clear each of your elements.

For example, clearing all text inputs:

$('#txtbox1').val('');
$('#txtbox2').val('');
etc. etc.

Another less recommended alternative is to use reset():

$('#myForm')[0].reset();

But this does not 100% guarantee clearing all elements within, since some of the elements may not be scoped within your form.

answered Jun 11 '17 at 04:47

Koby Douek

16,156
19
74
103

I need you help. Look at this : https://stackoverflow.com/questions/44486251/why-image-not-display-in-modal-bootstrap – moses toh Jun 11 '17 at 23:14

score 0 · Answer 2 · answered Jun 11 '17 at 04:51

Let us suppose you have a button with class clearAll, call the below jquery function which will clear all the textfields and textarea at once...easier and simple...customize however you want...

$(".clearAll").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

score 0 · Answer 3 · answered Jun 11 '17 at 04:52

0

Yes you can reset a form, is almost the same as clean.

Pure JS:

document.getElementById('THE-FORM-ID').reset();

DEMO: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_reset

answered Jun 11 '17 at 04:52

Bitito

191
6

score 0 · Answer 4 · answered Jun 11 '17 at 05:02

0

Try with empty() function jquery

$('body').on('click', '#add-image', function(e) {
    $(this).find('#form-add').trigger('reset');
     $(this).find('#form-add').find('input,textarea').empty()
});

answered Jun 11 '17 at 05:02

prasanth

22,145
4
29
53

I need you help. Look at this : https://stackoverflow.com/questions/44486251/why-image-not-display-in-modal-bootstrap – moses toh Jun 11 '17 at 23:15

score 0 · Answer 5 · answered Jun 11 '17 at 06:00

0

You can clean all the text fides that undet that form like that :

$("#clean").click(function() {
    $(this)
    .closest('form')
    .find("input[type=text],textarea")
    .val('');
});

answered Jun 11 '17 at 06:00

Daniel Taub

5,133
7
42
72

How can I clear form when button clicked?

5 Answers5