Newby level question: Radio Buttons

[Ferret Face]

Hello,

I have a web page that gets the user to select items from a list of options. This list is a set of independant Radio Buttons. I did not use a Radio Button List because I wanted the possibility of multiple selections. However, one item is "None of the above" and I have placed some logic (autopostback, etc.) that will remove all previous selections if "None of the above" is chosen. My problem is this:

This list of Radio Buttons is at the bottom of the web page and with AutoPostback enabled (and someone selects one of these Radio Buttons) the web browser refreshes the screen and shows the top of the page. What can I do such that the screen refreshes and displays the bottom portion with the Radio Buttons? Or is there a way to do what I want to do without using AutoPostback?

TIA...

 

[S. Justin Gengo]

Ferret Face,

You could try out setting the page's Smart Navigation property to true. Smart navigation keeps the screen position during post backs. But it doesn't work for any browser (that I know of) except IE and it can cause flaky behaviour.

Because of this I created a javascript that will automatically scroll a page to whatever control you specify as a reusable object. Actually the javascript object contains many useful scripts.

You can download the Javascript component I built for free with full source code as a VS2003 project from my website, www.aboutfortunate.com. Also download the .chm help file. It gives help for every control I've created all of which are downloadable from my site for free with full source.

To get the javascript component click the "Code Library" link at the top of my page and then click the "Javacript" button on the left.

You'll want to use the "ScrollToElement" method of the component.

If you have any questions about the component or use thereof feel free to email me.

--
Sincerely,

S. Justin Gengo, MCP
Web Developer / Programmer

www.aboutfortunate.com

"Out of chaos comes order."
Nietzsche
Hello,

I have a web page that gets the user to select items from a list of options. This list is a set of independant Radio Buttons. I did not use a Radio Button List because I wanted the possibility of multiple selections. However, one item is "None of the above" and I have placed some logic (autopostback, etc.) that will remove all previous selections if "None of the above" is chosen. My problem is this:

This list of Radio Buttons is at the bottom of the web page and with AutoPostback enabled (and someone selects one of these Radio Buttons) the web browser refreshes the screen and shows the top of the page. What can I do such that the screen refreshes and displays the bottom portion with the Radio Buttons? Or is there a way to do what I want to do without using AutoPostback?

TIA...

 

[Karl Seguin]

One solution is to enable SmartNavigation, although there are a lot of
reasons not to do so
(http://weblogs.asp.net/ksamaschke/archive/2003/04/27/6085.aspx,
http://weblogs.asp.net/dreilly/archive/2004/09/14/229424.aspx

Alternatively, you might want to take a look at the free (but no source
code) Smart Scroller:
http://www.strengthtechnologies.com/scroll/

Finally, you can likely achieve all that you want in JavaScript if that's
acceptable. Here's a quick example, might not work but should give you an
idea...

<div id="choices">
<input type="Radio" name="1" value="choice1">
<input type="Radio" name="2" value="choice2">
<input type="Radio" name="3" value="choice3">
<input type="Radio" name="4" value="choice4">
<input type="Radio" name="5" value="none" onClick="Clicked('choices',
this);">
</div>

<script language="JavaScript">
function Clicked(containerName, source)
{
var container = document.getElementById(containerName);
if (!container){
//something went wrong
return;
}
var inputs = container.getElementsByTagName("INPUT");
for (var i = 0; i < inputs.length; ++i)
{
var input = inputs;
//if we have a radiobutton (we don't want to disable a textbox in here
too, or do we?) AND we aren't on the "none" button
if (input.type.toUpperCase() == "RADIO" && input.value != "none")
{
input.disabled = source.checked; //if our non button is checked, the
input is disabled, if it isn't checked, it's enabled.
}
}
}
</script>
--
MY ASP.Net tutorials
http://www.openmymind.net/

Hello,

I have a web page that gets the user to select items from a list of
options. This list is a set of independant Radio Buttons. I did not use a
Radio Button List because I wanted the possibility of multiple selections.
However, one item is "None of the above" and I have placed some logic
(autopostback, etc.) that will remove all previous selections if "None of
the above" is chosen. My problem is this:

This list of Radio Buttons is at the bottom of the web page and with
AutoPostback enabled (and someone selects one of these Radio Buttons) the
web browser refreshes the screen and shows the top of the page. What can I
do such that the screen refreshes and displays the bottom portion with the
Radio Buttons? Or is there a way to do what I want to do without using
AutoPostback?

TIA...

 

[Ferret Face]

Hey! Who you callin' Ferret Face?!
.... Wait, that's my name.

That JavaScript did the trick. I had to brush-up on JavaScript a bit to
do it. I ended up changing the line

if (input.type.toUpperCase() == "RADIO" && input.value != source.value)

to make it work.

Thanks!

One solution is to enable SmartNavigation, although there are a lot of
reasons not to do so
(http://weblogs.asp.net/ksamaschke/archive/2003/04/27/6085.aspx,
http://weblogs.asp.net/dreilly/archive/2004/09/14/229424.aspx

Alternatively, you might want to take a look at the free (but no source
code) Smart Scroller:
http://www.strengthtechnologies.com/scroll/

Finally, you can likely achieve all that you want in JavaScript if that's
acceptable. Here's a quick example, might not work but should give you an
idea...

<div id="choices">
<input type="Radio" name="1" value="choice1">
<input type="Radio" name="2" value="choice2">
<input type="Radio" name="3" value="choice3">
<input type="Radio" name="4" value="choice4">
<input type="Radio" name="5" value="none" onClick="Clicked('choices',
this);">
</div>

<script language="JavaScript">
function Clicked(containerName, source)
{
var container = document.getElementById(containerName);
if (!container){
//something went wrong
return;
}
var inputs = container.getElementsByTagName("INPUT");
for (var i = 0; i < inputs.length; ++i)
{
var input = inputs;
//if we have a radiobutton (we don't want to disable a textbox in here
too, or do we?) AND we aren't on the "none" button
if (input.type.toUpperCase() == "RADIO" && input.value != "none")
{
input.disabled = source.checked; //if our non button is checked, the
input is disabled, if it isn't checked, it's enabled.
}
}
}
</script>
--
MY ASP.Net tutorials
http://www.openmymind.net/

Hello,

I have a web page that gets the user to select items from a list of
options. This list is a set of independant Radio Buttons. I did not use a
Radio Button List because I wanted the possibility of multiple selections.
However, one item is "None of the above" and I have placed some logic
(autopostback, etc.) that will remove all previous selections if "None of
the above" is chosen. My problem is this:

This list of Radio Buttons is at the bottom of the web page and with
AutoPostback enabled (and someone selects one of these Radio Buttons) the
web browser refreshes the screen and shows the top of the page. What can I
do such that the screen refreshes and displays the bottom portion with the
Radio Buttons? Or is there a way to do what I want to do without using
AutoPostback?

TIA...