Clicking radio button make control visible/hidden

When radio button is selected, i need to make visible of the textbox for DisplayStart,DisplayClose. If i unselect it, it should be hidden.

@Html.RadioButtonFor(model => model.MakeTestAvailable, "ScheduleDisplayDate", false) ScheduleDisplayDate

@Html.LabelFor(m => m.DisplayStart)

@Html.TextBox("DisplayStart", (Model.DisplayStart), new { @class = "date" })

@Html.LabelFor(m => m.DisplayClose)

@Html.TextBox("DisplayClose", (Model.DisplayClose), new { @class = "date" })

you need to put the below script in document ready

$(document).ready(function () {

$("input[name$='MakeTestAvailable']:radio").click(function () {

var radioValue = $(this).val();

if (radioValue == "ScheduleDisplayDate") {

$("#DisplayStart").show();

$("#DisplayClose").show();

}

else {

alert('aa');

$("#DisplayStart").hide();

$("#DisplayClose").hide();

}

});
});

Regards,
Iftikar

Hi, Can you tell me same process for button value. If i click Login button need to visible Login page.

i got it , thanks a lot.

set id for your div

id='div1'>

@Html.LabelFor(m => m.DisplayStart)

@Html.TextBox("DisplayStart", (Model.DisplayStart), new { @class = "date" })

id='div2'>

@Html.LabelFor(m => m.DisplayClose)

@Html.TextBox("DisplayClose", (Model.DisplayClose), new { @class = "date" })

and then change your script

$(document).ready(function () {

$("input[name$='MakeTestAvailable']:radio").click(function () {

var radioValue = $(this).val();

if (radioValue == "ScheduleDisplayDate") {

$("#div1").show();

$("#div2").show();

}

else {

alert('aa');

$("#div1").hide();

$("#div2").hide();

}

});
});

Regards,
Iftikar

the testbox only hide when radio button unselect, i want the whole div hide/visible

@Html.LabelFor(m => m.DisplayStart)

@Html.TextBox("DisplayStart", (Model.DisplayStart), new { @class = "date" })

@Html.LabelFor(m => m.DisplayClose)

@Html.TextBox("DisplayClose", (Model.DisplayClose), new { @class = "date" })

I have attached the page source for your reference.

still no improvement.

you need to put the correct value condition in your script,

MakeTestAvailableNow" /> MakeTestAvailableNow

ScheduleDisplayDate" />

$("input[name$='MakeTestAvailable']:radio").click(function () {

var radioValue = $(this).val();

if (radioValue == "ScheduleDisplayDate") {

$("#DisplayStart").show();

$("#DisplayClose").show();

}

else {

alert('aa');

$("#DisplayStart").hide();

$("#DisplayClose").hide();

}

});

Regards,
Iftikar

still it is not working...

try like this, i have put group name wrongly

$("input[name$='MakeTestAvailable']:radio").click(function () {

var radioValue = $(this).val();

if (radioValue == "1") {

$("#DisplayStart").show();

$("#DisplayClose").show();

}

else {

alert('aa');

$("#DisplayStart").hide();

$("#DisplayClose").hide();

}

});

Regards,
Iftikar

I have attatched the file as html document

can you attach it? it is not coming properly?

