I keep running into issues and I'm hoping the community can help me. I have a web application that was built a year or two ago using ASP.NET Core 3.1 with Razor Pages, and code behind (C#) files. The site is also using jQuery.
The form I'm having issues with is a "delete item" form. It's important that users confirm the item(s) they want to delete before they delete them from the database. On the front-end, we have DeleteItem.cshtml which is has the following code:
...
<form id="delete-form">
<label for="confirm-button">Step 1: Confirm</label>
<br />
<button id="confirm-button"
class="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal">
Yes, I am sure I want to delete these questions.
</button>
<br />
<br />
<label for="submit-button">Step 2: Delete</label>
<br />
<div style="position:relative">
<div id="submit-div"
style="position: absolute; left: 0; top: 0; width: 25%; height: 100%; z-index: 1000;"></div>
<button id="submit-button" class="btn btn-primary" disabled="true">Delete</button>
</div>
</form>
</main>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Thank you for confirming you want to delete the question or questions listed. Please close this confirmation box, and select the delete button.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@section Scripts {
<script>
$(document).ready(function () {
$('#delete-form').on('submit', function (e) {
e.preventDefault();
});
$('#confirm-button').click(function () {
$('#submit-button').prop('disabled', false);
});
$('#submit-div').click(function () { submitForm(); });
$('#submit-button').click(function () { submitForm(); });
function submitForm() {
console.log('in submitForm() function');
if ($('#submit-button').is(':disabled'))
alert('Please select the confirmation button before selecting the delete button.');
else
deleteButtonPush();
}
function deleteButtonPush() {
console.log('in deleteButtonPush() function');
if ($('#submit-button').is(':disabled')) {
alert('Please selete the confirmation button first.');
}
else {
$('#submit-button').prop('disabled', true);
$('#submit-button').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
$('#delete-form').prop('method', 'post');
$('#delete-form').prop('action', '[email protected]');
$('#delete-form').submit();
}
}
});
</script>
}
Why isn't the form being submitted, after clicking the confirmation button, and the delete button? I can see the delete button is disabled, and the spinner is added, after the submit-button button is clicked. However, the post isn't happening. How can this be fixed so post/submit will occur when the submit-button is clicked? Thanks, Everyone.
Everyone. Thank you for your feedback. With your help, the confirmation and delete buttons are working correctly now. I decided to use an AJAX request in order to solve the need to post/submit to the server. It's not finished yet, but here is an answer:
...
<form id="delete-form">
<h2>Questions to be Deleted</h2>
<p>Step 1: Select one or more questions</p>
@if (Model.Questions != null && Model.Questions.Count > 0)
{
<table class="table" summary="select one or more questions to be deleted">
@* output table of questions w/ checkboxes to select or "unselect" each question *@
</table>
}
<h2>Confirm and Delete</h2>
<p>
Please confirm you are sure you want to delete the question(s), reading passages, and/or science tabs,
for the question(s) listed above.
</p>
<input type="hidden" name="ID" value="@Model.Item.ItemTableID" />
<label for="confirm-button">Step 2: Confirm</label>
<br />
<button type="button"
id="confirm-button"
class="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal">
Yes, I am sure I want to delete these questions.
</button>
<br />
<br />
<label for="submit-button">Step 3: Delete</label>
<br />
<div style="position:relative">
<div id="submit-div"
style="position: absolute; left: 0; top: 0; width: 25%; height: 100%; z-index: 1000;"></div>
<button type="button" id="submit-button" class="btn btn-primary" disabled>Delete</button>
</div>
@Html.AntiForgeryToken()
</form>
</main>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Thank you for confirming you want to delete the question or questions listed. Please close this confirmation box, and select the delete button.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@section Scripts {
<script>
$(document).ready(function () {
$('#delete-form').on('submit', function (e) {
if ($('#submit-button').is(':disabled')) {
showDeleteError();
e.preventDefault();
}
else
deleteButtonPush();
});
$('#confirm-button').click(function (e) {
$('#submit-button').prop('disabled', false);
e.preventDefault();
});
$('#submit-div').click(function () { submitForm(); });
$('#submit-button').click(function () { submitForm(); });
function submitForm() {
console.log('in submitForm() function');
if ($('#submit-button').is(':disabled'))
showDeleteError();
else
deleteButtonPush();
}
function deleteButtonPush() {
console.log('in deleteButtonPush() function');
if ($('#submit-button').is(':disabled'))
showDeleteError();
else {
$('#submit-button').prop('disabled', true);
$('#submit-button').append(' <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
let data = $('#delete-form').serialize();
$.ajax({
type: "POST",
data: data,
url: "ProcessDeletetion?handler=Delete",
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
success: function () {
console.log('ok')
},
error: function () {
console.log('error');
}
});
}
}
function showDeleteError() {
alert('Please select the confirmation button before selecting the delete button.');
}
});
</script>
}