Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript
|
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old June 18th, 2008, 07:16 AM
Friend of Wrox
 
Join Date: Dec 2006
Posts: 104
Thanks: 9
Thanked 1 Time in 1 Post
Default Highlight text using form radio

After using some example javascript i have got multiple choice text to highlight and de-highlight in an example html form.

By either selecting the tick box or the associated text the answer text is highlighted.

The issue is using radio. What i need the javascript to do is to highlight the selected text and de-highlight the previous selected answer.

If you change the below code from radio to checkbox the code works as described above.

Code:
<style>

/* Answer Table  */    
.at { font-family:Tahoma;
    color:#000000;
    }

/* Highligh Answer */    
.active { font-family:Tahoma;
    color:#FF0000;
    }

/* De-Highligh Answer */    
.notactive { font-family:Tahoma;
    color:#000000;
    }

</style>


<script>
 
function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
        ele.className=ele.className.replace(reg,' ');
    }
}

function highlightStandard(elementId) {

    var elementId = document.getElementById(elementId);

    if(hasClass(elementId,'notactive')) {
        removeClass(elementId,'notactive');
        addClass(elementId,'active');
    } else if(hasClass(elementId,'active')) {
        removeClass(elementId,'active');
        addClass(elementId,'notactive');
    } else {
        addClass(elementId,'active');
    }
}



    function highlight(elementId) {

        var theElement = $(elementId);

        if(theElement.hasClassName('active')) {
            theElement.removeClassName('active');
            theElement.addClassName('notactive');
        } else if(theElement.hasClassName('notactive')) {
            theElement.removeClassName('notactive');
            theElement.addClassName('active');
        } else {
            theElement.addClassName('active');
        }
    }

</script>




      <td colspan="11" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="bmt2">

          <tr>
            <td width="133" height="4"></td>
            <td width="70"></td>
            <td width="626"></td>
            <td width="50"></td>
            <td width="120"></td>
          </tr>
          <tr>
            <td height="50"></td>

            <td align="center" valign="top" class="at"><label for="sa">1 ) <INPUT type="radio" name="radio" value="a" id="sa"  onclick="highlightStandard('myDiv');"/></label></td>
            <td valign="top" class="at" title=""><label for="sa"><span  onclick2="highlightStandard('myDiv');" /><div id="myDiv" >Answer 1</div>
</span>
            </label></td>


          </tr>
          <tr>
            <td height="50"></td>

            <td valign="top" align="center" class="at"><label for="sa2">2 ) <INPUT type="radio" name="radio" value="b" id="sa2" onclick="highlightStandard('myDiv2');"/></label></td>
            <td valign="top" class="at" title=""><label for="sa2"><span  onclick2="highlightStandard('myDiv2');" /><div id="myDiv2" >Answer 2</div>
</span>
            </label></td>


          </tr>
          <tr>
            <td height="48"></td>

            <td valign="top" align="center" class="at"><label for="sa3">3 ) <INPUT type="radio" name="radio" value="c" id="sa3"  onclick="highlightStandard('myDiv3');"/></label></td>
            <td valign="top" class="at" title=""><label for="sa3"><span  onclick2="highlightStandard('myDiv3');" /><div id="myDiv3" >Answer 3</div>
</span>
            </label></td>


          </tr>
          <tr>
            <td height="50"></td>

            <td valign="top" align="center" class="at"><label for="sa4">4 ) <INPUT type="radio" name="radio" value="d" id="sa4"  onclick="highlightStandard('myDiv4');"/></label></td>
            <td valign="top" class="at" title=""><label for="sa4"><span  onclick2="highlightStandard('myDiv4');" /><div id="myDiv4" >Answer 4</div>
</span>
            </label></td>


          </tr>
      </table>
      </td>
      <td> </td>
If anyone could point me in the right direction that would be superb, i am still very much a novice with Javascript.

Cheers


Aspless



 
Old June 18th, 2008, 01:36 PM
Friend of Wrox
 
Join Date: Dec 2006
Posts: 104
Thanks: 9
Thanked 1 Time in 1 Post
Default


I have found a much simpler example of a highlight background javascript function using radios.

Code:
<script type="text/javascript">
// <![CDATA[
function highlight(frm){
var inputs = frm.getElementsByTagName('INPUT');

for(var i = 0; i < inputs.length; i++){
if(inputs[i].type == 'radio'){
inputs[i].nextSibling.style.backgroundColor = (inputs[i].checked) ? 'yellow' : 'white';
}
}
}
// ]]>
</script>
</head>

