PDA

View Full Version : Remembering the last radio button chosen

Gary Williams
04-28-2003, 05:16 PM
Hi All,

I have a set of 4 radio buttons on a form. One of the buttons will be selected when the form loads. If the user clicks on one of the other buttons, a 'confirm' message box appears. If the user choses not to confirm the change, the message box disappears but the new (incorrect) button remains selected. I need the original button to be re-selected. automatically.

How do I do this?

Regards

Gary
beetle
04-28-2003, 05:21 PM
I got this to work
function confirmRadio( rb )
{
if ( confirm( "Are you sure you want to check this one?" ) )
{
rb.click();
}
return false;
}

...

<input type="radio" name="blah" onmousedown="return confirmRadio(this)">
<input type="radio" name="blah" onmousedown="return confirmRadio(this)">
<input type="radio" name="blah" onmousedown="return confirmRadio(this)">
<input type="radio" name="blah" onmousedown="return confirmRadio(this)">
cheesebagpipe
04-28-2003, 06:51 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function confirmRadio(oRadio) {
var grp = oRadio.form.elements[oRadio.name];
if (confirm('Check this one?'))
return (grp.prevRadio = oRadio);
else if (typeof grp.prevRadio != 'undefined')
return (grp.prevRadio.checked = true);
else {
var rad, i = 0;
while (rad = grp[i++])
if (rad.defaultChecked)
rad.checked = true;
}
return false;
}

</script>
</head>
<body>
<form>
<input type="radio" name="hoohah" onclick="return confirmRadio(this)" /> a<br />
<input type="radio" name="hoohah" onclick="return confirmRadio(this)" /> b<br />
<input type="radio" name="hoohah" onclick="return confirmRadio(this)" /> c<br />
<input type="radio" name="hoohah" onclick="return confirmRadio(this)" /> d<br />
</form>
</body>
</html>
Gary Williams
04-28-2003, 06:56 PM
Hi Beetle,

That works! Only trouble is, I can't 'cut in' the other javascript to be processed if the user confirms one of the other radio buttons. Each button has different jobs to do setting other values, etc.

ie:

