Home Hide/Display a input field based on value from HtmlRadioButtonFor and make it mandatory if display
Reply: 1

Hide/Display a input field based on value from HtmlRadioButtonFor and make it mandatory if display

Pradvaar cruz
1#
Pradvaar cruz Published in 2017-09-12 16:14:23Z

I have a scenario where I have two different div's and the later should disappear based on boolean value from earlier div. if the radiobutton value is true, later div should be a required filed.

Actual Code:

<div class= row ">
<div class="row col-lg-offset-2 top-buffer">
    <h4><strong><span>Is Employment Offered?</span> <span class="text-danger">*</span></strong></h4>
        @Html.RadioButtonFor(model => model.IsOffered, true) @Html.Label("Yes")
        @Html.RadioButtonFor(model => model.IsOffered, false) @Html.Label("No")
        <br>
</div>
<div class="row col-lg-offset-2 top-buffer" id="employeeNumber">
    <div class="col-sm-2"><b>Enter Employee Number</b></div>
        <div class="col-sm-10">
                @Html.TextBoxFor(model => model.EmployeeNumber, new { @class = "form-control" })
            <br />
        </div>
    </div>
</div>

<script>
$("#employeeNumber").hide();
$("input[name='IsOffered']").on("change", function() {
    if ($(this).val() == "true") {
        $("#employeeNumber").show();
    }
});

I tried above, but no luck. Thanks you for your time!

adiga
2#
adiga Reply to 2017-09-13 05:56:35Z

Change it to "True":

$("#employeeNumber").hide();
$("input[name='IsOffered']").on("change", function () {
    if ($(this).val() === "True") {
        $("#employeeNumber").show();
    } else {
        $("#employeeNumber").hide();
    }
});

Because Boolean.ToString() returs "True" instead of "true". So this value is added to the radio that is generated by razor.

Why?

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.355959 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO