dialog box and radio buttons

[tonynoriega]

i have a CSS w/javscript dialog box that pops up when a user on my site clicks: "Register Now!"

in that dialog box there are 5 radio buttons.

[]Member
[]Guest
[]provider
[]employer
[]broker

once they select a radio button, the dialog box closes and the visitor is taken to their respective registration page.

in my testing, as i went "back" and clicked the "register now" link again, called the dialog box, the radio button is checked from the last time i used it...

how can i clear the radio buttons each time the dialog box is loaded?

<script language="javascript">
document.SecLoginM.username.focus();
</script>

<script language="javascript" type="text/javascript">
function revealModal(divID)
{
window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
document.getElementById(divID).style.display = "block";
document.getElementById(divID).style.top = document.body.scrollTop;
}

function hideModal(divID)
{
document.getElementById(divID).style.display = "none";
}
</script>

<a href="#" id="Button1" onclick="revealModal('modalPage')">Register now!</a></li>

<div id="modalPage">
<div class="modalBackground">
</div>
<div class="modalContainer">
<div class="modal">
<div class="modalTop"><a href="#" onclick="hideModal('modalPage')">Close</a></div>
<div class="modalBody">

<SCRIPT LANGUAGE="JavaScript">
function go(loc) { window.location.href = loc; }
</script>

<form name="form">
<input type="radio" name="loc" onClick="go('https://www.example1.com'); hideModal('modalPage')"> Member<br>
<input type="radio" name="loc" onClick="go('https://www.example2.com'); hideModal('modalPage')"> Guest <br />
<input type="radio" name="loc" onClick="go('https://www.example3.com'); hideModal('modalPage')"> Employer <br />
<input type="radio" name="loc" onClick="go('https://www.example4.com'); hideModal('modalPage')"> Provider <br />
<input type="radio" name="loc" onClick="go('https://www.example5.com'); hideModal('modalPage')"> Broker <br />
</form>

[Fotiman]

From a usability point of view, it's probably not a good idea to redirect onclick, for several reasons:

1. Users with JavaScript disabled will never be able to register. For that matter, your "Register now!" button will be broken as well.
2. Most users won't expect a radio button selection to send them to a new page.

It would be better to make those links.

[tonynoriega]

well that pretty much just kills the dialog box...

but i do see your point...

are there any baseline stats on users who JS is turned off?
just curious.

[Fotiman]

It's estimated that somewhere around 95-98% of users have JavaScript enabled. Don't forget, though, that search engines don't. Also, 2-5% doesn't sound like a lot, but if you have a site that gets 100,000 hits per year, that's 2000-5000 users who couldn't get to your content.

It's best to use progressive enhancement. Provide baseline functionality that works for all users, then you can enhance the user experience with JavaScript. For example, if your "Register now" link was a regular link to another page that displayed only the Member, Guest, Employer, Provider, and Broker links, and then you use JavaScript to enhance your link so that clicking on it brings up a dialog box with those links instead, that would be a good use of progressive enhancement.

[rocknbil]

how can i clear the radio buttons each time the dialog box is loaded?

The above will likely take you on a better path - but the direct answer to this, it is the browser that is caching/remembering the button selection. By default a radio button should have one checked anyway. This is the way radio buttons are supposed to work.

You can squelch this by doing something server side to prevent caching of this page, or generate the radio buttons dynamically on load. A quick fix for this, though it's ugly and is a bad idea if this page needs any search engine indexing, is to generate a unique number and always append it to the query string:

form.php?s=2343456231756865

When you return to the page, a new number is generated, browser thinks it's a new page, will not load the radio as checked.

[tonynoriega]

Ok, i like the progressive enhancement thought. new practice for me.

ok, so i create a regular hyperlink to a basic page:

<a href="registerpage.asp">Register Now!</a>

registerpage.asp has, instead of radio buttons, regular links:

<a href="memberpage.asp">Member</a>
<a href="guestpage.asp">Guest</a>
<a href="employerpage.asp">Employer</a>
<a href="providerpage.asp">Provider</a>
<a href="brokerpage.asp">Broker</a>

simple enough, and should work for all users.

now, my question is, how do i make a regular link progressive, and incorporate JS into it as well?

would i call the JS, in the <head> for instance, strip the inline JS, give the link a name or ID, i.e.

<a href="registerpage.asp" name="registernow">Register Now!</a>

then in the JS, would i add something to identify any anchor links with the name "registernow" to call the JS?
(JS Novice as you can tell by my terminology)

for instance (lehmans terms):

if( document.getElementByTagName( 'registernow') ){
function revealModal(divID)
{
window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
document.getElementById(divID).style.display = "block";
document.getElementById(divID).style.top = document.body.scrollTop;
}
}

something like that?

will this call teh JS IF they have JS turned on, and call the registerpage.asp if they dont have JS turned on?

[Fotiman]

Here is a very quickly hacked together example. Note, it uses the Yahoo UI Library. Also note, in this example, the resource located at register.htm is NOT a valid HTML document. This is just a rough example. If you were to implement a more full functioning and proper example, register.htm would contain a valid document and you would need to parse the result to find only the set of links, or alternatively you could setup a web service that fetched only the list of links... then this would send a request to that service, and the ASP page that you'd like to would also use that service server side to fetch the set of links... a bit beyond the scope of this example. :)
Wanted to get something up here before the weekend, so here it is:

<html>
<head>
<title>Page 1</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/container/assets/skins/sam/container.css">
</head>
<body class="yui-skin-sam">
<a href="register.htm" id="registernow">Register Now!</a>
<div id="myDialog"></div>
<script type="text/javascript" 
    src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/connection/connection-min.js&2.8.0r4/build/container/container-min.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
  var E = YAHOO.util.Event,  // Shorthand variable
    container = document.getElementById('myDialog');
  // Attach event handler
  E.on('registernow', 'click', function (e) {
    // When 'registernow' is clicked, stop the browser from following link
    E.stopEvent(e);
    // And instead, create a modal dialog that has the contents of
    // the linked page
    var transaction = YAHOO.util.Connect.asyncRequest('GET', this.href, {
      success: function (o) {
        var myDialog = new YAHOO.widget.SimpleDialog(container, {
            width: "20em",
            fixedcenter:true,
            modal:true,
            visible:false,
            draggable:false });
        myDialog.setHeader('Register Now!');
        myDialog.setBody(o.responseText);        
        myDialog.render();
        myDialog.show();
      },
      failure: function (o) {}
    }, null);
  });  
});
</script>
</body>
</html>

register.htm

<ul>
  <li><a href="http://www.example.com/Member">Member</a></li>
  <li><a href="http://www.example.com/Guest">Guest</a></li>
  <li><a href="http://www.example.com/Employer">Employer</a></li>
  <li><a href="http://www.example.com/Provider">Provider</a></li>
  <li><a href="http://www.example.com/Broker">Broker</a></li>
</ul>