<body>
<form>
<input name="radioBtn" type="radio" id="button1" onclick="highlight(this.form)" /><label for="button1">Radio Button 1</label><br />
<input name="radioBtn" type="radio" id="button2" onclick="highlight(this.form)" /><label for="button2">Radio Button 2</label><br />
<input name="radioBtn" type="radio" id="button3" onclick="highlight(this.form)" /><label for="button3">Radio Button 3</label>
</form>
</body>
</html>
The question is how would i re-write the line

Code:
inputs[i].nextSibling.style.backgroundColor = (inputs[i].checked) ? 'yellow' : 'white';
To select from a style class instead such as

Code:
/* Highligh Answer */    
.active { font-family:Tahoma;
    color:#FF0000;
    }
Any Thoughts,

Cheers


Aspless

 
Old June 18th, 2008, 02:18 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

className

But it's not supported in all browsers.
Code:
<html>
<head>
<style>
.style17 { background-color: black; color: yellow; font-weight: bold; font-size: large; }
label, .style33 { background-color: pink; color: red; font-weight: normal; font-size: small; }
</style>

<script type="text/javascript">
function highlight(btn)
{
   var inputs = btn.form.elements[btn.name];
   for(var i = 0; i < inputs.length; i++)
   {
       inputs[i].nextSibling.className = inputs[i].checked ? "style17" : "style33";
   }
}
</script>
</head>

<body>
<form>
<input name="radioBtn" type="radio" onclick="highlight(this)" /><label for="button1">Radio Button 1</label><br />
<input name="radioBtn" type="radio" onclick="highlight(this)" /><label for="button2">Radio Button 2</label><br />
<input name="radioBtn" type="radio"onclick="highlight(this)" /><label for="button3">Radio Button 3</label>
</form>
</body>
</html>
Works in MSIE & FF, but likely some platforms that won't like it.
 
Old June 18th, 2008, 02:20 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

Hope you noticed that...

-- I got rid of your useless id's on the radio buttons.
-- I simplified your JS code and at the same time ensured that *other* radio buttons on the same page would not pick up this behavior.
 
Old June 18th, 2008, 02:27 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

LOL!!! I'm an IDIOT!

Those "useless" id's are of course needed for the <label>s!!!

My code worked, but now the labels aren't labelling anything!

SORRY!

Put the id's back in!
 
Old June 19th, 2008, 02:51 AM
Friend of Wrox
 
Join Date: Dec 2006
Posts: 104
Thanks: 9
Thanked 1 Time in 1 Post
Default



Thanks chap..

ClassName works well..

Cheers for simplifying the code, js is still a tad beyond me!

Aspless



 
Old June 19th, 2008, 08:09 AM
Friend of Wrox
 
Join Date: Dec 2006
Posts: 104
Thanks: 9
Thanked 1 Time in 1 Post
Default


While testing the latest version of the script i have found an issue with the placement of the form labels
Code:
<label for="button1">
.
When the text associated with the radio form input are contained in the same
Code:
<td></td>
html tags the script works fine.

When the radio form input and the associated labels are in an adjacent
Code:
<td></td>
html tag the script no longer works.

Below is the working version of the script and html

Code:
<style>

/* Answer Table  */    
.at { font-family:Tahoma;
    color:#000000;
    }

/* Highligh Answer */    
.active { font-family:Tahoma;
    color:#FF0000;
    }

/* De-Highligh Answer */    
.notactive { font-family:Tahoma;
    color:#000000;
    }

</style>


<script type="text/javascript">
function highlight(btn)
{
   var inputs = btn.form.elements[btn.name];
   for(var i = 0; i < inputs.length; i++)
   {
       inputs[i].nextSibling.className = inputs[i].checked ? "active" : "notactive";
   }
}
</script>



<table width="300" cellpadding="5" cellspacing="5">
<form>
<tr>
<td class="at" align="left" valign="middle"> 1 ) 
<input name="radioBtn" type="radio" onClick="highlight(this)" id="button1" style="width:25px; height:25px;"/><label for="button1">  Radio Button 1</label></td>
</tr><tr>
<td class="at" align="left" valign="middle"> 2 ) 
<input name="radioBtn" type="radio" onClick="highlight(this)" id="button2" style="width:25px; height:25px;" /><label for="button2">  Radio Button 2</label></td>
</tr><tr>
<td class="at" align="left" valign="middle"> 3 ) 
<input name="radioBtn" type="radio" onclick="highlight(this)" id="button3" style="width:25px; height:25px;" /><label for="button3">  Radio Button 3</label></td>
</tr>
</form>
</table>
Below is the html where the radio input and the labels are in separate
Code:
<td></td>
tags.

