Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

very complicated javascript logic for html radio button

Posted on 2009-07-07
30
Medium Priority
?
384 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
0
Comment
Question by:mattibutt
  • 15
  • 7
  • 7
  • +1
30 Comments
 
LVL 28

Expert Comment

by:strickdd
ID: 24793216
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24793235
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
 
LVL 6

Expert Comment

by:gokce_yalcin
ID: 24793297
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24793327
Easy if you know how...
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24793334
hi guys
thanks for all your quick responses i am just thinking which one should i go for
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24793363
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
 
LVL 11

Author Comment

by:mattibutt
ID: 24793439
hi
i have been sending messages but its not posting here
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24793451
ok i have tried  to apply gokce_yalcin soloution on my div it doesnt work i dont know why
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24793484
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
 
LVL 6

Expert Comment

by:gokce_yalcin
ID: 24793485
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
 
LVL 11

Author Comment

by:mattibutt
ID: 24793508
i have added this look still not working
0
 
LVL 6

Expert Comment

by:gokce_yalcin
ID: 24793511
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
 
LVL 6

Expert Comment

by:gokce_yalcin
ID: 24793514
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
 
LVL 11

Author Comment

by:mattibutt
ID: 24793551
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24793590
You of course want to remove
onClick="colorMe(this)"
if you do not use it
0
 
LVL 6

Expert Comment

by:gokce_yalcin
ID: 24793809
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
 
LVL 11

Author Comment

by:mattibutt
ID: 24793822
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
 
LVL 11

Author Comment

by:mattibutt
ID: 24793872
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
 
LVL 11

Author Comment

by:mattibutt
ID: 24793902
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24793991
PLEASE REMOVE onClick="colorMe(this)"
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24794006
hi
i have removed it its still not doing
0
 
LVL 6

Expert Comment

by:gokce_yalcin
ID: 24794019
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
 
LVL 11

Author Comment

by:mattibutt
ID: 24794046
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
 
LVL 6

Accepted Solution

by:
gokce_yalcin earned 2000 total points
ID: 24794146
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
 
LVL 11

Author Comment

by:mattibutt
ID: 24794319
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24794333
<unsubscribed>
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24794339
where do i put <unsubscribed>?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24794368
I wrote "unsubscribed" because I no longer is following this thread to tell you I am no longer following the thread
0
 
LVL 11

Author Comment

by:mattibutt
ID: 24794375
i knew that but i was just making a joke but its cool thanks for your help as well i appreciate it
0
 
LVL 11

Author Closing Comment

by:mattibutt
ID: 31600537
thanks buddy i think you provided enough help on this question
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question