[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 386
  • Last Modified:

very complicated javascript logic for html radio button

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
0
mattibutt
Asked:
mattibutt
  • 15
  • 7
  • 7
  • +1
1 Solution
 
strickddCommented:
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.
0
 
Michel PlungjanIT ExpertCommented:
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

0
 
gokce_yalcinCommented:
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

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Michel PlungjanIT ExpertCommented:
Easy if you know how...
0
 
mattibuttAuthor Commented:
hi guys
thanks for all your quick responses i am just thinking which one should i go for
0
 
Michel PlungjanIT ExpertCommented:
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
0
 
mattibuttAuthor Commented:
hi
i have been sending messages but its not posting here
0
 
mattibuttAuthor Commented:
ok i have tried  to apply gokce_yalcin soloution on my div it doesnt work i dont know why
0
 
mattibuttAuthor 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;
}
0
 
gokce_yalcinCommented:
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

0
 
mattibuttAuthor Commented:
i have added this look still not working
0
 
gokce_yalcinCommented:
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

0
 
gokce_yalcinCommented:
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

0
 
mattibuttAuthor 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
0
 
Michel PlungjanIT ExpertCommented:
You of course want to remove
onClick="colorMe(this)"
if you do not use it
0
 
gokce_yalcinCommented:
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

0
 
mattibuttAuthor 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
0
 
mattibuttAuthor 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
0
 
mattibuttAuthor 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

0
 
Michel PlungjanIT ExpertCommented:
PLEASE REMOVE onClick="colorMe(this)"
0
 
mattibuttAuthor Commented:
hi
i have removed it its still not doing
0
 
gokce_yalcinCommented:
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.
0
 
mattibuttAuthor 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">
0
 
gokce_yalcinCommented:
well, class x should have the priority at css inheritance. Seems there is an another thing. Anyway, use this, it will definitely be the dominant style:

//final codes
{literal}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$().init(function() {
checkControl = function() {
$('input[type=radio]').parent().css({background:"#D9F1FF none"});
$('input[type=radio][checked]').parent().css({background:"#9AC9FC none"});
}
$('input[type=radio]').bind('click',checkControl)
checkControl();
});
</script>
{/literal}
//answer codes
 
  <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>
    <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}; "/>
      </div></td>
  </tr>
  <tr>
  
    <td height="49"> </td>
    <td valign="bottom"><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}"/>{php}  echo $t[1]; {/php} </div></label></td>
    <td></td>
  </tr>
  <tr>
    <td height="53"> </td>
    <td><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}"/>{php} echo $t[2]; {/php}</div></label>

Open in new window

0
 
mattibuttAuthor 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');
0
 
Michel PlungjanIT ExpertCommented:
<unsubscribed>
0
 
mattibuttAuthor Commented:
where do i put <unsubscribed>?
0
 
Michel PlungjanIT ExpertCommented:
I wrote "unsubscribed" because I no longer is following this thread to tell you I am no longer following the thread
0
 
mattibuttAuthor Commented:
i knew that but i was just making a joke but its cool thanks for your help as well i appreciate it
0
 
mattibuttAuthor Commented:
thanks buddy i think you provided enough help on this question
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 15
  • 7
  • 7
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now