Error when I tried to reset an html form

Question

In my current spring project, after I submit a form, I need reset it. I am doing this with this javascript/jquery code:

$('form.form').ajaxForm(function(data) {
    $('form.form').each(function(){
        this.reset();
    });
});

The problem with this code is that some forms have inner forms, opened in a popup windows (which source <div> is placed in the same jsp page). In this case, the code above resets both forms.

I tried this other code:

$('form.form').ajaxForm(function(data) {
    $(this).each(function(){
        this.reset();
    });
});

but with this, I get this error:

Uncaught TypeError: Object #<Object> has no method 'reset'

What's wrong with this second way in comparison with the first one? How I could reset the form then?

UPDATE

following the instruction from this answer, I try this:

jQuery.fn.reset = function () {
      $(this).each (function() { this.reset(); });
};

$('form.form').ajaxForm(function(data) {
    $(this).reset();
});

but still it's happening the same.

UPDATE 2

At last, I try this code:

$('form.form').ajaxForm(function(data) {
    var nome = $('form.form').attr('id');

    if(data == '')
        $('#yes').css('display', 'block');
    else
        $('#not').css('display', 'block');

    $('#'+nome).each(function(){
        this.reset();
    });
});

which reset only the main form (the first one to be opened). I wonder if there is a solution to reference the last opened form (the one opened inside the jquery-ui dialog <div>).

check this http://stackoverflow.com/questions/16452699/how-to-reset-a-form-using-jquery-with-reset-method — Se0ng11, Aug 06 '14 at 01:03
@Se0ng11 I already have seen this question, and it was what I have tried so far (the first approach works, but I am not able to use it because of my problem with inner forms). — Kleber Mota, Aug 06 '14 at 01:11
@Se0ng11 it's what I expect from it (right now, only a empty string). Nut I am not using this inside the function. — Kleber Mota, Aug 06 '14 at 01:19
@Se0ng11 sorry for bother you again. I try one more thing described in the link you indicate to me (see the update), but still it's happening the same error. — Kleber Mota, Aug 06 '14 at 01:35
mind to create a jsfiddle at here? http://jsfiddle.net/, this can ease to troubleshoot your issue — Se0ng11, Aug 06 '14 at 01:44
@Se0ng11 I made this jsfiddle: http://jsfiddle.net/klebermo/9Sj84/. Unfortunately, I am not be able to use ajaxForm because it's a externa library (http://malsup.com/jquery/form/). But helps to demonstrate what I want. — Kleber Mota, Aug 06 '14 at 09:56
you can get the external js from here http://cdnjs.com/, and I had write answer for you, not sure if that solved the issue u had — Se0ng11, Aug 06 '14 at 09:57

Se0ng11 · Answer 1 · 2014-08-06T02:37:40.227

0

I had done some code simulation for the issue, but still, I not sure if I get the question correctly here, your question is asking how to only reset 1 form? Anywhere, I explain the error and also reset specific form

Uncaught TypeError: Object #<Object> has no method 'reset'

this error hit is because of this within $(this) is pointing to the ajaxForm scope instead of the form itself, and ajaxForm do not have the property, that's why the error occur

if you just want to reset only the first form, example form1, try to reset only the form based on the id

$('#form1').ajaxForm(function(data) {
    $('#form1')[0].reset();

});

edited Aug 06 '14 at 02:37

answered Aug 06 '14 at 02:28

Se0ng11

2,303
2
26
45

See this jsfiddle: http://jsfiddle.net/klebermo/9Sj84/14/: when I submit the inner form, all the forms are reset. – Kleber Mota Aug 06 '14 at 10:15
ok, I just saw what actually u been doing, ur inner form will be reset for sure, because it is within the parent form – Se0ng11 Aug 06 '14 at 10:23
but in the real case, the inner form isn't inside the parent form, see here: https://github.com/klebermo/loja.cms/blob/master/src/main/webapp/WEB-INF/jsp/private/cadastrar.jsp – Kleber Mota Aug 06 '14 at 10:27
the inner form is placed inside the `
` in the start of the page.
– Kleber Mota Aug 06 '14 at 10:29

score 0 · Accepted Answer · edited May 23 '17 at 12:29

I finally find a solution for this issue, with this code:

$('form.form').each(function () {
    var form = this;
    $(form).ajaxForm(function (data) {
        if (data == '') {
            $(form).find('#yes').css('display', 'block');
        } else {
            $(form).find('#not').css('display', 'block');
        }
        form.reset();
    });
});

following the instructions from this answer: https://stackoverflow.com/a/25173296/2692962

Error when I tried to reset an html form

2 Answers2