Code:
<table width="300" cellpadding="5" cellspacing="5">
<form>
<tr>
<td class="at" align="left" valign="middle"> a ) <input name="radioBtn" type="radio" onClick="highlight(this)" id="button4" style="width:25px; height:25px;"/></td>
<td class="at" align="left" valign="middle"><label for="button4">Radio Button a</label></td>
</tr><tr>
<td class="at" align="left" valign="middle"> b ) <input name="radioBtn" type="radio" onClick="highlight(this)" id="button5" style="width:25px; height:25px;"/></td>
<td class="at" align="left" valign="middle"><label for="button5">Radio Button b</label></td>
</tr><tr>
<td class="at" align="left"  valign="middle"> c ) <input name="radioBtn" type="radio" onclick="highlight(this)" id="button6" style="width:25px; height:25px;"/></td>
<td class="at" align="left" valign="middle"><label for="button6">Radio Button c</label></td>
</tr>
</form>
</table>
The label works in selecting the correct radio button but the script does not work in this layout.

Is there any way to identify the labels in the js or something simpler.

Any thoughts would be appreciated..

Cheers


Aspless

 
Old June 19th, 2008, 08:34 AM
Friend of Wrox
 
Join Date: Dec 2006
Posts: 104
Thanks: 9
Thanked 1 Time in 1 Post
Default

After doing some more checking i am getting the script error

Code:
'nextSibling' is null or is not an object
Cheers


Aspless

 
Old June 19th, 2008, 02:00 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

Sure, what did you expect???

nextSibling means the next element in the DOM that is at the *SAME LEVEL* as the current one.

So with
<TD><INPUT><LABEL></TD>
both the INPUT and the LABEL have the same parent (to wit, the TD) and so of course they are "siblings" and LABEL is the "nextSibling" of INPUT.

But with
<TD><INPUT></TD>
<TD><LABEL></TD>
indeed INPUT Is a child of the first TD, but it is the *ONLY* child and so has no siblings. LABEL is a child of a completely different object.

While you *COULD* figure out what the correct relative node path is to get from INPUT to LABEL (in this case, I *think* it would be
    parentNode.firstSibling.firstChildNode
or something like that), I wouldn't recommend messing with that. What happens when somebody sticks something else in there?

The right generic solution to this is to give matching IDs to the <INPUT> and the <LABEL>, perhaps with a prefix to differentiate between them.

Example:
Code:
<html>
<head>
<style>
.style17 { background-color: black; color: yellow; font-weight: bold; font-size: large; }
label, .style33 { background-color: pink; color: red; font-weight: normal; font-size: small; }
</style>

<script type="text/javascript">
function highlight(btn)
{
   var inputs = btn.form.elements[btn.name];
   for(var i = 0; i < inputs.length; i++)
   {
       var labelID = "L" + inputs[i].id.substring(1);
       document.getElementById(labelID).className = inputs[i].checked ? "style17" : "style33";
   }
}
</script>
</head>

<body>
<form>
<table border=1 cellspacing=10>
<tr>
    <td>
        <input name="radioBtn" type="radio" id="R1" onclick="highlight(this)" />
    </td>
    <td>
         <label id="L1" for="R1">Radio Button 1</label>
    </td>
</tr>
<tr>
    <td>
        <input name="radioBtn" type="radio" id="R2" onclick="highlight(this)" />
    </td>
    <td>
        <label id="L2" for="R2">Radio Button 2</label><br />
    </td>
</tr>
<tr>
    <td>
        <input name="radioBtn" type="radio" id="R3" onclick="highlight(this)" />
    </td>
    <td>
         <label id="L3" for="R3">Radio Button 3</label>
    </td>
</tr>
</table>
</form>
</body>
</html>
 
Old June 25th, 2008, 03:50 AM
Friend of Wrox
 
Join Date: Dec 2006
Posts: 104
Thanks: 9
Thanked 1 Time in 1 Post
Default



Thanks Old Pedant,

The advice has been a real help. I have not used nextSibling in any of by basic js before and still getting to know the code .. as you may have guessed!!

Thanks for the addition of the ID's and associated js, this works really well and i can see why my previous effort was never going to work.

Aspless






Similar Threads
Thread Thread Starter Forum Replies Last Post
Bug in the highlight method for form objects cheets BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 3 June 11th, 2009 08:05 PM
quick one: onblur - text box highlight retroviz BOOK: ASP.NET 2.0 Website Programming Problem Design Solution ISBN: 978-0-7645-8464-0 2 February 6th, 2008 05:18 PM
How do I highlight a split function text? gilgalbiblewheel Classic ASP Basics 4 January 26th, 2006 04:25 PM
Select or Highlight Text ~Bean~ General .NET 0 November 9th, 2005 12:31 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.