HTML radio buttons

From: Radio 9 Feb 2011 15:20
To: Peter (BOUGHTONP) 9 of 95
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>
From: 99% of gargoyles look like (MR_BASTARD) 9 Feb 2011 16:12
To: Radio 10 of 95
I still have no idea what collection this document.listofoptions.elements object is referencing. Sounds like some library that's not linked.
From: Peter (BOUGHTONP) 9 Feb 2011 16:12
To: Radio 11 of 95
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.)
From: Peter (BOUGHTONP) 9 Feb 2011 16:14
To: 99% of gargoyles look like (MR_BASTARD) 12 of 95
It's the name of the first form.
From: Radio 9 Feb 2011 16:39
To: Peter (BOUGHTONP) 13 of 95

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:
From: Peter (BOUGHTONP) 9 Feb 2011 16:59
To: Radio 14 of 95
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.
From: Radio 9 Feb 2011 17:04
To: Peter (BOUGHTONP) 15 of 95
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.
From: af (CAER) 9 Feb 2011 18:21
To: Radio 16 of 95
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.
From: Matt 9 Feb 2011 20:49
To: af (CAER) 17 of 95
JavaScript: The Good Parts? Must be a pretty short book.
From: 99% of gargoyles look like (MR_BASTARD) 9 Feb 2011 21:25
To: Peter (BOUGHTONP) 18 of 95
So it is! :$
From: Drew (X3N0PH0N) 9 Feb 2011 22:04
To: Radio 19 of 95
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?
From: af (CAER) 9 Feb 2011 22:55
To: Matt 20 of 95
Eh? JavaScript is a fine language, it just has stupid bits that should be avoided. What don't you like about it?
From: Drew (X3N0PH0N) 9 Feb 2011 23:00
To: af (CAER) 21 of 95
It's a fine language which has been (historically) pisspoorly and inconsistently implemented/supported is the problem I think.

I mean, before jquery pretty much anything but the most simple of JS scripts had to start off with a huge block of conditional stuff to check which browser was being used and do stuff differently, depending. (And that's still there, just jquery handles it, thankfully).
From: af (CAER) 9 Feb 2011 23:17
To: Drew (X3N0PH0N) 22 of 95
I agree that DOM stuff has been inconsistent, and I totally understand why JavaScript has a bad reputation, it's just that the language itself (as opposed to the DOM interaction stuff) is actually really nice, and things like node.js are showing what it can do when separated from the browser.
From: Peter (BOUGHTONP) 9 Feb 2011 23:52
To: ALL23 of 95
Just to reinforce what Caer's saying - the reason for that book is to counter the bad attitude towards JavaScript.

If you take browsers and DOMs out of the picture, it's a rather nice language.

It's certainly not perfect - with crappy date handling, dodgy things like boolean objects, and so on - but it's generally no worse than any other language around today.
From: Matt10 Feb 2011 00:11
To: af (CAER) 24 of 95
Lots of things. The fact that it's spelt JavaScript with the capital S for one. There are also lots of things I like about it that I wish other languages had, like closures / anonymous functions.

But the cross-platform compatibility even when using JQuery is a still more work than it should be. Without it, it's a fucking nightmare. And I'm not just talking DOM access / manipulation here. There are many, many more things that you remain blissfully unaware of until you start writing better JavaScript code, then suddenly you have to fight to make things work.

If ECMA International had complete control of the runtime interpreter that browsers and other platforms use to run JavaScript code, the same way only the PHP Group provide the runtime interpreter for PHP code and Sun Oracle provide the JVM for Java it would be 20 billion times better.

It's a sad state of affairs that such a powerful language requires libraries like JQuery and tools like jslint to make it work.
From: Drew (X3N0PH0N)10 Feb 2011 00:27
To: Peter (BOUGHTONP) 25 of 95
If you take DOMs out of the picture it's not really a language that's used though. I mean, that is 99.9% of its use. Any discussion of JS where you ignore the DOM is not really a meaningful discussion of JS.
From: Peter (BOUGHTONP)10 Feb 2011 00:55
To: Drew (X3N0PH0N) 26 of 95

Any discussion of JavaScript where you limit yourself to DOMs is stuck in the 90s.

 

* Flash's ActionScript is JavaScript without a DOM.
* Mozilla Rhino is a JavaScript engine for the JVM - no DOM.
* node.js which Caer mentioned is a servery thing without a DOM.
* Qt (the desktop GUI framework) uses JavaScript as a general purpose language.
* Unity (3D game engine) supports JavaScript for game programming.

 

There's plenty of others I wasn't even aware of - OpenOffice and Photoshop both allow scripting with it, and numerous other minor things all use it.

 


It's probably is still >99.9% used by browsers (even though I'm sure that's not a remotely scientific statistic :P ), but non-browser use has definitely been growing these past few years.

EDITED: 10 Feb 2011 00:57 by BOUGHTONP
From: Drew (X3N0PH0N)10 Feb 2011 02:45
To: Peter (BOUGHTONP) 27 of 95
Flash's ActionScript is ActionScript. They are both ECMA-based but they are siblings and not parent/child.

Mozilla's Rhino is what? Never heard of it.

Server side JS is a silly idea. Not an inherently bad idea. Just... why another C-like scripting language on the server? Like there's not enough.

Qt uses fucking everything as a general purpose language. May as well say I can use JS as a scripting language in Unity. Which I can. But I can also use Python, C# or Boo.

Oh, you did say that (genuinely hadn't read that far yet).

They're still minority uses. The vast majority of JS ever written is DOM stuff. That is its primary use. Oh right, you said that too. What the fuck are you arguing with me for?

I'm not saying limit the discussion to the DOM. I'm saying acknowledge that that accounts for the massive majority of usage and that any other use is niche, at best.
From: Drew (X3N0PH0N)10 Feb 2011 02:46
To: Peter (BOUGHTONP) 28 of 95
(I'm not actually asking what Rhino is. I don't care. Partly because I don't care and partly because Mozilla won't be around as a browser much longer the way Chrome is growing)