how to handle click or change event for radiobuttonfor in mvc3
10,527
The following did the trick for me:
$('.UserType').change(function () {
var value = $(this).filter(':checked').val();
if (value == "1") {
$('.Person').hide();
$('.Company').show(500);
}
else if (value == "2") {
$('.Company').hide();
$('.Person').show(500);
}
});
Firstly, I needed to define a common class as per below in my html:
<div class="editor-field">
@Html.RadioButtonFor(model => model.UserType, (int)UserType.Company, new { @id= "Class_UTCompany", @class="UserType" }) Company
@{Html.ValidateFor(model => model.UserType);}
</div>
<div class="editor-field">
@Html.RadioButtonFor(model => model.UserType, (int)UserType.Individual, new { @id = "Class_UTIndividual", @class="UserType" }) Individual
@{Html.ValidateFor(model => model.UserType);}
</div>
Secondly, I was expecting the value in int, and that was causing the error. I was able to find that by putting debugger; in my javascript code.
Comments
-
Purusartha over 1 year
I am creating a simple user registration form. The user can be registered as a company or individual. Following is the relevant view for the Registration form that uses RadioButtonFor html helper. I have defined the id property to be used in the javascript:
@model LayoutTest.ViewModels.ProjectUser <script> $(function () { $("#Class_UserType").change(function(){ var value = $(this).val(); if (value == 1) { $('#Person').hide(); } else if (value == 2) { $('#Company').hide(); } }); }); </script> @using (Html.BeginForm("Create", "Project", FormMethod.Post, new { enctype = "multipart/form-data" })) { @Html.ValidationSummary(true) <fieldset> <div class="new_row"> <div class="editor-label"> @Html.LabelFor(model => Model.UserType) </div> <div class="editor-field"> <div class="editor-field"> @Html.RadioButtonFor(model => model.UserType, (int)UserType.Company, new { @id= "Class_UserType" }) Company @{Html.ValidateFor(model => model.UserType);} </div> <div class="editor-field"> @Html.RadioButtonFor(model => model.UserType, (int)UserType.Individual, new { @id = "Class_UserType" }) Individual @{Html.ValidateFor(model => model.UserType);} </div> </div> </div> <div class="Company"> HTML Tags inside </div> <div class="Person"> HTML Tags inside </div>
This code should hide the respective divs Company/Person, when working correctly. I have looked at numerous samples but cannot figure out what I am doing wrong here! Any help will be appreciated.
Following is the relevant html output:
<div class="new_row"> <div class="editor-label"> <label for="UserType">*User Type</label> </div> <div class="editor-field"> <div class="editor-field"> <input data-val="true" data-val-number="The field *User Type must be a number." data-val-required="The *User Type field is required." id="Class_UserType" name="UserType" type="radio" value="1" /> Company </div> <div class="editor-field"> <input checked="checked" id="Class_UserType" name="UserType" type="radio" value="2" /> Individual </div> </div> </div>