HTML radio buttons

From: Radio 9 Feb 2011 12:47

To: ALL1 of 95

Is technical, or software the right place for code-y questions?

Anyway, why isn't my code working? I'm expecting that on clicking a radio button, then the value of it is passed to my variables, and then displayed.

I'm obviously doing something wrong though, as the textboxes displaying my variables simply say 'undefined'

HTML code:

<HTML>
 
<HEAD>
 
<script type="text/javascript">
 
//THIS IS THE FUNCTION FOR MANIPULATING CHECKBOXES AND PRICING
function calcUS(){
// Gathers field information
 
var f1 = (document.listofoptions.elements['Grp1'].value);
var jb = (document.listofoptions.elements['Grp1'].value);
 
 
document.displayForm.elements['JBTest'].value = jb;
document.displayForm.elements['F1Test'].value = f1;
 
}
 
//END OF CHECKBOX FUNCTION
 
 
</script>
 
</HEAD>
 
<BODY>
 
<form name="listofoptions">
 
  <TABLE>
         <TR>
             <td width= 50%>
                 Check1
             </td>
             <td width= 10%>
                 <input type="radio" name="Grp1" value="Check1" onclick="calcUS()">
             </td>
         </tr>
         <tr>
             <td width= 50%>
                 Check2
             </td>
             <td width= 10%>
                 <input type="radio" name="Grp1" value="Check2" onclick="calcUS()">
             </td>
         </tr>
  </TABLE>
 
</form>
 
 
<form name="displayForm">
 
  <TABLE>
         <TR>
             <td width= 50%>
                 <input type="textbox" readonly style="background: #DDD; color: #000;" name="JBTest" value="" style="width:80px">
             </td>
 
         </tr>
         <TR>
             <td width= 50%>
                 <input type="textbox" readonly style="background: #DDD; color: #000;" name="F1Test" value="" style="width:80px">
             </td>
 
         </tr>
  </TABLE>
 
</form>
 
</BODY>
</HTML>

EDITED: 9 Feb 2011 14:51 by RADIO

0/0

From: 99% of gargoyles look like (MR_BASTARD) 9 Feb 2011 13:03

To: Radio 2 of 95

38188.2 In reply to 38188.1

quote: Radio

Is technical, or software the right place for code-y questions?

What's wrong with the Coding folder?

Anyhoo, document.listofoptions.elements is not part of the DOM, so your function has no object to address. I guess you could use document.forms or even document.getElementsByTagName, but personally I'd be lazy and given each option an ID attribute the same vale as NAME and then use document.getElementById

0/0

From: Radio 9 Feb 2011 13:07

To: 99% of gargoyles look like (MR_BASTARD) 3 of 95

38188.3 In reply to 38188.2

D'oh - can't believe I missed that...

DOM?
It works fine for checkboxes, so I assumed it would work for a radio button too.

But basically, I want to have 4 radio buttons, and store Check1, Check2 etc. in a variable according to which one is selected.
How would I modify my code to use your suggestions to do that?

0/0

From: 99% of gargoyles look like (MR_BASTARD) 9 Feb 2011 13:13

To: Radio 4 of 95

38188.4 In reply to 38188.3

DOM - document object model

I'm really not sure why you're doing it this way. Once the form is submitted, the radio group value is sent to the processing script, but assuming that you have a good reason for that JS nonsense:

<input type="radio" name="Grp1" id="Check1" value="Check1" onclick="calcUS()">

And there was an error in my previous reply, ID should be set to the input's VALUE attribute not NAME

0/0

From: Radio 9 Feb 2011 13:17

To: 99% of gargoyles look like (MR_BASTARD) 5 of 95

38188.5 In reply to 38188.4

I'm doing it this way so that there's no need to submit the form.
There's a group of radio buttons for choosing from selected options, then a group of checkboxes for adding further options.

There are prices associated with each option, and then there's a 'total' box that keeps a running total without having to repeatedly press a submit button.

0/0

From: Radio 9 Feb 2011 13:19

To: 99% of gargoyles look like (MR_BASTARD) 6 of 95

38188.6 In reply to 38188.4

Thanks - but I'm still getting 'undefined' displayed when adding in that id attribute.

0/0

From: Radio 9 Feb 2011 14:51

To: ALL7 of 95

38188.7

Here's how it works with the checkbox - when I click that, the 3rd textbox displays either true or false as appropriate. I'm trying to do the same for the radio buttons and the first two textboxes.

HTML code:

<HTML>
<HEAD>
<script type="text/javascript">
 
//THIS IS THE FUNCTION FOR MANIPULATING CHECKBOXES AND PRICING
function calcUS(){
// Gathers field information
var f1 = document.getElementById['Check1'];
var jb = (document.listofoptions.elements['Grp1'].value);
var f2 = (document.listofoptions.elements['Check3'].checked);
 
//Posts results
document.displayForm.elements['JBTest'].value = jb;
document.displayForm.elements['F1Test'].value = f1;
document.displayForm.elements['F2Test'].value = f2;
}
//END OF CHECKBOX FUNCTION
</script>
</HEAD>
 
