Solved

very complicated javascript logic for html radio button

Posted on 2009-07-07
30
375 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Easy if you know how...
0
 
LVL 11

Author Comment

by:mattibutt
Comment Utility
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
Comment Utility
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
Comment Utility
hi
i have been sending messages but its not posting here
0
 
LVL 11

Author Comment

by:mattibutt
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
i have added this look still not working
0
 
LVL 6

Expert Comment

by:gokce_yalcin
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
You of course want to remove
onClick="colorMe(this)"
if you do not use it
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 6

Expert Comment

by:gokce_yalcin
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
PLEASE REMOVE onClick="colorMe(this)"
0
 
LVL 11

Author Comment

by:mattibutt
Comment Utility
hi
i have removed it its still not doing
0
 
LVL 6

Expert Comment

by:gokce_yalcin
Comment Utility
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
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
<unsubscribed>
0
 
LVL 11

Author Comment

by:mattibutt
Comment Utility
where do i put <unsubscribed>?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
Comment Utility
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
Comment Utility
thanks buddy i think you provided enough help on this question
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now