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"
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" disabled="true">Delete</button>
</div>
</form>
</main>
<!-- Modal -->
<div id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div role="document">
<div >
<div >
<h5 id="exampleModalLabel">Confirmation</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
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 >
<button type="button" 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 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.
CodePudding user response：
Remove the e.preventDefault() inside the on('submit') callback. Or if you want to check for other conditions, you can call the $('#delete-form').submit().
The problem with your code is after you calling the submit method on the form, then inside the submit callback, you cancel the default submit behaviors. For more information, you can read this Event.preventDefault()
// For example, you can read this code
$(document).ready(function() {
$('#delete-form').on('submit', function(e) {
// Checking condition
if (someError) {
// some error happen, don't submit the form
e.preventDefault();
// then if you want to submit the form inside this block, use this
// $("delete-form").submit();
}
// other things...
});
// ... Other things
})
CodePudding user response：
Change your code like below:
<form id="delete-form">
<label for="confirm-button">Step 1: Confirm</label>
<br />
<!--Add type="button"-->
<button type="button" id="confirm-button"
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>
<!--Add type="button"-->
<button type="button" id="submit-button" disabled="true">Delete</button>
</div>
</form>
</main>
<!-- Modal -->
<div id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div role="document">
<div >
<div >
<h5 id="exampleModalLabel">Confirmation</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
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 >
<button type="button" 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 role="status" aria-hidden="true"></span>');
$('#delete-form').prop('method', 'post');
$('#delete-form').prop('action', '[email protected]');
$('#delete-form').submit();
}
}
});
</script>
}