show a box when radio button selected

Question

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 18-Jul-12 19:45pm

Rajeshkrathor

Updated 20-Jul-12 20:51pm

v2

Add a Solution

5 solutions

Solution 2

hi try these links:

ModalPopupExtender Control in Action[^]

http://gugiaji.wordpress.com/2012/03/19/create-a-popup-dialog-with-modalpopupextender-ajaxcontroltoolkit/[^]

Posted 18-Jul-12 20:26pm

dimpledevani

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.

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

Posted 18-Jul-12 20:16pm

MAU787

Comments

[no name] 21-Jul-12 2:53am

thanks but i am working with php and i want text area like box.

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.

Posted 18-Jul-12 20:30pm

Sandeep Mewara

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Rajeshkrathor · Accepted Answer · 2012-07-24T23:22:00

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

Rajeshkrathor · Accepted Answer · 2012-07-24T23:25:00

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>

show a box when radio button selected

5 solutions

Solution 2

Solution 1

Solution 3

Solution 4

Solution 5

Add your solution here

Preview 0