I have an MVC application form with multiple razor controls one of them being radiobuttonlist. This control is similar to Yes/No questions with additional details (textarea) in case of Yes.
Initially all the textareas are hidden through a common class(applicant__additional-details) applied to it. I need to write a generic event for all the radiobutton list event which when Checked Yes will open the text area to input the additional details. I can easily write the change event for every radiobuttonlist but the issue with that approach is that the form has more than 15+ Yes/No questions & so is the need to write a generic radiobuttonlist event that when clicked will open up the closest div(applicant__additional-details). Below is an example of 1 of the radiobuttonlist question with additional-details textarea.
<div class="row">
<div class="col-sm-9">
<legend class="applicant__question">
Have you operated under a different DOT# in the past 5 years
</legend>
</div>
<div class="col-sm-3">
<div class="custom-control">
@Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, true, new { id = "HasOperatedUnderDifferentDotNumberYes" })
<label for="HasOperatedUnderDifferentDotNumberYes">Yes</label>
</div>
<div class="custom-control">
@Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, false, new { id = "HasOperatedUnderDifferentDotNumberNo" })
<label for="HasOperatedUnderDifferentDotNumberNo">No</label>
</div>
@Html.ValidationMessageFor(model => model.HasOperatedUnderDifferentDotNumber, "", new { @class = "text-danger" })
<div class="applicant__additional-details row">
<label for="OperatedUnderDifferentDotNumberAdditionalDetail">Additional Details</label>
@Html.TextAreaFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, new { rows = 3, @class = "form-control", required = "required", placeholder = "Dot Number Additional Detail" })
@Html.ValidationMessageFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, "", new { @class = "text-danger" })
</div>
</div>
</div>
Any suggestion for the above will be helpful. Regards.
Here is a demo:
Model class:
public int HasOperatedUnderDifferentDotNumber { get; set; }
public string OperatedUnderDifferentDotNumberAdditionalDetail { get; set; }
public int HasOperatedUnderDifferentDotNumber1 { get; set; }
public string OperatedUnderDifferentDotNumberAdditionalDetail1 { get; set; }
View:
<div class="row">
<div class="col-sm-9">
<legend class="applicant__question">
Question1:Have you operated under a different DOT# in the past 5 years
</legend>
</div>
<div class="col-sm-3">
<div class="custom-control">
@Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, true, new { id = "HasOperatedUnderDifferentDotNumberYes"})
<label for="HasOperatedUnderDifferentDotNumberYes">Yes</label>
</div>
<div class="custom-control">
@Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, false, new { id = "HasOperatedUnderDifferentDotNumberNo" })
<label for="HasOperatedUnderDifferentDotNumberNo">No</label>
</div>
<div class="applicant__additional-details row" hidden>
<label for="OperatedUnderDifferentDotNumberAdditionalDetail">Additional Details</label>
@Html.TextAreaFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, new { rows = 3, @class = "form-control", required = "required", placeholder = "Dot Number Additional Detail" })
@Html.ValidationMessageFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div class="row">
<div class="col-sm-9">
<legend class="applicant__question">
Question2:Have you operated under a different DOT# in the past 5 years
</legend>
</div>
<div class="col-sm-3">
<div class="custom-control">
@Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber1, true, new { id = "HasOperatedUnderDifferentDotNumberYes1" })
<label for="HasOperatedUnderDifferentDotNumberYes">Yes</label>
</div>
<div class="custom-control">
@Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber1, false, new { id = "HasOperatedUnderDifferentDotNumberNo1" })
<label for="HasOperatedUnderDifferentDotNumberNo">No</label>
</div>
<div class="applicant__additional-details row" hidden>
<label for="OperatedUnderDifferentDotNumberAdditionalDetail">Additional Details</label>
@Html.TextAreaFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail1, new { rows = 3, @class = "form-control", required = "required", placeholder = "Dot Number Additional Detail" })
@Html.ValidationMessageFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail1, "", new { @class = "text-danger" })
</div>
</div>
</div>
jquery:
$('input[type=radio]').change(function () {
if ($(this).is(":checked") == true && $(this).val() == "True") {
$(this).closest("div").nextAll('div.applicant__additional-details').removeAttr("hidden");
} else {
$(this).closest("div").nextAll('div.applicant__additional-details').attr("hidden", true);
}
});