/    Sign up×
Community /Pin to ProfileBookmark

Problem with a button Reset

Copy linkTweet thisAlerts:
Oct 06.2006

Hi,

I have a html code containing a reset button as follows.

<input type=Reset value=reset onClick=doSomething()>

Also i have a Select list with some options,….
<select id= >…
<option1>
<option2>
….

Now the problem is depending on the value in the select list .. i will have to update a div innerHTML in the form. But onClicking reset, the select list value alone defaults to the original value, leaving my div innerHTML unchanged.

I thought, since reset button changes the select list value, the event handler of the select list onChange will automatically take care of updating my div section. But i am afraid it does not.. Any one wanna give a shot or atleast suggest me something….Need to complete it in 2 days..High Priority ?

Thanks
Prashanth

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzOct 06.2006 — Why not call the onchange handler function of the select element from the form's onreset event handler?
Copy linkTweet thisAlerts:
@prassh123authorOct 06.2006 — Thanks for your suggestion... What if i dont have a form? Can i still call this on BodY?
Copy linkTweet thisAlerts:
@KravvitzOct 06.2006 — No, you can't call it on <body> -- it won't work.

Why are you using <input type="reset"> and <select> if you don't have a <form>?
Copy linkTweet thisAlerts:
@prassh123authorOct 06.2006 — oh ya..that was a stupid question!!! Ok do u mean to say that a form has an onreset event??? If so, i tried it but in vain,,..
Copy linkTweet thisAlerts:
@prassh123authorOct 06.2006 — what happens is...first the form reset event's handler gets called first and only after that the reset happens....but i require the other way round. I want the reset to happen first and then the function call.
Copy linkTweet thisAlerts:
@prassh123authorOct 06.2006 — <html>

<head>

<style>

div {

height:50pt;

width:75pt;

background-color : green;

}

</style>

<script>

function changeText() {

var myindex = document.getElementById('menuitem').selectedIndex
var SelValue = document.getElementById('menuitem').options[myindex].value
document.getElementById('space').innerHTML=SelValue;
}

</script>

</head>

<body>

<form onreset=changeText()>

<input type = "text">

<select id="menuitem" onChange="changeText()">

<option value="cat"> cat

<option value="dog" selected> dog

<option value="elephant"> elephant

<input type=reset value=reset >

</select>

<div id="space"></div>

</form>

</body>



attaching the code for u r refererence.


</html>
Copy linkTweet thisAlerts:
@KravvitzOct 06.2006 — Try using setTimeout().
&lt;form onreset="setTimeout('changeText()',100)"&gt;
I suggest you read these:

[url=http://www.digital-web.com/articles/the_behavior_layer/]The Behavior Layer[/url]

[url=http://www.digital-web.com/articles/separating_behavior_and_structure_2/]Separating behavior and structure[/url]

[url=http://www.alistapart.com/articles/behavioralseparation/]Behavioral Separation[/url]

[url=http://www.onlinetools.org/articles/unobtrusivejavascript/]Unobtrusive JavaScript[/url]

[url=http://www.domscripting.com/book/sample/]DOM Scripting - Sample chapter: Best Practices[/url]

[url=http://www.severnsolutions.co.uk/articles/001/]Accessible DHTML[/url]
Copy linkTweet thisAlerts:
@prassh123authorOct 06.2006 — Thanks. This works...Just tell me one thing..is this option of using a timer safe?? I mean will it be consistent acroll all teh browsers / Processors??
Copy linkTweet thisAlerts:
@KravvitzOct 06.2006 — I think its safe, but that doesn't mean you shouldn't test your script on as many browsers as possible.

If you wanted to be more careful I suppose you could set a flag at the end of the onreset function and keep looping with a setInterval() until the flag is set, then run the onchange and clearInterval().
×

Success!

Help @prassh123 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...