HTML radio buttons - Teh Forum

<body> <div id="header"> <span class="left"> <span class="back"><a href="lthread_list.php?webtag=DEFAULT"><span class="image mobile_back" title="Back"></span></a></span> <span class="image mobile_logo" title="Beehive Forum Logo"></span> </span> <ul> <li> <a class="reply_all" href="lpost.php?webtag=DEFAULT&reply_to=38188.0&return_msg=38188.15"> <span class="image mobile_reply_all"></span><span class="text">Reply to All</span> </a> </li> <li> <a class="navigation" href="#"> <span class="image mobile_navigation"></span><span class="text">Show messages</span> </a> </li> <li> <a class="main" href="#"><span class="image mobile_menu" title="Menu"></span> </a> </li> </ul> </div> <div class="menu main"> <ul> <li><a href="lthread_list.php?webtag=DEFAULT">Messages</a></li> <li><a href="lpm.php?webtag=DEFAULT">Inbox</a></li> <li><a href="lsearch.php?webtag=DEFAULT">Search</a></li> <li><a href="llogon.php?webtag=DEFAULT">Login</a></li> </ul> </div> <div class="menu navigation"><a href="lmessages.php?webtag=DEFAULT&msg=38188.1">1–10</a><a href="lmessages.php?webtag=DEFAULT&msg=38188.11">11–20</a><a href="lmessages.php?webtag=DEFAULT&msg=38188.21">21–30</a>…<a href="lmessages.php?webtag=DEFAULT&msg=38188.91">91–95</a></div> <div id="page_content"> <h3 class="thread_title"><a href="index.php?webtag=DEFAULT&amp;msg=38188.15">HTML radio buttons</a> </h3> <div id="messages" data-navigation="38188_15_95_10"> <a name="a38188_15"></a><div class="message" id="message_38188_15"> <div class="message_header"> <div class="message_from"> From: Radio<span class="message_time"> 9 Feb 2011 16:04</span> <div class="clearer"></div> </div><div class="message_to">To: Peter (BOUGHTONP) <span><span class="image post_read" title="Read: 9 Feb 2011 16:06"></span></span> <span class="message_count">15 of 95</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38188.15">38188.15</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38188.14">38188.14</a></div> <div class="message_body"> 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.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38188.15&return_msg=38188.15" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38188.15"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38188_16"></a><div class="message" id="message_38188_16"> <div class="message_header"> <div class="message_from"> From: af (CAER)<span class="message_time"> 9 Feb 2011 17:21</span> <div class="clearer"></div> </div><div class="message_to">To: Radio <span><span class="image post_read" title="Read: 9 Feb 2011 17:59"></span></span> <span class="message_count">16 of 95</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38188.16">38188.16</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38188.15#a38188_15" target="_self">38188.15</a></div> <div class="message_body"> 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.<br /> <br /> Another thing, too: DOM-related functions are pretty slow, so stuff like this:<br /> <div class="quotetext" id="code-"><b> code:</b></div><pre class="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; } } </pre><br /> Could be better written like this:<br /> <div class="quotetext" id="code-javascript"><b>javascript code:</b></div><pre class="code"><span style="color: #003366; font-weight: bold;">var</span> radGrp <span style="color: #339933;">=</span> document.<span style="color: #660066;">listofoptions</span>.<span style="color: #660066;">Grp1</span><span style="color: #339933;">,</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> len <span style="color: #339933;">=</span> radGrp.<span style="color: #660066;">length</span><span style="color: #339933;">,</span> radVal<span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">(</span><span style="color: #339933;">!</span>radVal <span style="color: #339933;">&&</span> i <span style="color: #339933;"><</span> len<span style="color: #009900;">)</span> <span style="color: #009900;">{</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>radGrp<span style="color: #009900;">[</span>i<span style="color: #009900;">]</span>.<span style="color: #660066;">checked</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span> radVal <span style="color: #339933;">=</span> radGrp<span style="color: #009900;">[</span>i<span style="color: #009900;">]</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span> i <span style="color: #339933;">+=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span> <span style="color: #009900;">}</span></pre>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 <span class="emoticon e_smile" title=":)"><span class="e__">:)</span></span><br /> <br /> 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 <a href="http://www.amazon.co.uk/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/ref=sr_1_1?ie=UTF8&qid=1297271837&sr=8-1&tag=tehforum-21/tehforum-21/">this book</a> by Douglas Crockford.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38188.16&return_msg=38188.15" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38188.16"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38188_17"></a><div class="message" id="message_38188_17"> <div class="message_header"> <div class="message_from"> From: Matt<span class="message_time"> 9 Feb 2011 19:49</span> <div class="clearer"></div> </div><div class="message_to">To: af (CAER) <span><span class="image post_read" title="Read: 9 Feb 2011 21:54"></span></span> <span class="message_count">17 of 95</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38188.17">38188.17</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38188.15#a38188_16" target="_self">38188.16</a></div> <div class="message_body"> JavaScript: The Good Parts? Must be a pretty short book.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38188.17&return_msg=38188.15" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38188.17"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38188_18"></a><div class="message" id="message_38188_18"> <div class="message_header"> <div class="message_from"> From: 99% of gargoyles look like (MR_BASTARD)<span class="message_time"> 9 Feb 2011 20:25</span> <div class="clearer"></div> </div><div class="message_to">To: Peter (BOUGHTONP) <span><span class="image post_read" title="Read: 9 Feb 2011 22:42"></span></span> <span class="message_count">18 of 95</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38188.18">38188.18</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38188.12">38188.12</a></div> <div class="message_body"> So it is! <span class="emoticon e_embarrassed" title=":$"><span class="e__">:$</span></span></div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38188.18&return_msg=38188.15" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38188.18"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38188_19"></a><div class="message" id="message_38188_19"> <div class="message_header"> <div class="message_from"> From: Drew (X3N0PH0N)<span class="message_time"> 9 Feb 2011 21:04</span> <div class="clearer"></div> </div><div class="message_to">To: Radio <span><span class="image post_read" title="Read: 10 Feb 2011 15:43"></span></span> <span class="message_count">19 of 95</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38188.19">38188.19</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38188.5">38188.5</a></div> <div class="message_body"> 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?</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38188.19&return_msg=38188.15" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38188.19"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38188_20"></a><div class="message" id="message_38188_20"> <div class="message_header"> <div class="message_from"> From: af (CAER)<span class="message_time"> 9 Feb 2011 21:55</span> <div class="clearer"></div> </div><div class="message_to">To: Matt <span><span class="image post_read" title="Read: 9 Feb 2011 22:15"></span></span> <span class="message_count">20 of 95</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38188.20">38188.20</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38188.15#a38188_17" target="_self">38188.17</a></div> <div class="message_body"> Eh? JavaScript is a fine language, it just has stupid bits that should be avoided. What don't you like about it?</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38188.20&return_msg=38188.15" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38188.20"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38188_21"></a><div class="message" id="message_38188_21"> <div class="message_header"> <div class="message_from"> From: Drew (X3N0PH0N)<span class="message_time"> 9 Feb 2011 22:00</span> <div class="clearer"></div> </div><div class="message_to">To: af (CAER) <span><span class="image post_read" title="Read: 9 Feb 2011 22:10"></span></span> <span class="message_count">21 of 95</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38188.21">38188.21</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38188.15#a38188_20" target="_self">38188.20</a></div> <div class="message_body"> It's a fine language which has been (historically) pisspoorly and inconsistently implemented/supported is the problem I think.<br /> <br /> 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).</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38188.21&return_msg=38188.15" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38188.21"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38188_22"></a><div class="message" id="message_38188_22"> <div class="message_header"> <div class="message_from"> From: af (CAER)<span class="message_time"> 9 Feb 2011 22:17</span> <div class="clearer"></div> </div><div class="message_to">To: Drew (X3N0PH0N) <span><span class="image post_read" title="Read: 9 Feb 2011 22:21"></span></span> <span class="message_count">22 of 95</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38188.22">38188.22</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38188.15#a38188_21" target="_self">38188.21</a></div> <div class="message_body"> 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.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38188.22&return_msg=38188.15" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38188.22"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38188_23"></a><div class="message" id="message_38188_23"> <div class="message_header"> <div class="message_from"> From: Peter (BOUGHTONP)<span class="message_time"> 9 Feb 2011 22:52</span> <div class="clearer"></div> </div><div class="message_to">To: ALL<span class="message_count">23 of 95</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38188.23">38188.23</a></div> <div class="message_body"> Just to reinforce what Caer's saying - the <em>reason</em> for that book is to counter the bad attitude towards JavaScript.<br /> <br /> If you take browsers and DOMs out of the picture, it's a rather nice language.<br /> <br /> 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.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38188.23&return_msg=38188.15" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38188.23"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a38188_24"></a><div class="message" id="message_38188_24"> <div class="message_header"> <div class="message_from"> From: Matt<span class="message_time"> 9 Feb 2011 23:11</span> <div class="clearer"></div> </div><div class="message_to">To: af (CAER) <span><span class="image post_read" title="Read: 10 Feb 2011 09:14"></span></span> <span class="message_count">24 of 95</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=38188.24">38188.24</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=38188.15#a38188_20" target="_self">38188.20</a></div> <div class="message_body"> 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.<br /> <br /> 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.<br /> <br /> 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 <s>Sun</s> Oracle provide the JVM for Java it would be 20 billion times better.<br /> <br /> It's a sad state of affairs that such a powerful language requires libraries like JQuery and tools like jslint to make it work.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=38188.24&return_msg=38188.15" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="38188.24"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div></div> <div class="message_page_footer"> <ul> <li class="right_col"><form accept-charset="utf-8" method="get" action="lmessages.php" target="_self"><input type="hidden" name="webtag" id="webtag" class="bhinputtext" value="DEFAULT" dir="ltr" /><input type="hidden" name="msg" id="msg" class="bhinputtext" value="38188.25" dir="ltr" /><input type="submit" name="submit" id="keep_reading" value="Keep reading…" class="button" /></form></li> </ul> </div> </div> </body>