We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

very complicated javascript logic for html radio button

mattibutt
mattibutt asked
on
Medium Priority
401 Views
Last Modified: 2013-11-10
hi
i have a quiz which has three answers i have to apply a new rule on the selected answer once user select one of the option i want the color of the selected radio button to remain different then other two options.
currently i am using label which was suggested by on of the expert with the label when user click anywhere in the div region the radio buttons get selected and using the css the hover is done for the div.
now what i want is basically once user select one of the radio button then it should keep its appearance different then other two answers
//smarty html code
      <label for="rad1" ><div id="tri_answer"> 
  
    
       <input id="rad1"  type="radio" name="{php} echo $i+1; {/php}"  value="option{php}echo $z[0]+1; {/php}" />
       {php} echo $t[0] {/php} </div>
           </label>
  <td valign="bottom"><label for="rad2"><div id="tri_answertwo"> &nbsp;
       <input id="rad2" type="radio" name="{php} echo $i+1; {/php}"  value="option{php}echo $z[1]+1; {/php}" />{php}  echo $t[1]; {/php} </div></label>
<td><label for="rad3" ><div id="tri_answerthree"> &nbsp;
      <input id="rad3"type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[2]+1; {/php}" />
{php} echo $t[2]; {/php}</div></label></td>

Open in new window

answers-example.JPG
Comment
Watch Question

Commented:
Just a heads up, valid HTML does NOT allow <div/> tags inside <label/> tags. You may want to create something like:

<div id="radio1question1" onclick="document.getElementById('myRadioButtonName').checked = true">My question here.</div>

In regards to keeping the style, my assumption is you are posting back to this page, dynamically loading data, or something to that extent. What you will need to do is to loop through your radio buttons, determine which is checked, and apply the style to the proper div.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I am not sure I like the label idea since it does not seem like valid html
that said, try this:

<style>
.selected { border:5px solid teal}
.normal { border:2px solid black}
</style>
<script type="text/javascript">
var saveRad = "";
function colorMe(theRad) {
  if (saveRad) document.getElementById('tri_answer'+saveRad).className='normal';
  saveRad = theRad.id.replace('rad','');
  document.getElementById('tri_answer'+saveRad).className='selected';
}
</script>
 
//smarty html code
<label for="rad1"><div id="tri_answer1"><input id="rad1" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[0]+1; {/php}" onClick="colorMe(this)"/>{php} echo $t[0] {/php} </div></label>
<label for="rad2"><div id="tri_answer2"><input id="rad2" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[1]+1; {/php}" onClick="colorMe(this)"/>{php}  echo $t[1]; {/php} </div></label>
<label for="rad3"><div id="tri_answer3"><input id="rad3" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[2]+1; {/php}" onClick="colorMe(this)"/>{php} echo $t[2]; {/php}</div></label>

Open in new window