<BODY>
<form name="listofoptions">
  <TABLE>
         <TR>
             <td width= 50%>
                 Check1
             </td>
             <td width= 10%>
                 <input type="radio" name="Grp1" id="Check1"  value="Check1" onclick="calcUS()">
             </td>
         </tr>
         <tr>
             <td width= 50%>
                 Check2
             </td>
             <td width= 10%>
                 <input type="radio" name="Grp1" id="Check2"  value="Check2" onclick="calcUS()">
             </td>
         </tr>
         <tr>
             <td width= 50%>
                 Check2
             </td>
             <td width= 10%>
                 <input type="checkbox" name="Grp1" id="Check3"  value="Check3" onclick="calcUS()">
             </td>
         </tr>
  </TABLE>
</form>
 
<form name="displayForm">
  <TABLE>
         <TR>
             <td width= 50%>
                 <input type="textbox" readonly style="background: #DDD; color: #000;" name="JBTest" value="" style="width:80px">
             </td>
 
         </tr>
         <TR>
             <td width= 50%>
                 <input type="textbox" readonly style="background: #DDD; color: #000;" name="F1Test" value="" style="width:80px">
             </td>
 
         </tr>
         <TR>
             <td width= 50%>
                 <input type="textbox" readonly style="background: #DDD; color: #000;" name="F2Test" value="" style="width:80px">
             </td>
 
         </tr>
  </TABLE>
</form>
 
</BODY>
</HTML>

0/0

From: Peter (BOUGHTONP) 9 Feb 2011 15:06

To: Radio 8 of 95

38188.8 In reply to 38188.1

Use jQuery.

(Or Dojo,ExtJS,MooTools,whatever)

Doing it all manually is like putting in screws and nails with your bare hands, whereas a good library is like using automatic tools, and lets you focus on what you're trying to do, instead of being bogged down by fiddly bits.

0/0

From: Radio 9 Feb 2011 15:20

To: Peter (BOUGHTONP) 9 of 95

38188.9 In reply to 38188.8

With no instructions on how to go about using that, the advice is next t useless though, and doesn't get me any further.

I ended up doing it using some code found on the web that iterates throught he radio buttons to get which one is selected - code below.

Next question - assuming I have lots of these checkboxes for additional options, is there a way to get the row to be highlighted when I select the checkbox?

HTML code:

<HTML>
<HEAD>
<script type="text/javascript">
 
//THIS IS THE FUNCTION FOR MANIPULATING CHECKBOXES AND PRICING
function calcUS(){
// Gathers field information
 
var f2 = (document.listofoptions.elements['Check3'].checked);
 
{
 
 for (var i=0; i < document.listofoptions.Grp1.length; i++)
   {
   if (document.listofoptions.Grp1[i].checked)
      {
      var rad_val = document.listofoptions.Grp1[i].value;
      }
   }
 
//Posts results
document.displayForm.elements['JBTest'].value = rad_val;
document.displayForm.elements['F2Test'].value = f2;
}}
 
//END OF CHECKBOX FUNCTION
</script>
</HEAD>
 
<BODY>
<form name="listofoptions">
  <TABLE>
         <TR>
             <td width= 50%>
                 Check1
             </td>
             <td width= 10%>
                 <input type="radio" name="Grp1" id="Check1"  value="Check1" onclick="calcUS()">
             </td>
         </tr>
         <tr>
             <td width= 50%>
                 Check2
             </td>
             <td width= 10%>
                 <input type="radio" name="Grp1" id="Check2"  value="Check2" onclick="calcUS()">
             </td>
         </tr>
         <tr>
             <td width= 50%>
                 Check2
             </td>
             <td width= 10%>
                 <input type="checkbox" name="Check3" value="Check3" onclick="calcUS()">
             </td>
         </tr>
  </TABLE>
</form>
 
<form name="displayForm">
  <TABLE>
         <TR>
             <td width= 50%>
                 <input type="textbox" readonly style="background: #DDD; color: #000;" name="JBTest" value="" style="width:80px">
             </td>
 
         </tr>
         <TR>
             <td width= 50%>
                 <input type="textbox" readonly style="background: #DDD; color: #000;" name="F1Test" value="" style="width:80px">
             </td>
 
         </tr>
         <TR>
             <td width= 50%>
                 <input type="textbox" readonly style="background: #DDD; color: #000;" name="F2Test" value="" style="width:80px">
             </td>
 
         </tr>
  </TABLE>
</form>
 
</BODY>
</HTML>

0/0

From: 99% of gargoyles look like (MR_BASTARD) 9 Feb 2011 16:12

To: Radio 10 of 95

38188.10 In reply to 38188.9

I still have no idea what collection this document.listofoptions.elements object is referencing. Sounds like some library that's not linked.

0/0

From: Peter (BOUGHTONP) 9 Feb 2011 16:12

To: Radio 11 of 95

38188.11 In reply to 38188.9

If you want to learn you need to put a teeny bit effort in yourself. :P

1. Go to Google.
2. Enter "jquery".
3. Press enter, or click search.
4. Select the top result.
5. Select the Tutorials link.
6. Locate and click "Getting Started with jQuery".
7. Read it.

