Working with ASP.Net Core 2.2 razor pages and Bootstrap 4, where users input family member information. The form serves both for adding and editing members, calling different handlers. If an email is not provided, a modal confirmation is displayed. Currently, when an email is provided, the submission works correctly. However, when no email is provided, the modal appears but clicking 'Yes' does not trigger any action, and there are no messages in the debug console.
function submitForm() {
if ($("#email").val() === "") {
$('#modalNoEmail').modal();
return false;
} else {
document.getElementById("frm1").submit();
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-8 order-md-1">
<form method="post" onsubmit="return submitForm()" id="frm1">
<div class="modal" tabindex="-1" role="dialog" id="modalNoEmail">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"> No Email Specified</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
You have not entered an email address. Confirm proceeding without entering an email address?
</p>
</div>
<div class="modal-footer">
@if (Model.Subscriber != null && Model.CountOfSubscribers > 0)
{
<button class="btn btn-primary btn-secondary btn-block button" type="submit" asp-page-handler="Edit">Yes</button>
}
else
{
<button class="btn btn-primary btn-secondary btn-block button" type="submit" asp-page-handler="Add">Yes</button>
}
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label>First name</label>
<input asp-for="Subscriber.FirstName" class="form-control">
<span asp-validation-for="Subscriber.FirstName" class="text-danger"></span>
</div>
<div class="col-md-6 mb-3">
<label>Last name</label>
<input asp-for="Subscriber.LastName" class="form-control">
<span asp-validation-for="Subscriber.LastName" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label>Email</label>
<input asp-for="Subscriber.Email" class="form-control" id="email">
<span asp-validation-for="Subscriber.Email" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-md-6">
@if (Model.Subscriber != null && Model.CountOfSubscribers > 0)
{
<button class="btn btn-primary btn-lg btn-block button" type="submit" asp-page-handler="Edit">Save</button>
}
else
{
<button class="btn btn-primary btn-lg btn-block button" type="submit" asp-page-handler="Add">Add Member</button>
}
</div>
</div>
</form>
</div>
</div>
</div>