473,846 Members | 1,914 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Unexpected clearing of radio button

I have a page containing:

<FORM NAME=radios>
<INPUT TYPE=RADIO NAME=RAD VALUE=1 ID=RAD1>
<LABEL FOR=RAD1>Check One</LABEL>
<A onClick="docume nt.radios.RAD[0].checked=false; return false">Uncheck
One</A><BR>
<INPUT TYPE=RADIO NAME=RAD VALUE=2 ID=RAD2>
<LABEL FOR=RAD2>Check Two</LABEL><BR>
<DIV STYLE="display: none"><INPUT TYPE=RADIO NAME=RAD ID=RAD3></DIV>
<A onClick="docume nt.radios.RAD[2].checked=true; return false">Select
Hidden</A><BR>
<BUTTON onclick="if (document.radio s.RAD1.checked) {alert('Check one is
checked')} else {alert('Check one is not checked')}">Try Me!</BUTTON>
</FORM>

You can see this at the bottom of http://swiftys.org.uk/test.html

If you check one of the two visible buttons then click the "Try Me!"
button, then you get the expected alert, but the radio button is also
unchecked. Can anyone tell me why the radio button gets unchecked when
all I have done is refer to its checked attribute?

I know that adding "return false" to the end of the JavaScript on the
button stops the button getting unchecked, but I don't understand why it
should be necessary.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk
Sep 23 '08 #1
3 2762
On Sep 23, 10:00*am, Steve Swift <Steve.J.Sw...@ gmail.comwrote:
I have a page containing:

<FORM NAME=radios>
<INPUT TYPE=RADIO NAME=RAD VALUE=1 ID=RAD1>
<LABEL FOR=RAD1>Check One</LABEL>
<A onClick="docume nt.radios.RAD[0].checked=false; return false">Uncheck
One</A><BR>
<INPUT TYPE=RADIO NAME=RAD VALUE=2 ID=RAD2>
<LABEL FOR=RAD2>Check Two</LABEL><BR>
<DIV STYLE="display: none"><INPUT TYPE=RADIO NAME=RAD ID=RAD3></DIV>
<A onClick="docume nt.radios.RAD[2].checked=true; return false">Select
Hidden</A><BR>
<BUTTON onclick="if (document.radio s.RAD1.checked) {alert('Check one is
checked')} else {alert('Check one is not checked')}">Try Me!</BUTTON>
</FORM>

You can see this at the bottom ofhttp://swiftys.org.uk/test.html

If you check one of the two visible buttons then click the "Try Me!"
button, then you get the expected alert, but the radio button is also
unchecked. Can anyone tell me why the radio button gets unchecked when
all I have done is refer to its checked attribute?

