Radio Button Onchange Help

@HDCAug 17.2006

Has anyone seen a script that will onchange a radio button from one to another and add a second value field?

Here is my example:
If I select radio sortby 1 I just get sortby=distance.
If I select radio sortby 2 I get both sortby=registration AND 3. reverse=yes

See example:
1. <input type=”radio” name=”sortby” value=”distance”> Sort By Zip Code Radius

2. <input type=”radio” name=”sortby” value=”sortable_register_date”> Sort By Registration Date

3. <input type=”hidden” name=”reverse” value=”yes”>

to post a comment

JavaScript

9 Comments(s) _↴

@KorAug 17.2006 — #why do you need the hidden input? can't you manage the data on the server level?

@HDCauthorAug 17.2006 — #Unfortunately not, by default the perl script has the results in random order. So choosing sortable_register_date will list them from oldest to newest and then adding reverse=yes results them how I want, from newest members on top.

Hard coding any of this would result in my zip code distance not functioning properly from the closest distance on top in my results when it is chosen.

Hope this makes since.

@HDCauthorAug 18.2006 — #Does anyone else have an idea for this. Below is what I started to work on but got hung up and thought I would ask before spending alot of time.

<HEAD>

<script language="JavaScript">



</script>

</HEAD>

<BODY>

Sort Distance:

<input type=radio name=distance size=30 value="distance" style="visibility:hidden">

<br><strong>OR</strong><br>

Sort Date:

<input type=radio name="sortable_register_date" onClick="showDiv( 'sortable_register_date' );">

<input type=hidden name="reverse" size=20 value="yes" style="visibility:hidden">

@KorAug 18.2006 — #just a note, so far... document.all is a deprecated only IE method to refere an element. use modern DOM methods (by id, by name, by tagname) or, at least (but it works only for the form's elements), the classical reference

[COLOR=Blue]document.forms['formname'].elements['elname'][/COLOR]

or even in the short JSON

[COLOR=Blue]document['formname']['elname'][/COLOR]

or even

or, if no need for a dynamic handle

[COLOR=Blue]document.formname.elname[/COLOR]

One more note: If an input is type="hidden" does not mean only that he is not [I]visual[/I] invisible. He simply has a [B]type[/B], not a [B]visibility[/B]. It is used to collect and submit some data which are not to be shown in the address bar as querry. Despite the resemblance, type="hidden" is completely other thing than CSS visibility="hidden"

@HDCauthorAug 18.2006 — #Thanks Kor for the help. Going this route do you think it is possible to do what I want?

@KorAug 18.2006 — #I confess I have not really understood your first aim. Can you detail a little bit. It looks like an easy task, if clear enough. Now: you want a text field to be visible when one of the radio buttons is checked and "visual hidden" (and will not submit it's data) when the other one is checked?

@HDCauthorAug 18.2006 — #Actually it is very simple.

I want 2 different radio buttons. If the second button is chosen then I want another radio button chosen as well, or preferably hidden for the "reverse=yes" since visitors don't need to see this.

@muazzezAug 19.2006 — #code:

[color=olive]

<html>

<SCRIPT>

function HDC() {

var a = document.getElementById('r0');

var b = document.getElementById('r1');

if (a.checked==true) { b.checked=true ; }

}

</SCRIPT>

<body>

<form>

<input type="radio" id="r0" name="r0" onclick="HDC();"> evet

<input type="radio" id="r1" name="r1" onclick="HDC();"> hayır

</form>

</body>

</html>[/color]

[color=tomato]

<html>

<SCRIPT>

function HDC() {

var a = document.getElementById('r0');

var b = document.getElementById('r1');

if (a.checked==true) {

b.checked=true;

b.style.display="block" }

}

</SCRIPT>

<body>

<form>

<input type="radio" id="r0" name="r0" onclick="HDC();">evet

<input type="radio" id="r1" name="r1" onclick="HDC();" style="display:none;">hayır

</form>

</body>

</html>[/color]

[color=blue]

<html>

<SCRIPT>

function HDC() {

var a = document.getElementById('r0');

var b = document.getElementById('r1');

var c = document.getElementById('div');

if (a.checked==true) {

c.style.display="block" }

}

</SCRIPT>

<body>

<form>

<input type="radio" id="r0" name="r0" onclick="HDC();"> evet

<div style="display:none;" id ="div">

<input type="radio" id="r1" name="r1" onclick="HDC();" > hayır

</div>

</form>

</body>

</html>[/color]

[color=lightseagreen]

<html>

<SCRIPT>

function HDC() {

var a = document.getElementById('r0');

var b = document.getElementById('r1');

var c = document.getElementById('div');

if (a.checked==true) {

b.checked=true;

c.style.display="block" }

}

</SCRIPT>

<body>

<form>

<input type="radio" id="r0" name="r0" onclick="HDC();"> evet

<div style="display:none;" id ="div">

<input type="radio" id="r1" name="r1" onclick="HDC();" > hayır

</div>

</form>

</body>

</html> [/color]

@KorAug 21.2006 — #Yet I don't understand why you need that. If a radio button is checked and itls value, nomatter which, is submitted to the server, to an application, you may simply instruct [I]that[/I] application to set [I]that[/I] value YES to be used further.

Also in #JavaScript _↴

drop down box with text area Cookie popup div preloading images for mouseover

Success!

Help @HDC spread the word by sharing this article on Twitter...

Tweet This

Radio Button Onchange Help

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Radio Button Onchange Help

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