CODEWITHSUNDEEP
javascriptjqueryformsjspvalidation
DJR
DJR

Reputation: 474

trouble resetting form through javascript or jquery

I have the below jQuery function which is called when ever I click a button on my page. This button is supposed to reset the form and reload a fresh page.

function Create(txt) {
    if (txt="createUser") {
        document.forms[0].reset();
        $('#myform').each(function() {
            this.reset();
        });
        $('input[name=method]').val(txt);
        document.forms[0].submit();
    }
}

But for some reason, it does not go to this.reset() at all and I see all the form values in my action class. How should I solve this?

Below is how the button is defined.

<input type="button" value="Create" class="btn" onclick="Create('createUser');">

edit: Ok guys.. i know how input type="reset" works and i have another button in my page doing the same.. I have a create user form where i can search and see an existing user details or fill the form and create a new user. if i search for a user and then click on create to create another user, it sends a new request to the server and reloads the page.. but in the action class.. the bean has not been reset.. and i get all the values back on the page. hence ..i want to reset the form...without using the reset button...

I selected John's answer .. made a slight modification and below is the final function i used.

function Create(txt){
if (txt="createUser"){
var $form = $('#myform');
    $form.find(':input').not(':button,:submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected'); // Clear all inputs
    $form.find('input[name=method]').val(txt);
    $form.submit();
}
}

Upvotes: 0

Views: 132

Answers (5)

John S
John S

Reputation: 21492

As others have pointed out, you have = where you should have ==, but that means the if-statement is always true. It is not, however, the reason you "see all the form values in my action class".

I think the problem may be that you are misinterpreting what the reset() method does. It does not clear all the input values; instead, it resets them to their original values (i.e., the values in the "value" attributes).

You may want to clear them yourself, rather than use the reset() method.

function Create(txt) {
    if (txt == 'createUser') {
        var $form = $('#myform');

        // Clear form values
        $form.find(':input:not(:button,:submit,:reset,:checkbox,:radio,:hidden)').val('');
        $form.find('input:checkbox,input:radio)').prop('checked', false);

        $form.find('input[name=method]').val(txt);
        $form.submit();
    }
}

Note: The :input selector matches all input, textarea, select and button elements.

Note: It appears the OP does not want hidden inputs to be cleared, but does want checkboxes and radio buttons cleared.

Upvotes: 0

Philippe Gioseffi
Philippe Gioseffi

Reputation: 1658

I would do like this:

$(document).ready(function() {
    $("#createUserButton").on("click", function() {
        var form = $("#myForm")[0];
        form.reset();
        $("input[name=method]").val("CreateUser");
        form.submit();
    }
});

And your button becomes:

<input type="button" value="Create" class="btn" id="createUserButton">

I'd suggest you to place an id attribute as well in your input text, something like:

<input type="text" name="method" id="methodName" />

And then you could reference it by id which is faster than by name, like this:

$("#methodName").val("CreateUser");

Your code was wrong, in your if you should've used == or === instead of just = and your form should've just have called reset method. No need to iterate over an id using each, even because an ID have to be unique in an HTML page.

Here's a workin fiddle, just type something in the first input to see it happening.

Upvotes: 0

user3260861
user3260861

Reputation: 149

the button does not have type="reset" so either change it to reset or use

document.getElementById("myform").reset(); instead of

document.forms[0].reset();
$('#myform').each(function(){
          this.reset();
    });

Upvotes: 0

Jay Blanchard
Jay Blanchard

Reputation: 34426

You seem to be setting a variable here - 

if (txt="createUser"){...

Change it to - 

if (txt == "createUser") {..

That way you're doing a comparison, instead of setting a variable.

Upvotes: 0

Shri Suresh
Shri Suresh

Reputation: 473

Instead of java script, you can have html code,

<input type="reset" value="Reset">

Upvotes: 1

Related Questions