I have a jquery to trigger submit button but out of 4 ifs, only two are working properly the other two are not. I was looking for error for some hours but I don't see it. bool1 and 3 works, 2 and 4 doesn't
$("#btnSubmitNM").click(function () { var msg = ""; if (smLocation.lenght > 3 && smActivity.lenght > 3 && smDescription.lenght > 3) { //bool 1 if (($("#Equip").prop('checked') == true) && ($("#PTW").prop('checked') == true)) { if (equipText.lenght > 3 && ptwText.lenght > 3) { $('#NMNew').submit(); } else { msg = msg + "All fields have to be filled"; } } //bool 2 else if (($("#Equip").prop('checked') == true) && ($("#PTW").prop('checked') == false)) { if (equipText.lenght > 3) { $('#NMNew').submit(); } else { msg = msg + "All fields have to be filled"; } } //bool 3 else if (($("#Equip").prop('checked') == false) && ($("#PTW").prop('checked') == true)) { if (ptwText.lenght > 3) { $('#NMNew').submit(); } else { msg = msg + "All fields have to be filled"; } } //bool 4 else if (($("#Equip").prop('checked') == false) && ($("#PTW").prop('checked') == false)) { $('#NMNew').submit(); } } else { msg = msg + "All fields have to be filled"; } $("#msg").text(msg); });
and html
<form id="NMNew" asp-page-handler="NearMiss" method="post"> <p class="h6 text-left font-weight-bold mb-4" style="color: steelblue">Near Miss</p> <div class="row no-gutters"> <div class="col-md-2"> <label class="form-control text-white" style="background-color: steelblue">Date/Time:</label> <input class="form-control" asp-for="NearMissClass.NMDateR" /> </div> <div class="col-md-2"> <label class="form-control text-white" style="background-color: steelblue">User Name:</label> <input class="form-control" asp-for="NearMissClass.UserName" value="@Model.UserDataRole.UserName" /> <input hidden asp-for="NearMissClass.UserID" value="@Model.UserDataRole.UserId" /> </div> <div class="col-md-4"> <label class="form-control text-white" style="background-color: steelblue">Location:</label> <input id="smLocation" required class="form-control" asp-for="NearMissClass.Location" /> </div> </div> <div class="row no-gutters mt-2"> <div class="col-md-2"> <label class="form-control text-white" style="background-color: steelblue">Was a Permit to Work active?</label> </div> <div class="col-md-2 text-center"> <input id="PTW" asp-for="NearMissClass.PTW" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-width="200" data-height="40" data-onstyle="success" data-offstyle="danger"> </div> <div id="ptwDiv" class="col-md-2"> <input id="ptwText" asp-for="NearMissClass.PTWNo" class="form-control" placeholder="Add PTW No" /> </div> </div> <div class="row no-gutters mt-2"> <div class="col-md-2"> <label class="form-control text-white" style="background-color: steelblue">Was an equipment involved?</label> </div> <div class="col-md-2 text-center"> <input id="Equip" asp-for="NearMissClass.Equipment" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-width="200" data-height="40" data-onstyle="success" data-offstyle="danger"> </div> <div id="equipDiv" class="col-md-4"> <input id="equipText" asp-for="NearMissClass.EquipDetail" class="form-control" placeholder="Add details on involved Equipment" /> </div> </div> <div class="row no-gutters mt-2"> <div class="col-md-4"> <label class="form-control text-white" style="background-color: steelblue">Activity performed:</label> <textarea id="smActivity" required rows="2" class="form-control" asp-for="NearMissClass.Activity"></textarea> </div> <div class="col-md-4"> <label class="form-control text-white" style="background-color: steelblue">Description of Near-Miss:</label> <textarea id="smDescription" required rows="2" class="form-control" asp-for="NearMissClass.Description"></textarea> </div> </div> <div class="row no-gutters"> <span id="msg" class="text-danger"></span> </div> <div class="row no-gutters mt-2"> <div class="col-md-2"> <button id="btnSubmitNM" class="col-md-12 btn badge-primary">Submit</button> </div> </div> </form>