radio buttons; unselect

@anothenNov 04.2010

The basic code I’m using is: (Thanks to JMRKER)

[code=php]<html> <head> <title>generic calculator javascript</title> <script type=”text/javascript”>

function CalculateTotals(info) { f=document.calculator; f.first_result.value = Number(info); }

</script> </head>

<BODY > <form NAME=”calculator” method=”post” ACTION=”” onsubmit=”return false”> <TABLE>

<TR> <TD>First Number</TD> <TD><input type=”radio” NAME=”first_number” value=”1″ onchange=”CalculateTotals(this.value)”></TD> </tr>

<tr> <td>Second Number</td> <td><input type=”radio” name=”first_number” value=”2″ onchange=”CalculateTotals(this.value)”></td> </tr>

<TR> <TD> First Result</td> <td> <input NAME=”first_result” size=”4″ > </TD> </TR>

</TABLE> </form> </body> </html>[/code]

and now I need to de-select the radio buttons after
it has been selected. I’ve looked around and can’t
seem to find a way.
Only other way I could figure is to refresh the page
but if I do that I loose all my variables.

It’s not at all finished yet, but if you want to
see what I’ve done so far:

~~[URL=”http://www.anothenservices.com/Test_Area/testfolder/jscrpt_ranking.html”]~~javascript currency ranking[/URL]

I’m liking Javascript much more, it’s not as difficult as
I thought it was.

to post a comment

JavaScript

8 Comments(s) _↴

@JMRKERNov 04.2010 — #One question:

Why not use checkboxes instead? Reset other when one is chosen.

and

One solution:

<i>
 </i>// set all of radio buttons to true||false
 function setRadioGroup(GrpName,flag) {
 var choices = document.getElementsByName(GrpName);
 for (var i=0; i&lt;choices.length; i++) { choices[i].checked = flag; }
 }

Code untested at this time, but it should work.

Now tested:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;generic calculator javascript&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 
 function CalculateTotals(info) {
 f=document.calculator;
 f.first_result.value = Number(info);
 }
 
 // set all of radio buttons to true||false
 function setRadioGroup(GrpName,flag) {
 var choices = document.getElementsByName(GrpName);
 for (var i=0; i&lt;choices.length; i++) { choices[i].checked = flag; }
 }
 
 &lt;/script&gt;
 &lt;/head&gt;
 
 &lt;BODY &gt;
 &lt;form NAME="calculator" method="post" ACTION="" onsubmit="return false"&gt;
 &lt;TABLE&gt;
 
 &lt;TR&gt;
 &lt;TD&gt;First Number&lt;/TD&gt;
 &lt;TD&gt;&lt;input  type="radio" NAME="first_number" value="1" onchange="CalculateTotals(this.value)"&gt;&lt;/TD&gt;
 &lt;/tr&gt;
 
 &lt;tr&gt;
 &lt;td&gt;Second Number&lt;/td&gt;
 &lt;td&gt;&lt;input type="radio" name="first_number" value="2"  onchange="CalculateTotals(this.value)"&gt;&lt;/td&gt;
 &lt;/tr&gt;
 
 &lt;TR&gt;
 &lt;TD&gt; First Result&lt;/td&gt;
 &lt;td&gt; &lt;input NAME="first_result" size="4" &gt; &lt;/TD&gt;
 &lt;/TR&gt;
 
 &lt;TR&gt;
 &lt;TD&gt; Reset&lt;/td&gt;
 &lt;td&gt; &lt;input type="button" value="Reset"
 onclick="setRadioGroup('first_number',false);document.calculator.first_result.value=''" &gt;
 &lt;/TD&gt;
 &lt;/TR&gt;
 
 &lt;/TABLE&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@anothenauthorNov 04.2010 — #YESS!! thanks again master JMRKER

I didn't really want the reset button so...

[code=php]<html>
 <head>
 <title>generic calculator javascript</title>
 <script type="text/javascript">
 
 // set all of radio buttons to true||false
 function setRadioGroup(GrpName,flag) {
 var choices = document.getElementsByName(GrpName);
 for (var i=0; i<choices.length; i++) { choices[i].checked = flag; }
 }
 
 function CalculateTotals(info) {
 setRadioGroup('first_number',false);
 document.calculator.first_result.value=''
 f=document.calculator;
 f.first_result.value = Number(info);
 }
 
 
 
 </script>
 </head>
 
 <BODY >
 <form NAME="calculator" method="post" ACTION="" onsubmit="return false">
 <TABLE>
 
 <TR>
 <TD>First Number</TD>
 <TD><input  type="radio" NAME="first_number" value="1" onchange="CalculateTotals(this.value)"></TD>
 </tr>
 
 <tr>
 <td>Second Number</td>
 <td><input type="radio" name="first_number" value="2"  onchange="CalculateTotals(this.value)"></td>
 </tr>
 
 <TR>
 <TD> First Result</td>
 <td> <input NAME="first_result" size="4" > </TD>
 </TR>
 
 
 </TABLE>
 </form>
 </body>
 </html>[/code]

@anothenauthorNov 04.2010 — #Okay, that's a Document Object, (document.getElementsByName()),

I haven't studied that very much,

Gee everytime I get into a project it turns into a

major research.

@JMRKERNov 04.2010 — #This logic ...

<i>
 </i>function CalculateTotals(info) {
 setRadioGroup('first_number',false);
 document.calculator.first_result.value=''
 f=document.calculator;
 f.first_result.value = Number(info);
 }

... does not make sense to me. ?

You reset the button status and clear the first_result.value

BUT THEN you put a number (info) into the first_result.value without any selections shown ???

What is that supposed to represent? No selections, but a value shows in the result.

If you keep that function, might as well make this minor change:

<i>
 </i>function CalculateTotals(info) {
 setRadioGroup('first_number',false);  // reset any radio buttons selected
 var f=document.calculator;
 f.first_result.value = '';                   // clear the result display
 f.first_result.value = Number(info);   // then set the result display ???
 // why bother to clear the value ???
 }

@anothenauthorNov 04.2010 — #Yeah, okay, just add it to the regular function,

instead of calling another function.

I'm not finished yet, but if you want to see what

I've done so far:

currency rank

The php version:

currency rank php

My goal is to write this currency ranking tool in javascript.

I like the convenience of using the radio buttons without

using a submit. It's much faster and sometimes time is

critical, even to seconds to get this information.

@anothenauthorNov 04.2010 — #That code that looked confusing to you

was only for testing,

a portion of the actual code is:

/////////////////////////////////////////////////////////

// set all of radio buttons to true||false

function setRadioGroup(GrpName,flag) {

var choices = document.getElementsByName(GrpName);

for (var i=0; i<choices.length; i++) { choices[i].checked = flag; }

}

function Calculate_currency(which_currency)

{

setRadioGroup('first_number',false);

f=document.calculator;

f.first_result.value = Number(which_currency);

////////////////////////////////////////////////////////

@anothenauthorNov 06.2010 — #Finished Product:

Currency Ranking

Thanks for your help

@JMRKERNov 06.2010 — #You're most welcome.

I'm glad you are happy.

Good Luck!

?

Also in #JavaScript _↴

Success!

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

Tweet This

radio buttons; unselect

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

radio buttons; unselect

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