Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript PHP
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 18-Jul-12 20:45pm
Edited 20-Jul-12 21:51pm
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

  Permalink  
Comments
MAU787 at 19-Jul-12 2:27am
   
+5 nice answer...:)
Rajeshkrathor at 21-Jul-12 2:53am
   
thanks but i am working with php and i want text area like box.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

hi
 
for input box u can check this link
 

[^]
 
and on every checkbox changes event you can write this code for getting input
  Permalink  
Comments
Rajeshkrathor at 21-Jul-12 2:53am
   
thanks but i am working with php and i want text area like box.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

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.
  Permalink  
Comments
Rajeshkrathor at 21-Jul-12 2:53am
   
thanks but i am working with php and i want text area like box.
enhzflep at 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.
Rajeshkrathor at 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
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

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

</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>
 
</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>
  Permalink  
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 5

<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>
</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>
</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>
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 277
1 Maciej Los 210
2 BillWoodruff 205
3 DamithSL 165
4 Tomas Takac 144
0 OriginalGriff 5,130
1 DamithSL 4,157
2 Maciej Los 3,670
3 Kornfeld Eliyahu Peter 3,470
4 Sergey Alexandrovich Kryukov 2,821


Advertise | Privacy | Mobile
Web01 | 2.8.141216.1 | Last Updated 25 Jul 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100