I know that adding "return false" to the end of the JavaScript on the
button stops the button getting unchecked, but I don't understand why it
should be necessary.
Your form gets reloaded... Because without "return false;" you submit
the form...
>
--
Steve Swifthttp://www.swiftys.org .uk/swifty.htmlhttp ://www.ringers.org .uk
Sep 23 '08 #2
On Sep 23, 10:00 am, Steve Swift wrote:
I have a page containing:
<snip>
<BUTTON onclick="if (document.radio s.RAD1.checked) {
alert('Check one is checked')} else {alert('Check one
is not checked')}">Try Me!</BUTTON>
</FORM>
<snip>
If you check one of the two visible buttons then click the
"Try Me!" button, then you get the expected alert, but the
radio button is also unchecked. Can anyone tell me why the
radio button gets unchecked when all I have done is refer
to its checked attribute?

I know that adding "return false" to the end of the JavaScript
on the button stops the button getting unchecked, but I don't
understand why it should be necessary.
The official default type for the BUTTON element is "submit", and when
you click a submit button any containing from is submitted. In this
case the effect is to re-load the page (as the FORM element does not
have the (officially required) ACTION attribute and in its absence the
URL of the current page (usually) becomes the ACTION.

However, IE gets this wrong and defaults the type of its BUTTON
elements to "button", so if you use a BUTTON element always provide it
with an explicit TYPE attribute if you want consistent (ish) behaviour
across browsers, and always use the TYPE you want ('button' if you
have no intention of having it submit the form, and 'submit' if you
want the form submitted).

Also, returning false from onclick handlers for submit buttons (of the
various sorts) is usually not a good idea; instead have the onsubmit
handler for the FORM element do any cancelling of submissions that may
be required.

Sep 23 '08 #3
Steve Swift wrote:
<FORM NAME=radios>
<INPUT TYPE=RADIO NAME=RAD VALUE=1 ID=RAD1>
<LABEL FOR=RAD1>Check One</LABEL>
<A onClick="docume nt.radios.RAD[0].checked=false; return false">Uncheck
One</A><BR>
<INPUT TYPE=RADIO NAME=RAD VALUE=2 ID=RAD2>
<LABEL FOR=RAD2>Check Two</LABEL><BR>
<DIV STYLE="display: none"><INPUT TYPE=RADIO NAME=RAD ID=RAD3></DIV>
<A onClick="docume nt.radios.RAD[2].checked=true; return false">Select
Hidden</A><BR>
<BUTTON onclick="if (document.radio s.RAD1.checked) {alert('Check one is
checked')} else {alert('Check one is not checked')}">Try Me!</BUTTON>
</FORM>

You can see this at the bottom of http://swiftys.org.uk/test.html

If you check one of the two visible buttons then click the "Try Me!"
button, then you get the expected alert, but the radio button is also
unchecked. Can anyone tell me why the radio button gets unchecked when
all I have done is refer to its checked attribute?

I know that adding "return false" to the end of the JavaScript on the
button stops the button getting unchecked, but I don't understand why it
should be necessary.
When I found the cause it was sort of obvious. The button was submitting
the form, which was defaulting to a GET at the current URL, thus
emulating a reload, thus resetting the radio buttons to unchecked.

What was less obvious was that the same behaviour occurred even when the
<BUTTONwas moved below the </FORMputting it outside of the form, but
with the same result.

This is almost certainly invalid HTML, so what happens is undefined. It
was still pretty surprising.
--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk
Sep 23 '08 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
15065
by: Marten van Urk | last post by:
I got the following error in my page Parse error: parse error, unexpected T_ELSE in line 25 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Club</title> </head> <style type="text/css">
1
3705
by: Nerfherder | last post by:
I would like to be able to deselect a radio_group when the user selects to clear the form. #!/usr/local/bin/perl use CGI qw(:standard); $query = new CGI; my $policy = "blank";
4
3285
by: Oscar Monteiro | last post by:
I Have to sets of Radio buttons like so: <input type="radio" name=p1 value=1> <input type="radio" name=p1 value=2> <input type="radio" name=p1 value=3> <br> <input type="radio" name=p2 value=1> <input type="radio" name=p2 value=2> <input type="radio" name=p2 value=3> then a text area and a button:
6
3946
by: Tyrone Slothrop | last post by:
I am coding a search form which carries the values to an identical form on the search results page. A "Clear Fields" button to remove the values from the previous search is required. Ideally I would prefer a generic script to do this. I had no problems with the script until I had to deal with the radio elements. Following is the problem part of the code: function resetFields() {
1
4261
by: hortoristic | last post by:
We are using JavaScript to Enable/Disable certain fields on web pages based on business rules. A simple example is if when using an option type tag, and the two options are Yes and No. If YES is selected - enable a field to use the M$ Datepicker. Using the code below works for most of our fields, however the problem is that when the field is re-enabled - it remembers the original date or data prior to it being disabled - despite the...
3
1518
by: G Namx | last post by:
Hi, We have a usercontrol with a number of controls on it. One being a radio button and one being a button. When we set button.enabled = false the click event of the radio button is being raised. The click event for all buttons & radio buttons is handled by a single routine.
9
2256
by: IchBin | last post by:
I can not see what the problem is with this script. I am just trying to set a radio button by calling setCheckedValue('abbr_letter', 'V'). Sorry I am new to javascript. <html> <head> <script type="text/javascript"> function setCheckedValue(radioObj, newValue) { if(!radioObj)
10
6114
by: IchBin | last post by:
I am trying to set the state of a radio button. I do not see what I am doing wrong. Sorry, I am new at this.. I need another set of eyes to look at this snip of code. I am trying to set the radio button with this link of code: echo 'SCRIPT language=JavaScript setCheckedValue("'.$_SESSION.'");</SCRIPT>'; //? <snip of code>
9
2490
by: JShea | last post by:
I have a "Cancel" button on a form that when clicked brings the user back to the previous page where he had entered data into two different text boxes and also had to click a radion button. I can get the user back but can not space out the two text boxes and unchecked the radio buttons. Here is the button <input type="button" onClick="history.go(-1);clearForm();return true;" name="CancelButton" value="Cancel" class="button"> And the...
0
9879
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9727
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10978
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10705
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10330
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9477
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7879
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7050
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
4521
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.