Regards,
Iftikar

        <html class="no-js" lang="en">  <head>     <title> Create Test – Mavin     title>     <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,300" rel="stylesheet" type="text/css" />     <link rel="stylesheet" href="/Content/themes/Mavin/boilerplate.css">     <link rel="stylesheet" href="/Content/themes/Mavin/main.css">     <link href="/Content/themes/mavin/formee-structure.css" rel="stylesheet" type="text/css" />     <link href="/Content/themes/mavin/formee-style.css" rel="stylesheet" type="text/css" />     <link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />     <script>         var pather = "http://localhost:3707";     script>     <script src="/Scripts/jquery-1.8.2.min.js">script>     <script src="/Scripts/jquery-ui-1.9.0.custom.min.js" type="text/javascript">script>     <script src="/Scripts/jquery-ui-timepicker-addon.js" type="text/javascript">script>     <script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript">script>     <script src="/Scripts/jquery.validate.min.js" type="text/javascript">script>     <script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript">script>     <script src="/Scripts/MavinScript.js" type="text/javascript">script>     <script src="/Scripts/modernizr-2.5.3.js" type="text/javascript">script>  head>  <body>     <div id="top-bar">         <div class="container">             <h1><a href="http://localhost:3707/home/mymavin2/" class="ir">Mavina>h1>             <div class="primary-nav clearfix">                 <ul class="pulldown user-menu">                     <li><a href="#">Markers Dean <i> i> <span>span>a>                         <ul>                              <li><a href="http://localhost:3707/profileperson/edit/">Settingsa>li>                                     <li><a href="http://localhost:3707/admin/">Entity Mavina>li>                                 <li><a href="http://localhost:3707/auth/logoff/">Log Offa>li>                         ul>                     li>                         ul>                                  <div id="mavin">                     <div id="mavin-character">                     div>                     <div id="mavin-notifications" class="mavin-zero-notifications" style="display: none;"><a href="/Professor/Home/MyMavin">0a>div>                                  <div id="mavin-speech">                         <div id="mavin-speech-lead">                         div>                         <div id="mavin-speech-content">                             <div>                                 <p>Hello.p>                             div>                         div>                     div>                 div>                                       div>          div>      div>       <div id="body" class='clearfix'>          <div id="content" class="clearfix">                <script type="text/javascript">     $("input[name$='ScheduleDisplayDate']:radio").click(function () {         var radioValue = $(this).val();         if (radioValue == "1") {             $("#DisplayStart").show();             $("#DisplayClose").show();         }         else {             alert('aa');             $("#DisplayStart").hide();             $("#DisplayClose").hide();         }     });   script>        <style type="text/css">      a.classname     {     // background: url(../Images/image.gif) no-repeat top left;      display: block;      width: 150px;      height: 150px;      text-indent: -9999px; /* hides the link text */      }  style> <script type="text/javascript">     $(document).ready(function () {         $('.date').datepicker         ({             dateFormat: 'mm/dd/yy',             showStatus: true,             showWeeks: true,             currentText: 'Now',             autoSize: true,             gotoCurrent: true,             showAnim: 'blind',             highlightWeek: true         });     }); script> <div class="container"> <form action="/Professor/Test/Create/b78a6efe-ac77-4e49-806a-fc2fad71068b" method="post">    <table border="1">         <tr>             <td style="width:15%;vertical-align:text-top">                                      <table >                          <tr>                             <td style ="font-size:x-large;background-color:" bgcolor="#FFCC00">Create Testtd>                          tr>                            <tr>                                                      <td style="font-size:x-large">1.Detailstd>                          tr>                            <tr>                               <td style="font-size:x-large">2.Questionstd>                          tr>                            <tr>                             <td style="font-size:x-large">3.Previewtd>                          tr>                            <tr>                             <td><a class="classname" href="/Professor/Test">Button Namea> td>                          tr>                                               table>                                               td>             <td style="width:85%">                                    <div class="formee">                      <input data-val="true" data-val-required="The CourseSectionId field is required." id="CourseSectionId" name="CourseSectionId" type="hidden" value="b78a6efe-ac77-4e49-806a-fc2fad71068b" />                          <fieldset>                          <div class="grid-12-12">                             <label for="TestName">TestNamelabel>                             <input class="text-box single-line" id="TestName" name="TestName" type="text" value="" />                             div>                              <div class="grid-12-12">                             <label for="Description">Descriptionlabel>                             <textarea class="text-box multi-line" id="Description" name="Description"> textarea>                         div>                           <div class="grid-12-12">                             <label for="Instructions">Instructionslabel>                             <textarea class="text-box multi-line" id="Instructions" name="Instructions"> textarea>                         div>                       fieldset>                                                <fieldset>                         <div>                                                 <legend>Gradinglegend>                                           <div class="grid-12-12">                                 <ul class="formee-list">                                     <li>                                         <input class="check-box" data-val="true" data-val-required="The GradeBook field is required." id="GradeBook" name="GradeBook" type="checkbox" value="true" /><input name="GradeBook" type="hidden" value="false" />                                         <label for="GradeBook">GradeBooklabel>                                     li>                                 ul>                             div>                                <div class="grid-12-12">                                 <ul class="formee-list">                                     <li>                                                                                <input data-val="true" data-val-required="The MakeTestAvailable field is required." id="MakeTestAvailable" name="MakeTestAvailable" type="radio" value="MakeTestAvailableNow" /> MakeTestAvailableNow                                      <input id="MakeTestAvailable" name="MakeTestAvailable" type="radio" value="ScheduleDisplayDate" /> ScheduleDisplayDate                                      li>                                                     ul>                             div>                               <div class="grid-12-12">                                 <label for="DisplayStart">DisplayStartlabel>                                 <input class="date" data-val="true" data-val-date="The field DisplayStart must be a date." id="DisplayStart" name="DisplayStart" type="text" value="" />                             div>                               <div class="grid-12-12">                                 <label for="DisplayClose">DisplayCloselabel>                                 <input class="date" data-val="true" data-val-date="The field DisplayClose must be a date." id="DisplayClose" name="DisplayClose" type="text" value="" />                             div>                               <div class="grid-12-12">                                 <ul class="formee-list">                                     <li>                                         <input class="check-box" data-val="true" data-val-required="The TrackViews field is required." id="TrackViews" name="TrackViews" type="checkbox" value="true" /><input name="TrackViews" type="hidden" value="false" />                                         <label for="TrackViews">TrackViewslabel>                                     li>                                 ul>                                                                      div>                        div>                   fieldset>                      <div class="grid-12-12 actions">                         <input type="submit" value="Create" />                         <a href="#" class="cancel-btn">Cancela>                     div>                 td>         tr>     table> form>    div>                                                      div>      div>        <div id="dialog">     div> body> html>