Because I'm nice, I'll save you some work and give you the link:
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

I'm not doing #7 for you though!

For some encouragement, here's your current script block translated:

HTML code:

<script src="jquery.js"></script>
<script type="text/javascript">
 
	function calcUS()
	{
		var f2 = $('[name=Check3]').is(':checked')
 
		var rad_val = $('[name=Grp1]:selected').val()
 
		$('[name=JBTest]').val( rad_val )
		$('[name=F2Test]').val( f2 )
	}
 
</script>

You might look at that now and go "Huh?", but read the tutorial and hopefully that'll then turn into an "Ah!" because that's fairly simple stuff.

I'm sure you can already see that it's almost half as much code - could even do it in just two lines if you wanted to skip the variables.

quote:

assuming I have lots of these checkboxes for additional options, is there a way to get the row to be highlighted when I select the checkbox?

Yes, but again it's much simpler with jQuery:

code:

$(this).parent('tr').css('background','red')

Would probably do it based on your current setup (might have that slightly off - I normally do things a bit differently.)

Doing it without jQuery, you'd need some code just after the "var rad_val ..." line to locate the parent tr and set its style attribute - I haven't bothered remembering how to do that sort of stuff, since I don't need to.

It might seem I'm going on about jQuery a lot, but ask anyone here that writes JavaScript and they'll agree that the days before the JS libraries came around, it was a horrible and painful experience as soon as you go beyond the basics.
With any JS library it takes away almost all the nasty stuff, and makes the simple stuff simpler too, so it really is worth investing some time in learning one.
(And jQuery is the library that more than 50% of people choose, so is a good starting point.)

0/0

From: Peter (BOUGHTONP) 9 Feb 2011 16:14

To: 99% of gargoyles look like (MR_BASTARD) 12 of 95

38188.12 In reply to 38188.10

It's the name of the first form.

0/0

From: Radio 9 Feb 2011 16:39

To: Peter (BOUGHTONP) 13 of 95

38188.13 In reply to 38188.11

Maybe if this was the start of something I was going to use a lot, but it's for a one off thing that I'm doing.

Anyways, I got it all sorted and although it's cumbersome code, it does work!

Attachments:

JBTest.htm

0/0

From: Peter (BOUGHTONP) 9 Feb 2011 16:59

To: Radio 14 of 95

38188.14 In reply to 38188.13

You should still learn it, even if you only do something like this once every six months, it'll still save you time in the long run.

0/0

From: Radio 9 Feb 2011 17:04

To: Peter (BOUGHTONP) 15 of 95

38188.15 In reply to 38188.14

I've bookmarked the link, so I'll see if I can get round to it - in the meantime I'm just happy that I've got it working, even if it's not the cleanest way of doing it.

0/0

From: af (CAER) 9 Feb 2011 18:21

To: Radio 16 of 95

38188.16 In reply to 38188.15

I second Peter's recommendation to use jQuery. As well as simplifying a lot of the DOM-related stuff you'll need to do, it also abstracts the various browser incompatabilities, saving you a lot of headaches.

Another thing, too: DOM-related functions are pretty slow, so stuff like this:

code:

for (var i=0; i < document.listofoptions.Grp1.length; i++)
   {
   if (document.listofoptions.Grp1[i].checked)
      {
      var rad_val = document.listofoptions.Grp1[i].value;
      }
   }

Could be better written like this:

javascript code:

var radGrp = document.listofoptions.Grp1,
    i = 0, len = radGrp.length,
    radVal;
 
while (!radVal && i < len) {
    if (radGrp[i].checked) {
        radVal = radGrp[i].value;
    }
    i += 1;
}

This way you're cacheing the DOM element names, so they don't need to be looked up for each loop iteration, and also the conditions of the loop mean you don't continue to loop once you've found the value you want. It also saves you some typing if you need to do more stuff with the elements within the loop :)

The way you've done it is fine for such a small-scale project, but it's a good idea to get into the habit of doing things "properly" from the start. If you really want to learn JavaScript the right way, I'd seriously recommend this book by Douglas Crockford.

0/0

From: Matt 9 Feb 2011 20:49

To: af (CAER) 17 of 95

38188.17 In reply to 38188.16

JavaScript: The Good Parts? Must be a pretty short book.

0/0

From: 99% of gargoyles look like (MR_BASTARD) 9 Feb 2011 21:25

To: Peter (BOUGHTONP) 18 of 95

38188.18 In reply to 38188.12

So it is! :$

0/0

From: Lucy (X3N0PH0N) 9 Feb 2011 22:04

To: Radio 19 of 95

38188.19 In reply to 38188.5

Just checking cos you've not explicitly said so: you're not calculating a price client-side and the trusting it server-side are you?

0/0

From: af (CAER) 9 Feb 2011 22:55

To: Matt 20 of 95

38188.20 In reply to 38188.17

Eh? JavaScript is a fine language, it just has stupid bits that should be avoided. What don't you like about it?

0/0

HTML radio buttons

Beehive Forum 1.5.2© 2024 Project Beehive Forum

Beehive Forum 1.5.2
© 2024 Project Beehive Forum