CODEWITHSUNDEEP
javascriptjquerycssforms
user2071270
user2071270

Reputation: 172

Reseting form fields to initial state

I am using the below code using Jquery to set my form fields

 $("#frmlogin").reset()

above is the code I use to reset the fields in the below form

<form  name='frmlogin' method='POST' id="login_form" style="margin:0 auto; margin-top:50px; width: 40%; height:300px; text-align:center;">

                        <input class="oFormJumbo oFormMed oInputText" type="text" name="requiredLogin" placeholder="Login Id" AUTOCOMPLETE=OFF />
                        <div class="cleaner h10"></div>
                        <input class="oFormJumbo oFormMed oInputText "  type="password" value="" name="password" placeholder="Password"  AUTOCOMPLETE=OFF onfocus="changetoUpperCase(document.frmlogin.requiredLogin.value);" />
                        <div class="cleaner h10"></div>
                        <a href="javascript:fp();">Forgot Password?</a>
                        <div class="cleaner"></div>
                        <input style="margin-left:0px; "   class="submit_btn float_l" type="button" value="Sign In" name="Sign In" onClick="javascript:func_get_data();"/>
                        <input style="margin-left: 200px; "  class="submit_btn float_r" type="button" value="Reset" id="reset" name="reset"   onclick="javascript:Reset()"/>

 </form>

For some reason the code is not working. The JavaScript is throwing the following exception

TypeError: $("#frmlogin").reset is not a function
[Break On This Error]   

$("#login_form").reset()

Can anyone Tell me Why is it not working?. I have included Jquery.js.

According to Adils suggestion I even tried 

*$("#login_form")[0].reset()*

now it gives

TypeError: $("#frmlogin")[0] is undefined
[Break On This Error]   

$("#frmlogin")[0].reset()

What is it I am missing?

I tried every code suggested bellow except Amit Agrawal since I want to use Jquery. None wok. I know my code to rest is proffer. There is something that I am missing in the form

Upvotes: 1

Views: 3596

Answers (6)

웃웃웃웃웃
웃웃웃웃웃

Reputation: 11984

Using JavaScript

document.getElementById("login_form").reset();//Use the id of the form

Using jQuery

("#login_form").reset();

Upvotes: 0

Adil
Adil

Reputation: 148110

You are using jQuery object to call reset on, use DOM object to call reset, you can convert jQuery object to DOM object using indexer.

Change

$("#login_form").reset()

To

$("#login_form")[0].reset()

Edit based on comments, The other cause of problem is id and name of your reset button. Surprisingly if there is any input with id or name reset then form.reset() function stops working. Change the id and name of reset button and the above code will work.

Live Demo

Change

<input style="margin-left: 200px; "  class="submit_btn float_r" type="button" value="Reset" id="reset" name="reset"   onclick="javascript:Reset()/>

To

<input style="margin-left: 200px; "  class="submit_btn float_r" type="button" value="Reset" id="myreset" name="myreset" />

Binding event with button

$('#myreset').click(function () {   
    $("#login_form")[0].reset();
});

Upvotes: 3

cimmanon
cimmanon

Reputation: 68309

Is there some reason you've overlooked the reset input element?

http://jsfiddle.net/BhTv5/

<input type="reset" />

Upvotes: 6

Jai
Jai

Reputation: 74738

You have to get the name with attribute selector:

$('form[name="frmlogin"]').reset();

or with id:

$('#login_form').reset();

Your code breaks because you are not referencing the form with correct property.

Upvotes: 0

tamilmani
tamilmani

Reputation: 591

try this code u won't get the type error.you declared id is wrong you declared the form Name not id try to use the id and reset the form.

document.getElementById("login_form").reset();

(OR)

  $("#login_form").reset();

Upvotes: 1

bipen
bipen

Reputation: 36531

reset is javascript method and needs DOM object

it should be

$("#login_form")[0].reset()

Upvotes: 0

Related Questions