I am trying to ask the user for confirmation before a radio button is selected.
Currently I'm handling the radio button's onclick event, asking the user to confirm their action and if they hit the 'cancel' button call the preventDefault() method for the event to cancel it.
It cancels the event if a selection has already been made for the radio button group (it actually selects it, the reverts it back to it's original value when the preventDefault() method is called) The problem I'm having is that the radio button is selected regardless of stopping the event if no previous selection has been made. When a radio button is not part of a group of radio buttons this radio button is always selected.
If you take the following code and past it into the code pane in the w3c schools try-it utility (click hit the 'Edit and Click Me' button) you'll get a good idea of what I"m trying to explain (Please note the following code does not work in IE) -
<html>
-
<head>
-
<script type="text/javascript">
-
function doClick(e){
-
if(confirm("are you sure?")==false){
-
e.preventDefault();
-
e.stopPropagation();
-
return false;
-
}
-
return true;
-
}
-
</script>
-
</head>
-
<body>
-
<form>
-
<input type="radio" name="radio1" onclick="doClick(event);" />x
-
<input type="radio" name="radio1" onclick="doClick(event);" />y
-
<input type="radio" name="radio1" onclick="doClick(event);" />z
-
</form>
-
</body>
-
</html>
6  14452 
The only way I was able to get around this was to check if the radio button had a selection to begin with (when the page is loaded) ...then later check if this value is true or false. If it didn't have a selection when the page is loaded, loop through the radio buttons and deselect each one.
This is not a clean solution and I don't know how I'm going to implement it in my application without storing some sort of array of booleans.... -
<html>
-
<head>
-
<script type="text/javascript">
-
var radioIsSelected;
-
function doClick(e){
-
if(confirm("are you sure?")==false){
-
if(radioIsSelected == false){
-
var radio1 = document.getElementsByName('radio1');
-
for(var i=0; i<radio1.length; i++)
-
{
-
radio1[i].checked = false;
-
}
-
}
-
e.preventDefault();
-
e.stopPropagation();
-
return false;
-
}else{
-
radioIsSelected = true;
-
}
-
return true;
-
}
-
function checkChecked(){
-
var radio1 = document.getElementsByName('radio1');
-
radioIsSelected = false;
-
for(var i=0; i<radio1.length && radioIsSelected==false ; i++)
-
{
-
if(radio1[i].checked){
-
radioIsSelected = true;
-
}
-
}
-
}
-
</script>
-
</head>
-
<body onload="checkChecked();">
-
<form>
-
<input type="radio" name="radio1" onclick="doClick(event);" />x
-
<input type="radio" name="radio1" onclick="doClick(event);" />y
-
<input type="radio" name="radio1" onclick="doClick(event);" />z
-
</form>
-
</body>
-
</html>
Does anyone know a way around this problem that doesn't involve checking whether or not the radio button has a selection on page load?
-Frinny
I found a better way :)
Again, I'm not sure if this works in IE because I haven't tried it there yet but there is a defaultChecked property for radio buttons.
All I had to do was set the checked property to the defaultChecked property during the cancel action: -
<html>
-
<head>
-
<script type="text/javascript">
-
function doClick(e){
-
if(confirm("are you sure?")==false){
-
e.target.checked = e.target.defaultChecked;
-
e.preventDefault();
-
e.stopPropagation();
-
return false;
-
}
-
return true;
-
}
-
</script>
-
</head>
-
<body>
-
<form>
-
<input type="radio" name="radio1" id="xRadio" onclick="doClick(event);" />x
-
<input type="radio" name="radio1" id="yRadio" onclick="doClick(event);" />y
-
<input type="radio" name="radio1" id="zRadio" onclick="doClick(event);" />z
-
</form>
-
</body>
-
</html>
For IE, use: - e.returnValue = false;
-
e.cancelBubble = true;
Test for support of the DOM standard methods and, if not present, try these statements for IE.
I tested what you've suggested.
It sort of works. It works when there is no default selection and cancel the action (the option is unselected); however, if there is a default selection and the user cancels the action, the previous selection is lost: the option is unselected but the previously selected option is not re-selected.
I'm going to look into this further tomorrow.
This is what I've been testing with: -
<html>
-
<head>
-
<script type="text/JavaScript">
-
function doClick(e){
-
if(confirm("are you sure?")==false){
-
try{
-
e.target.checked = e.target.defaultChecked;
-
e.preventDefault();
-
e.stopPropagation();
-
return false;
-
}catch(ex){
-
e.returnValue = false;
-
e.cancelBubble = true;
-
return true;
-
}
-
}
-
return true;
-
}
-
</script>
-
</head>
-
<body>
-
<input type="radio" name="radio1" id="xRadio" onclick="doClick(event);" />x
-
<input type="radio" name="radio1" id="yRadio" onclick="doClick(event);" />y
-
<input type="radio" name="radio1" id="zRadio" onclick="doClick(event);" />z
-
</body>
-
</htm>
Thanks acoder :)
Well I finally got back to looking into this problem.
When using the defaultChecked property to reset the target's checked value in FireFox, the radio button that was previously selected is re-selected.
When using the defaultChecked property to reset the target's (the sourcElement's) checked value in IE, the radio button that was previously selected is not reselected.
So, in order to determine which radio button was previously selected, this script stores the default selection in a variable named selectedDefault. It uses this stored radio button to reset the selection if the user cancels. -
<html>
-
<head>
-
-
<script type="text/javascript">
-
var selectedDefault; // used to remember the radio button selected
-
function doClick(e){
-
if(confirm("are you sure?")==false){
-
try{
-
// FireFox case.
-
// Setting the target.checked property to the defaultChecked will
-
// deselect the current radio button and select the radio button that
-
// was previously selected.
-
e.target.checked = e.target.defaultChecked;
-
e.preventDefault();
-
e.stopPropagation();
-
}catch(ex){
-
// Internet Explorer case.
-
// Setting the target.checked property to the defaultChecked does not
-
// deselect the current radio button and select the radio button that
-
// was previously selected.
-
-
// The following selects the radio button that was previously selected
-
if(selectedDefault){
-
selectedDefault.checked = true;
-
}
-
//Deselecting the radio button that was the event's target
-
e.srcElement.checked = false;
-
-
//Preventing the event from continuing
-
e.returnValue = false;
-
e.cancelBubble = true;
-
}
-
return false;
-
}else{
-
if(e.srcElement){
-
selectedDefault = e.srcElement;
-
}
-
}
-
-
return true;
-
}
-
-
-
// This function is called to set the initial value of the selectedDefault
-
function initializeDefaultSelection(){
-
var radioButtons = document.getElementsByName('radio1');
-
for(var i=0; i<radioButtons.length; i++)
-
{
-
if(radioButtons[i].checked){
-
selectedDefault = radioButtons[i];
-
}
-
}
-
}
-
</script>
-
</head>
-
<body>
-
<form>
-
<input type="radio" name="radio1" id="xRadio" onclick="doClick(event);" />x
-
<input type="radio" checked name="radio1" id="yRadio" onclick="doClick(event);" />y
-
<input type="radio" name="radio1" id="zRadio" onclick="doClick(event);"/>z
-
-
<script type="text/javascript">
-
try{
-
// When the window is loaded, this calls the method that
-
// initializes the selectedDefault
-
window.attachEvent("onload",initializeDefaultSelection);
-
}catch(ex){}
-
</script>
-
</form>
-
</body>
-
</html>
This solution is still not going to help me with my problem though....
It's going to be really ugly if I have to store the default selected radio buttons in an array (more like create a hashtable and store them there)....
Is there a way to add the default selected radio button as a property to the radio buttons? Instead of having to store it in a variable?
Sign in to post your reply or Sign up for a free account.
Similar topics
by: back2grid |
last post by:
I'm basically looking for highlighting a datagrid row on selection a radio
button control. the problem i'm having is that the event sender(radio btn)
i'm getting is functioning as a checkbox. my...
|
by: Scott Natwick |
last post by:
I am having trouble validating that a selection has been made from a
RadioButton.
I created a script to trigger from a CustomValidator, however, it only works
when I run the app locally, from...
|
by: Michel Lapointe |
last post by:
Hello,
I would like to know if there is an event for the Datagridview control
that is trigger before the selection change and is cancelable.
I'm currently using the SelectionChanged event...
|
by: bkasmai |
last post by:
On editing textboxes on a webform, when a user tab to a textbox, the
text is highlighted or selected. Any accidental key press will remove
the original text. This has proved a problem for the...
|
by: Fnord Nase |
last post by:
Hi.
We're using the dblclick event in some parts of a web app interface,
which works okay, but when a user double clicks on a text element, the
browser selects some text before executing the...
|
by: =?Utf-8?B?TWlrZQ==?= |
last post by:
Hi Guys,
I have a gridview and the first column is a template that generate a
radiobuttons in the gridvew. and I would like that user will be able to
select one option from the list of the...
|
by: vinnie |
last post by:
I placed the following code into my page, but i get an error message,
why?
The code is:
if (this.RadioButtonContatto.Checked == "YES")
The error message is:
CS0117:...
|
by: Vinnie |
last post by:
I placed the following code into my page, but i get an error message,
why?
The code is:
if (this.RadioButtonContatto.Checked == "YES")
The error message is:
CS0117:...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
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,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
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...
| |
