Click here to Skip to main content
15,921,454 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
hi,
I have 4 radio button.
excellent
Good
Average
Poor

i want a function that when user select poor then a dialogue box open for comment.
like
http://www.eurekaforbes.com/our-service.aspx

if any one can have any knowledge about this then pls let me know.


Please check the upper link before ans me and one thing more i am working with php.
thanks
Posted
Updated 20-Jul-12 20:51pm
v2

 
Share this answer
 
Comments
MAU787 19-Jul-12 2:27am    
+5 nice answer...:)
[no name] 21-Jul-12 2:53am    
thanks but i am working with php and i want text area like box.
hi
for input box u can check this link


[^]

and on every checkbox changes event you can write this code for getting input
 
Share this answer
 
Comments
[no name] 21-Jul-12 2:53am    
thanks but i am working with php and i want text area like box.
What you need is to see what was selected for the radio button and then post a dialog box in case radio button selection was 'poor'.

You can bind an onchange property to radio button to check the same.
Following article has an example on how to do it: Using JavaScript to Validate Radio Buttons[^]

There are more samples on web if needed. I already shared the logic, try out.
 
Share this answer
 
Comments
[no name] 21-Jul-12 2:53am    
thanks but i am working with php and i want text area like box.
enhzflep 21-Jul-12 3:05am    
So what if you're using php?

Are you saying that you want to submit a form to a php page before having the php page return either (a) a whole new page or (b) a fragment of a page that you then display (the text area).

If you're not, then Sandeep's answer is perfect. If you are, then your question has insufficient info for anyvbody to have provided you with a suitable answer without discussing (it) with you.
[no name] 21-Jul-12 7:58am    
Please check this link http://www.eurekaforbes.com/our-service.aspx
and select poor radio button, you will get to know what i want.
Thanks
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">

body
{
font-family: Helvetica, Arial;
}

.backdrop
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#999999;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
}


.box
{
position:absolute;
top:20%;
left:30%;
width:300px;
height:150px;
background:#ffffff;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}

.close
{
float:right;
margin-right:6px;
cursor:pointer;
}

</style>

<script type="text/javascript">

$(document).ready(function(){

$('.lightbox').click(function(){
$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.box').animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});

$("#ok").click(function () {
if ($("#myarea").val() == "") {
alert("please put your comment!");
return false; }
var myarea=$("#myarea").val();
alert(myarea);
$("#new").val(myarea);
close_box();
return false;
});

function hide(){
close_box();
}
$("#hide").click(hide);
$('.close').click(function(){
close_box();
});

$('.backdrop').click(function(){
close_box();
});



});

function close_box()
{
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
});
}

</script>

XML
</head>

<body>
<form>
<table>
<tr>
<td width="48%">How would you rate the quality of the service you received?:<span class="required" style="color:#93B928;">*</span></td>
<td width="52%"><input type="radio" id="excellent" name="rate" value="Excellent" /><small>Excellent</small>
<input type="radio" id="good" name="rate" value="Good" /><small>Good</small>
<input type="radio" id="average" name="rate" value="Average" /><small>Average</small>
<input type="radio" id="notgood" name="rate" value="Not Good" /><small>Not Good</small>
<input type="radio" id="poor" class="lightbox" name="rate"  value="Poor"/><small>Poor</small>


</td>
</tr>


XML
</table>
<div class="backdrop"></div>
<div class="box"><div class="close">x</div>
<!--<div style=" margin:100px 0px 0px 500px;">-->
<span id="test">Please put your comment here!<br/>
 <textarea id="myarea" rows="5" cols="30" name="myarea"></textarea><br/>
    <input type="button" id="ok" name="ok" value="ok"/>
      <input type="button" id="hide" name="hide" value="cancel"/></span>
      </div>

</form>
</body>
</html>
 
Share this answer
 
v2
XML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">

body
{
font-family: Helvetica, Arial;
}

.backdrop
{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#999999;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
}


.box
{
position:absolute;
top:20%;
left:30%;
width:300px;
height:150px;
background:#ffffff;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}

.close
{
float:right;
margin-right:6px;
cursor:pointer;
}

</style>

<script type="text/javascript">

$(document).ready(function(){

$('.lightbox').click(function(){
$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.box').animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, .box').css('display', 'block');
});

$("#ok").click(function () {
if ($("#myarea").val() == "") {
alert("please put your comment!");
return false; }
var myarea=$("#myarea").val();
alert(myarea);
$("#new").val(myarea);
close_box();
return false;
});

function hide(){
close_box();
}
$("#hide").click(hide);
$('.close').click(function(){
close_box();
});

$('.backdrop').click(function(){
close_box();
});



});

function close_box()
{
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
});
}

</script>

XML
</head>

<body>
<form>
<table>
<tr>
<td width="48%">How would you rate the quality of the service you received?:<span class="required" style="color:#93B928;">*</span></td>
<td width="52%"><input type="radio" id="excellent" name="rate" value="Excellent" /><small>Excellent</small>
<input type="radio" id="good" name="rate" value="Good" /><small>Good</small>
<input type="radio" id="average" name="rate" value="Average" /><small>Average</small>
<input type="radio" id="notgood" name="rate" value="Not Good" /><small>Not Good</small>
<input type="radio" id="poor" class="lightbox" name="rate"  value="Poor"/><small>Poor</small>


</td>
</tr>

XML
</table>
<div class="backdrop"></div>
<div class="box"><div class="close">x</div>
<!--<div style=" margin:100px 0px 0px 500px;">-->
<span id="test">Please put your comment here!<br/>
 <textarea id="myarea" rows="5" cols="30" name="myarea"></textarea><br/>
    <input type="button" id="ok" name="ok" value="ok"/>
      <input type="button" id="hide" name="hide" value="cancel"/></span>
      </div>

</form>
</body>
</html>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900