I have a questionnaire form for users to complete. When a user completes one question (firing the onBlur event), the page scrolls smoothly to the next question (using an anchor tag) for them to complete. This works fine except for the following scenario (shown in the jsFiddle):
- User enters text in first textbox ‘A’
- They leave textbox ‘A’ by scrolling down to then clicking directly on an option in the radio buttons list.
It fires off the scroll event perfectly (though it doesn’t look as smooth in the jsFiddle though that’s irrelevant).. The issue is that it doesn’t set the radio option clicked on to be selected and the user is required to click the option again.
jsFiddle: http://jsfiddle.net/4ZkpZ/5/
Anyone any ideas?
The problem was simple. You were attaching the event handler to the entire body. Therefore, any blur event would lead to a scrolling to the specified div. And any other action that led to the blur event would be dismissed. That’s why the click of the radio button, which generated the blur event did not remain selected.
All I did was bind the event handler to table. For your convinience, you can add specific class to your textareas or add an enclosing divs. Hope that helped
http://jsfiddle.net/4ZkpZ/10/