You can do this things very easily with jQuery. It can be also done without toolkits, if you need, i can help with it too.
<!-- jquery cdn -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- css -->
<style>
.x { background-color:#D9F1FF;margin:1px;border-bottom:1px solid #33CCFF; }
.x_hover { background-color:#9AC9FC;border-bottom:1px solid #75B5FB; }
</style>
<!-- html part -->
<div class="x"><input type="radio" name="a" checked class="" value="1"> Alpha </div>
<div class="x"><input type="radio" name="a" value="2"> Beta </div>
<div class="x"><input type="radio" name="a" value="3"> Delta </div>
<!-- script -->
<script>
 
$().init(function() {
checkControl = function() {
$('input[type=radio]').parent().removeClass('x_hover');
$('input[type=radio][checked]').parent().addClass('x_hover');
}
$('input[type=radio]').bind('click',checkControl)
checkControl();
});
</script>

Open in new window

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Easy if you know how...

Author

Commented:
hi guys
thanks for all your quick responses i am just thinking which one should i go for
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
they do the same, one of them needs a framework you might use anyway.

Mine does not check at load time in case of a reload - to do that I would need to loop

Author

Commented:
hi
i have been sending messages but its not posting here

Author

Commented:
ok i have tried  to apply gokce_yalcin soloution on my div it doesnt work i dont know why

Author

Commented:
this is the way my div is written

#tri_answer
{
      font-size:13px;
color:#000;
      margin-top:35px;
      text-align:left;

      font-weight:bold;
            text-align:left;
            background:#350808 url(images/que.png) repeat-x top left;
      width:300px;
      height:60px;
      border-color:#000;
      border-style:solid;
      border-width:5px;
      padding-left:5px;
      padding-right:5px;

}

#tri_answer:hover
{
       behavior:url("csshover.htc");
      border:11px solid #990;
      

background:#CCC;
      padding:2px;
}
yes they are practically doing the same thing. Mine preserve states as a plus but like mplungjan said, a loop can be added.
for(i=1;i<4;i++) {
  o = document.getElementById('rad'+i);
  if (o.checked) o.className='selected'
  else o.className = 'normal';
}

Open in new window

Author

Commented:
i have added this look still not working
I just made you an demo, not turnkey job.

But it should work for with any code, even without requiring ID's. Just add container divs, and assign a class.

Your code will be:
{literal}
<style>
.x { background-color:#D9F1FF;margin:1px;border-bottom:1px solid #33CCFF; }
.x_hover { background-color:#9AC9FC;border-bottom:1px solid #75B5FB; }
</style>
<script>
 
$().init(function() {
checkControl = function() {
$('input[type=radio]').parent().removeClass('x_hover');
$('input[type=radio][checked]').parent().addClass('x_hover');
}
$('input[type=radio]').bind('click',checkControl)
checkControl();
});
</script>
{/literal}
 
<label for="rad1"><div class="x" id="tri_answer1"><input id="rad1" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[0]+1; {/php}" onClick="colorMe(this)"/>{php} echo $t[0] {/php} </div></label>
<label for="rad2"><div class="x" id="tri_answer2"><input id="rad2" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[1]+1; {/php}" onClick="colorMe(this)"/>{php}  echo $t[1]; {/php} </div></label>
<label for="rad3"><div class="x" id="tri_answer3"><input id="rad3" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[2]+1; {/php}" onClick="colorMe(this)"/>{php} echo $t[2]; {/php}</div></label>

Open in new window

Oh, forgot to add jquery cdn:
{literal}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
.x { background-color:#D9F1FF;margin:1px;border-bottom:1px solid #33CCFF; }
.x_hover { background-color:#9AC9FC;border-bottom:1px solid #75B5FB; }
</style>
<script>
 
$().init(function() {
checkControl = function() {
$('input[type=radio]').parent().removeClass('x_hover');
$('input[type=radio][checked]').parent().addClass('x_hover');
}
$('input[type=radio]').bind('click',checkControl)
checkControl();
});
</script>
{/literal}
 
<label for="rad1"><div class="x" id="tri_answer1"><input id="rad1" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[0]+1; {/php}" onClick="colorMe(this)"/>{php} echo $t[0] {/php} </div></label>
<label for="rad2"><div class="x" id="tri_answer2"><input id="rad2" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[1]+1; {/php}" onClick="colorMe(this)"/>{php}  echo $t[1]; {/php} </div></label>
<label for="rad3"><div class="x" id="tri_answer3"><input id="rad3" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[2]+1; {/php}" onClick="colorMe(this)"/>{php} echo $t[2]; {/php}</div></label>

Open in new window

Author

Commented:
hi buddy
thanks for that i am sorry for not understanding straightforward logic  it seems to be ok now i am gonna test and get back to you thank you once again
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
You of course want to remove
onClick="colorMe(this)"
if you do not use it
mplungjan is right,

should:
{literal}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
.x { background-color:#D9F1FF;margin:1px;border-bottom:1px solid #33CCFF; }
.x_hover { background-color:#9AC9FC;border-bottom:1px solid #75B5FB; }
</style>
<script>
 
$().init(function() {
checkControl = function() {
$('input[type=radio]').parent().removeClass('x_hover');
$('input[type=radio][checked]').parent().addClass('x_hover');
}
$('input[type=radio]').bind('click',checkControl)
checkControl();
});
</script>
{/literal}
 
<label for="rad1"><div class="x" id="tri_answer1"><input id="rad1" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[0]+1; {/php}"/>{php} echo $t[0] {/php} </div></label>
<label for="rad2"><div class="x" id="tri_answer2"><input id="rad2" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[1]+1; {/php}"/>{php}  echo $t[1]; {/php} </div></label>
<label for="rad3"><div class="x" id="tri_answer3"><input id="rad3" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[2]+1; {/php}"/>{php} echo $t[2]; {/php}</div></label>

Open in new window

Author

Commented:
hi
problem is when i use the code without my div styles it works fine but when i apply these new rules i lose my old design it doesnt work with my divs i dont know why

Author

Commented:
if you look in the image the divs which are not loaded from style are able to highlight but the one which is a proper div doesnt highlight
div-problem.bmp

Author

Commented:
i am posting my codes the problem
//final codes
{literal}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style>
.x { background-color:#D9F1FF;margin:1px;border-bottom:1px solid #33CCFF; }
.x_hover { background-color:#9AC9FC;border-bottom:1px solid #75B5FB; }
</style>
<script>
 
$().init(function() {
checkControl = function() {
$('input[type=radio]').parent().removeClass('x_hover');
$('input[type=radio][checked]').parent().addClass('x_hover');
}
$('input[type=radio]').bind('click',checkControl)
checkControl();
});
</script>
{/literal}
//answer codes
 
  <label for="rad1"><div class="x" id="tri_answer"><input id="rad1" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[0]+1; {/php}" onClick="colorMe(this)"/>{php} echo $t[0] {/php} </div></label>
	
</td>
    <td valign="center"><div align="left"> 
 
 
<input type="text" name="quiz_time_unused" size"6"  id="quiz_time_unused"  class="inputbuttont"  value="{php}echo ($i+1 == 1 ? 1109 : 1000);{/php}; "/>
    &nbsp;&nbsp;</div></td>
  </tr>
  <tr>
  
    <td height="49">&nbsp;</td>
    <td valign="bottom"><label for="rad2"><div class="x" id="tri_answer2"><input id="rad2" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[1]+1; {/php}" onClick="colorMe(this)"/>{php}  echo $t[1]; {/php} </div></label></td>
    <td></td>
  </tr>
  <tr>
    <td height="53">&nbsp;</td>
    <td><label for="rad3"><div class="x" id="tri_answer3"><input id="rad3" type="radio" name="{php} echo $i+1; {/php}" value="option{php}echo $z[2]+1; {/php}" onClick="colorMe(this)"/>{php} echo $t[2]; {/php}</div></label>

Open in new window

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
PLEASE REMOVE onClick="colorMe(this)"

Author

Commented:
hi
i have removed it its still not doing
It shouldn't be your all code. Seems another style with background attribute is overlapping.

Is there an online address of this page? if so i can debug.

Also, you should remove onClick="colorMe(this)" from your code, otherwise it will raise a js error.

Author

Commented:
i have removed it no i dont have a web address for this i think you are right the design styles are overloading i am not sure whether this can go together <div  class="x"  id="tri_answer">
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
hi
its doing it with one tiny glitch when its unclicked then instead of showing another background color it should restore the div
$('input[type=radio]').parent().css({background:"#D9F1FF none"});

i have tried it like this but it doesnt seems to do it
$('input[type=radio]').parent().addClass('tri_answer');
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
<unsubscribed>

Author

Commented:
where do i put <unsubscribed>?
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
I wrote "unsubscribed" because I no longer is following this thread to tell you I am no longer following the thread

Author

Commented:
i knew that but i was just making a joke but its cool thanks for your help as well i appreciate it

Author

Commented:
thanks buddy i think you provided enough help on this question
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.