question

abiodunajai avatar image
0 Votes"
abiodunajai asked abiodunajai commented

How to Hide/Show Form Fields base on User input CheckBox

I have two checkboxes attached to an input form.
The Forms Files are hidden at Form Load, When the user clicks the Checkbox it triggers the form field at the right-hand side in front of the Check box as shown in the attachment.

The Problem is the second does not trigger when the first is not triggered.
The second check box does not deactivate If the first is not deactivated.

Please what I'm I doing wrong?

The HTLM is below:

                             <div class="col-md-12 col-sm-12 col-xs-12">
                                 <div class="form-group-sm">
                                     @Html.LabelFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "ORC ?", htmlAttributes: new { @class = "control-label col-md-2" })
                                     <div class="col-md-1">
                                         <input type="checkbox" id="trigger" name="question">
                                     </div>
                                      <div class="col-md-5" id="hidden_fields" name="hidden">
                                         @Html.EditorFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, new { id = "OverridenCommissionPercentage", htmlAttributes = new { @class = "form-control input-sm", @placeholder = "Enter Overriding Commission Percentage", @type="number" } })
                                         @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "", new { @class = "text-danger" })
                                     </div>
                                 </div>
                             </div>
    
                             <div class="col-md-12 col-sm-12 col-xs-12">
                                 <div class="form-group-sm">
                                     @Html.LabelFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "ISS Levy?", htmlAttributes: new { @class = "control-label col-md-2" })
                                     <div class="col-md-1">
                                         <input type="checkbox" id="issLevytrigger" name="issLevy">
                                     </div>
                                     <div class="col-md-5" id="issLevyHidden_fields" name="hidden">
                                         @Html.EditorFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, new { id = "NAICOMLevyPercentage", htmlAttributes = new { @class = "form-control input-sm", @placeholder = "Enter ISS Levy Percentage", @type = "number" } })
                                         @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "", new { @class = "text-danger" })
                                     </div>
                                 </div>
                             </div>


The JS Code is pasted below:
var checkTrigger = $("#issLevytrigger")
var isshiddenField = $("#issLevyHidden_fields")
var issLevyPercentage = $("NAICOMLevyPercentage");

     var checkbox = $("#trigger");
     var hidden = $("#hidden_fields");
     var orcPercentage = $("OverridenCommissionPercentage");
    
    
     // Hide the fields at FomLoad
     hidden.hide();
     isshiddenField.hide();
    
     checkbox.change(function () {
         if (checkbox.is(':checked')) {
             hidden.show();
         } else {
             hidden.hide();
             $("#OverridenCommissionPercentage").val("");
         }
     });
    
           
    
     // Setup an event listener for when the state of the 
     // checkbox changes.
     checkTrigger.change(function () {
         if (checkbox.is(':checked')) {
             isshiddenField.show();
         } else {
             isshiddenField.hide();
             $("#NAICOMLevyPercentage").val("");
         }
     });

Please how do I move the Form closer to the Check box? The space is too wide.

Thank you so much for your anticipated assistance.

The form PNG is attached 260616-checkbox1.png260652-checkbox2.png

@YihuiSun-MSFT



dotnet-aspnet-mvc
checkbox1.png (7.6 KiB)
checkbox2.png (3.4 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LanHuang-MSFT avatar image
0 Votes"
LanHuang-MSFT answered abiodunajai commented

Hi @abiodunajai,

Please what I'm I doing wrong?

First of all, the first problem is because you wrote the name of the checkbox wrong.
You need to change if (checkbox.is(':checked')) { to if (checkTrigger.is(':checked')) {.
260680-image.png
For the second layout problem, you can change the code to the following. Use style="display:inline-block" to achieve no line break.

 <div style="display:inline-block">
                 @Html.LabelFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "ORC ?", htmlAttributes: new { @style = "width:70px" })
                 <div style="display:inline-block;width:30px">
                     <input type="checkbox" id="trigger" name="question" width="200">
                 </div>
                 <div style="display:inline-block" id="hidden_fields" name="hidden">
                     @Html.EditorFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, new { id = "OverridenCommissionPercentage", htmlAttributes = new { @style = "width:300px" , @placeholder = "Enter Overriding Commission Percentage", @type = "number" } })
                     @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "", new { @class = "text-danger" })
                 </div>
             </div>
         </div>
        
         <div>
             <div style="display:inline-block">
                 @Html.LabelFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "ISS Levy?",htmlAttributes: new { @style = "width:70px" })
                 <div style="display:inline-block;width:30px">
                     <input type="checkbox" id="issLevytrigger" name="issLevy">
                 </div>
                 <div style="display:inline-block" id="issLevyHidden_fields" name="hidden">
                     @Html.EditorFor(model =>model.Underwriting_PolicyFile.NAICOMLevyPercentage, new { id = "NAICOMLevyPercentage", htmlAttributes = new { @style = "width:300px" , @placeholder = "Enter ISS Levy Percentage", @type = "number" } })
                     @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "", new { @class = "text-danger" })
                 </div>
             </div>    

Best regards,
Lan Huang


If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (51.8 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.


Thank you Lan Huang for pointing me to where I am wrong.
I sincerely appreciate your timely intervention.
Best regards

Abiodunajai

0 Votes 0 ·