function confirmRadio( rb )
{if ( confirm( "Are you sure you want to check this one?" ) )
{
rb.click();
}
document.frmeditquotation.cbocurrentduration.disabled=false;
document.frmeditquotation.cbocurrentagreement.disabled=false;
etc.

What is the rb for? Is this the position number in the radio button array?

Thanks

Gary
beetle
04-28-2003, 07:04 PM
The rb is a reference to the radiobutton that was clicked. What other stuff needs to be set?
Gary Williams
04-28-2003, 07:22 PM
Hi Beetle,

Each of the 4 buttons empties a text box and then disables it. That is:

Button 1 (if confirmed) clears Text Box 1 and disables it.
Button 2 (if confirmed) clears Text Box 2 and disables it.
Button 3 (if confirmed) clears Text Box 3 and disables it.
Button 4 (if confirmed) clears Text Box 4 and disables it.

At the moment, I do this by going around the loop and testing for 0, 1, 2 or 3. but this does not remember the previous button chosen. How can I check which button is now chosen?

Regards

Gary
cheesebagpipe
04-28-2003, 07:36 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function confirmRadio(oRadio, field) {
var grp = oRadio.form.elements[oRadio.name]; //get array with pointers to radio objects
if (confirm('Check this one?')) { //go ahead, make my day...
enableDisable(field); //routine

// to 'remember' which button was previously chosen, we create a custom property of the
// 'grp' array itself (logical namespace) and set it to the just clicked radio object
// then couple it with the return statement (saves another line)
// property is then re-used subsequent times

return (grp.prevRadio = oRadio);
}
else if (typeof grp.prevRadio != 'undefined') //changed their mind, so, check for that custom property, OK
return (grp.prevRadio.checked = true); //back to previous button, return
else { //first time, no .prevRadio yet
var rad, i = 0;
while (rad = grp[i++]) //loop through group
if (rad.defaultChecked) //look for default checked (HTML: <input checked.....>)
rad.checked = true; //re-check it
}
return false; //oh, well...
}

function enableDisable(which) {
var fields = ['text1' , 'text2' , 'text3' , 'text4']; //inputs
var el, i = 0, oForm = which.form;
which.value = ''; //blank passed field
while (el = oForm.elements[fields[i++]]) //loop
el.disabled = (el == which) ? true: false; //set all but passed field to disabled=false
}

</script>
</head>
<body>
<form>
<input type="radio" name="hoohah" onclick="return confirmRadio(this,text1)" /> 1<br />
<input type="radio" name="hoohah" onclick="return confirmRadio(this,text2)" /> 2<br />
<input type="radio" name="hoohah" onclick="return confirmRadio(this,text3)" /> 3<br />
<input type="radio" name="hoohah" onclick="return confirmRadio(this,text4)" /> 4<br /><br />
<input type="text" name="text1" value="blah" /><br />
<input type="text" name="text2" value="blah" /><br />
<input type="text" name="text3" value="blah" /><br />
<input type="text" name="text4" value="blah" />
</form>
</body>
</html>
Gary Williams
04-29-2003, 11:15 PM
Hi Guys,

Sorry to be dense, but I can't make head nor tail of this lot. The scripts look really elegant, I just cannot understand it sufficiently.

Here is the radio button code I need to use this 'remember' feature on:

<INPUT TYPE=RADIO onclick="propertyedit();" NAME="cbopropertytypenow" VALUE="let">

<INPUT TYPE=RADIO onclick="propertyedit();" NAME="cbopropertytypenow" VALUE="vacant">

<INPUT TYPE=RADIO onclick="propertyedit();" NAME="cbopropertytypenow" VALUE="holiday let">

<INPUT TYPE=RADIO onclick="propertyedit();" NAME="cbopropertytypenow" VALUE="other">

Whichever button is selected, calls its' own javascript to enable/disable various followon questions, validates data, etc. I do this by polling around the buttons to find which one is selected as normal.

How do I edit your script(s) to work with the above?

Thanks

Gary
cheesebagpipe
04-30-2003, 02:24 AM
I'm not doing all that well, either. If you substitute propertyedit(field); in the above for enableDisable(field); you'll call the mystery function in question, passing it the selected radio for any necessary guidance. This keeps sounding more involved, making generic answers pretty difficult. beetle's solution is fine; I just prefer the radio to be checked before unchecking for better feedback, but that's a UI issue.
Gary Williams
04-30-2003, 07:39 AM
Hi Cheesebagpipe,

I may be beginning to follow your code now. Time for some experimenting on my part.

Thanks

Gary
cheesebagpipe
04-30-2003, 05:02 PM
I may be beginning myself :D. Commented it up a tad, hope that helps.

cheers, cbp
Gary Williams
04-30-2003, 08:37 PM
Hi cbp,

Done it!!!. Although I still don't follow the script line by line, I now understand how to integrate with my javascript. I was definately very dense last night.

Here is your script and mine working together. Hope it helps anyone who sees this.

==============================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Button Test</title>
<script type="text/javascript" language="javascript">

function confirmRadio(oRadio) {
var grp = oRadio.form.elements[oRadio.name];
if (confirm('Check this one?')) {

buttoncheck(); // This is the function called if the user clicks on the OK button in the 'Confirm' box.

return (grp.prevRadio = oRadio);
}
else if (typeof grp.prevRadio != 'undefined')
return (grp.prevRadio.checked = true);
else {
var rad, i = 0;
while (rad = grp[i++])
if (rad.defaultChecked)
rad.checked = true;
}
return false;
}
// =======================================
function buttoncheck() {
buttoncheckOption = -1
for (i=0; i<document.form.button.length; i++) {
if (document.form.button[i].checked)
buttoncheckOption = i
}
if (buttoncheckOption == 0) {
alert ("Button 1 checked"); // Or any other javascripted process.
return false;
}
if (buttoncheckOption == 1) {
alert ("Button 2 checked"); // Or any other javascripted process.
return false;
}
if (buttoncheckOption == 2) {
alert ("Button 3 checked"); // Or any other javascripted process.
return false;
}
if (buttoncheckOption == 3) {
alert ("Button 4 checked"); // Or any other javascripted process.
return false;
}
}
</script>
</head>
<body>
<form name=form>
<input type="radio" name="button" onclick="return confirmRadio(this)"> 1<br>
<input type="radio" name="button" onclick="return confirmRadio(this)"> 2<br>
<input type="radio" name="button" onclick="return confirmRadio(this)"> 3<br>
<input type="radio" name="button" onclick="return confirmRadio(this)"> 4<br>
</body>
</html>

=====================================

I tried the same with Beetle's script, but I am still missing something critical with this. Here's the code so far:

=====================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
<HTML>
<HEAD>
<TITLE> New Radio Test </TITLE>

<SCRIPT LANGUAGE="JavaScript1.2">

function confirmRadio(rb)
{
if ( confirm( "Are you sure you want to check this one?" ) )
{
buttoncheck();
}
return false;
}
//=============================================
function buttoncheck() {
buttoncheckOption = -1
for (i=0; i<document.form.button.length; i++) {
if (document.form.button[i].checked)
buttoncheckOption = i
}
if (buttoncheckOption == 0) {
alert ("Button 1 checked");
document.form.button[i].checked;
return false;
}
if (buttoncheckOption == 1) {
alert ("Button 2 checked");
document.form.button[i].checked;
return false;
}
if (buttoncheckOption == 2) {
alert ("Button 3 checked");
document.form.button[i].checked;
return false;
}
if (buttoncheckOption == 3) {
alert ("Button 4 checked");
document.form.button[i].checked;
return false;
}
}
</script>
</head>
<body>
<form name=form>
<input type="radio" name="button" onclick="return confirmRadio(this)"> 1<br>
<input type="radio" name="button" onclick="return confirmRadio(this)"> 2<br>
<input type="radio" name="button" onclick="return confirmRadio(this)"> 3<br>
<input type="radio" name="button" onclick="return confirmRadio(this)"> 4<br>
</form>
</body>
</html>

==================================

Thanks for all your help.

Regards

Gary

ps. did you mean to include some code with your last post?
beetle
04-30-2003, 08:49 PM
It's much simpler than thatfunction confirmRadio(rb)
{
if ( confirm( "Are you sure you want to check this one?" ) )
{
buttoncheck( rb );
return true;
}
return false;
}

//=============================================
function buttoncheck( rb )
{
var rbGroup = rb.form.elements[rb.name];
var i = 0;
while ( rbGroup[i++] != rb ) {}
alert( "Button " + i + " checked" );
}
Gary Williams
05-01-2003, 07:56 AM
Hi Beetle,

I can now see what's happening. The script works but when you click on 'cancel', the original radio button is not re-selected. All the buttons remain blank.

I'm going to try to add a 'remember the original button' routine.

Thanks

Gary
Gary Williams
05-01-2003, 10:09 AM
Hi again Beetle,

I've almost got it with this code.

Regards

Gary

===========================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>

<script type="text/javascript" language="javascript">

function confirmRadio(rb) {

rememberbutton = -1
for (i=0; i<document.form.button.length; i++) {
if (document.form.button[i].checked)
rememberbutton = i
alert( "Button " + i + " checked" );
if ( confirm( "Are you sure you want to check this one?" ) )
{
buttoncheck(rb );
return true;
} else {
document.form.button[i].checked=true;
return false;
}
}
}

//=============================================

function buttoncheck(rb)
{
var rbGroup = rb.form.elements[rb.name];
var i = 0;
while ( rbGroup[i++] != rb ) {}
alert( "Button " + i + " checked" );
}
</script>
</head>
<body>
<form name="form">
<input type="radio" name="button" onclick="return confirmRadio(this)"> 1<br>
<input type="radio" name="button" onclick="return confirmRadio(this)"> 2<br>
<input type="radio" name="button" onclick="return confirmRadio(this)"> 3<br>
<input type="radio" name="button" onclick="return confirmRadio(this)"> 4<br>
</form>
</body>
</html>