@using MavinLMSService.ViewModels.Professor.Test

@model CreateModel

ViewBag.Title = "Create Test";

Layout = "~/Views/Shared/_PrimaryLayout.cshtml";

}

@Html.ActionLink("Mavin LMS", "MyMavin", "Home", new { area = "" }, null)

@Html.ActionLink("My Courses", "Index", "MyEdu")

@Html.ActionLink(Model.CourseTitle + " ("+Model.SectionNumber+")", "Index", "CourseSection", new { id = Model.CourseSectionId }, null)

@Html.ActionLink("Tests", "Index", "Test", new { id = Model.CourseSectionId }, null)

it will work, can you share me the view source of this radio button after rendering?

Regards,
Iftikar

Iftikar,

It never work, i am using like this

@Html.RadioButtonFor(model => model.MakeTestAvailable, "ScheduleDisplayDate", false) ScheduleDisplayDate

this should work,

$("input[name$='ScheduleDisplayDate']:radio").click(function(){

var radioValue = $(this).val();

if (radioValue == "1") {

$("#DisplayStart").show();

$("#DisplayClose").show();

}

else {

alert('aa');

$("#DisplayStart").hide();

$("#DisplayClose").hide();

}

});

Regards,
Iftikar

http://www.c-sharpcorner.com/Forums/Thread/222551/ pls go through this thread and solve my issue there i have given every details regarding this in comments. so pls go through this

This also does not work.

try like this

$("#ScheduleDisplayDate").click(function () {

var radioButtonID = $("#ScheduleDisplayDate").val();

if (radioButtonID == "1") {

$("#DisplayStart").show();

$("#DisplayClose").show();

}

else {

alert('aa');

$("#DisplayStart").hide();

$("#DisplayClose").hide();

}

});

Regards,
Iftikar

Iftikar,

No reflect here. it seems to same while check or uncheck.

Hi,
You can do by using jquery

