 Frinavale  9,735
Recognized Expert Moderator Expert
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 14949  Frinavale 9,735
Recognized Expert Moderator Expert
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
Frinavale 9,735
Recognized Expert Moderator Expert
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>
acoder 16,027
Recognized Expert Moderator MVP
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.
Frinavale 9,735
Recognized Expert Moderator Expert
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 :)
Frinavale 9,735
Recognized Expert Moderator Expert
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>
Frinavale 9,735
Recognized Expert Moderator Expert
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 code is highlighting all rows
selected previously. i'm using a metabuilder custom rowselector column and
other RB controls that implement grouping. any code would be greatly
appreciated
|
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 the debugger. Once I upload it to the
server and run, the script no longer triggers.
Any ideas?
Thanks in advance,
|
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 (using Full Row Select),
but this event is trigger only after the selection changed is completed and
therefore is non cancelable unless you keep the previous selection in a
variable and rechange the selection, which is painful.
|
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 users. Is it
possible to set a textbox so that the text is not selected when a user
tabs to that textbox? Any help on this will be appreciated.
BK
|
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 event handler. How can
I prevent this behaviour?
TIA,
nase
| | |
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 generated radio buttons in my first
column - in Client side. (as if in multiple choice exams)
Thanks.
|
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: 'System.Web.UI.WebControls.RadioButtonList' does not contain a
definition for 'Checked'
|
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: 'System.Web.UI.WebControls.RadioButtonList' does not contain a
definition for 'Checked'
|
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...
|
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...
|
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
| | |
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...
|
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...
|
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();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
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: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
