I need to create a reset button that sets focus on the first form field after the form resets

Question

Here is the HTML5 Code:

<form name="memberInfo">
<table border=1>
<tr><td>Username</td><td><input id="username"   /></td></tr>
<button type = "reset" id = "resetButton">Reset</button>
<input type=button value="submit" onclick="Validate()"/>
</table>
</form>

and here is the JavaScript code:

window.onload =function(){
var _getForm = document.getElementById("memberInfo");
_getForm.addEventListener('reset',function(){
document.getElementById("username").focus()
})
}

How may forms do you have in your page?Please show your HTML code — brk, May 23 '16 at 04:55
check this one http://stackoverflow.com/questions/277544/how-to-set-the-focus-to-the-first-input-element-in-an-html-form-independent-from — Nagesh Sanika, May 23 '16 at 05:01

score 0 · Answer 1 · answered May 23 '16 at 05:36

<form id = "myForm">
<input type = "text" id ="text1">
<input type = "text" id ="text2">
<input type = "text" id ="text3">
<button type = "reset" id = "restButton">Reset</button>
</form>

JS

$("#myForm").submit(function()
{
$('#myForm').trigger("reset");
$('#text1').focus();
return true;
});

brk · Answer 2 · 2016-05-23T06:57:44.420

Use button type ="reset" and focus()

Hope this snippet will be useful

HTML

<form id = "myForm">
    <input type = "text" id ="text1">
    <input type = "text" id ="text2">
    <input type = "text" id ="text3">
    <button type = "reset" id = "restButton">Reset</button>
    </form>

JS

   var _getForm = document.getElementById("myForm");
    _getForm.addEventListener('reset',function(){
    document.getElementById("text1").focus()
    })

Check this jsfiddle

EDIT

You can use firstElementChild instead of using document.getElementById("firtChild").

Updated jsFiddle

Edit-2

If you have put your code inside head tag, you can use window.onload to attach eventlistener after window has loaded

 window.onload =function(){
    var _getForm = document.getElementById("your form id");
    _getForm.addEventListener('reset',function(){
    document.getElementById("text1").focus()
    })
    }

EDIT-3

With latest changes in original questions here are few updates

Note

There is no form with id=memberInfovar. There is form with name="memberInfovar".So this _getForm = document.getElementById("memberInfo"); will throwaddEventListener of null
<input id="username" /> add type of this input, that is input type = "text"
<input type=button. The type must be wrapped inside double quotes, that is <input type="button">

Check this jsfiddle

a downvote does not help unless it helps in correcting a answer.By the way the jsfiddle is working fine — brk, May 23 '16 at 05:45
I didnt down vote, yes it works in js fiddle but for some reason when i implement it in my code i get an error — Jasmin Kenjar, May 23 '16 at 06:10
Uncaught TypeError: Cannot read property 'addEventListener' of null — Jasmin Kenjar, May 23 '16 at 06:15
Does your form has id as myForm? Also you you need to fire this after your dom has loaded — brk, May 23 '16 at 06:17
no its a different id but i changed the id in the javascript you gave me to match it. — Jasmin Kenjar, May 23 '16 at 06:20

I need to create a reset button that sets focus on the first form field after the form resets

2 Answers2