$(document).ready(function () {

$("#ScheduleDisplayDate").click(function (e) {

if ($("#ScheduleDisplayDate").is(":checked")) {

$("#DisplayStart").css("visibility","visible");
$("#DisplayClose").css("visibility","visible");

}

else{

$("#DisplayStart").css("visibility","hidden");
$("#DisplayClose").css("visibility","visible");

}

});

Regards,
Iftikar

21 Replies

Know the answer? Post it — somebody with the same question will find it here.

Iftikar Hussain13y ago
Accepted answer
you need to put the below script in document ready

$(document).ready(function () {
$("input[name$='MakeTestAvailable']:radio").click(function () {
var radioValue = $(this).val();
if (radioValue == "ScheduleDisplayDate") {
$("#DisplayStart").show();
$("#DisplayClose").show();
}
else {
alert('aa');
$("#DisplayStart").hide();
$("#DisplayClose").hide();
}
});
});

Regards,
Iftikar
0
Parthiban S11y ago
Hi, Can you tell me same process for button value. If i click Login button need to visible Login page.
0
vidhya13y ago
i got it , thanks a lot.
0
Iftikar Hussain13y ago
set id for your div

id='div1'>
@Html.LabelFor(m => m.DisplayStart)
@Html.TextBox("DisplayStart", (Model.DisplayStart), new { @class = "date" })

id='div2'>
@Html.LabelFor(m => m.DisplayClose)
@Html.TextBox("DisplayClose", (Model.DisplayClose), new { @class = "date" })

and then change your script

$(document).ready(function () {
$("input[name$='MakeTestAvailable']:radio").click(function () {
var radioValue = $(this).val();
if (radioValue == "ScheduleDisplayDate") {
$("#div1").show();
$("#div2").show();
}
else {
alert('aa');
$("#div1").hide();
$("#div2").hide();
}
});
});

Regards,
Iftikar
0
vidhya13y ago
the testbox only hide when radio button unselect, i want the whole div hide/visible

@Html.LabelFor(m => m.DisplayStart)
@Html.TextBox("DisplayStart", (Model.DisplayStart), new { @class = "date" })

@Html.LabelFor(m => m.DisplayClose)
@Html.TextBox("DisplayClose", (Model.DisplayClose), new { @class = "date" })
0
vidhya13y ago
I have attached the page source for your reference.

still no improvement.
0
Iftikar Hussain13y ago
you need to put the correct value condition in your script,

MakeTestAvailableNow" /> MakeTestAvailableNow
ScheduleDisplayDate" />

$("input[name$='MakeTestAvailable']:radio").click(function () {
var radioValue = $(this).val();
if (radioValue == "ScheduleDisplayDate") {
$("#DisplayStart").show();
$("#DisplayClose").show();
}
else {
alert('aa');
$("#DisplayStart").hide();
$("#DisplayClose").hide();
}
});

Regards,
Iftikar
0
vidhya13y ago
still it is not working...
0
Iftikar Hussain13y ago
try like this, i have put group name wrongly

$("input[name$='MakeTestAvailable']:radio").click(function () {
var radioValue = $(this).val();
if (radioValue == "1") {
$("#DisplayStart").show();
$("#DisplayClose").show();
}
else {
alert('aa');
$("#DisplayStart").hide();
$("#DisplayClose").hide();
}
});

Regards,
Iftikar
0
vidhya13y ago
I have attatched the file as html document
0
Iftikar Hussain13y ago
can you attach it? it is not coming properly?

Regards,
Iftikar
0

vidhya13y ago

vidhya13y ago
@using MavinLMSService.ViewModels.Professor.Test

@model CreateModel

@{
ViewBag.Title = "Create Test";
Layout = "~/Views/Shared/_PrimaryLayout.cshtml";
}
@*

@Html.ActionLink("Mavin LMS", "MyMavin", "Home", new { area = "" }, null)

@Html.ActionLink("My Courses", "Index", "MyEdu")

@Html.ActionLink(Model.CourseTitle + " ("+Model.SectionNumber+")", "Index", "CourseSection", new { id = Model.CourseSectionId }, null)

@Html.ActionLink("Tests", "Index", "Test", new { id = Model.CourseSectionId }, null)

Clicking radio button make control visible/hidden

@Model.CourseTitle