英文:
Javascript comfirmation message to stop form submission
问题
I have a web page where people can either save the form to be able to edit the info later again, or to submit the form. I want to add a confirmation message when the user clicks the submit button. If the user clicks 'Cancel' I want the form submission to be cancelled.
我有一个网页，用户可以选择保存表单以便以后再次编辑信息，或者提交表单。我想在用户点击提交按钮时添加一个确认消息。如果用户点击“取消”，我希望取消表单提交。
I tried the following, but it has no effect:
我尝试了以下代码，但没有效果：
const form = document.querySelector('#incidentform');
form.addEventListener('onsubmit', function () {
let text = "Are you sure you want to submit?";
if (confirm(text) == true) {
return true;
} else {
return false;
}
});
英文:
I have a web page where people can either save the form to be able to edit the info later again, or to submit the form. I want to add a confirmation message when the user clicks the submit button. If the user clicks 'Cancel' I want the form submission to be cancelled.
I tried the following, but it has no effect:
const form = document.querySelector('#incidentform');
form.addEventListener('onsubmit', function () {
let text = "Are you sure you want to submit?";
if (confirm(text) == true) {
return true;
} else {
return false;
}
});
答案1
得分: 1
const form = document.querySelector('#incidentform');
form.addEventListener('submit', function (event) {
let text = "你确定要提交吗？";
if (!confirm(text)) {
event.preventDefault(); // 停止表单提交
}
});
英文:
const form = document.querySelector('#incidentform');
form.addEventListener('submit', function (event) {
let text = "Are you sure you want to submit?";
if (!confirm(text)) {
event.preventDefault(); // Stops the form submission
}
});
答案2
得分: 0
当您想要取消事件的默认行为时，您需要使用 event.preventDefault。
@AnishChittora 的代码的缩写版本如下：
const form = document.querySelector('#incidentform');
form.addEventListener('submit', function (e) {
if(!confirm("您确定要提交吗?"))
e.preventDefault();
});
英文:
When you want to cancel the default behavior of an event, You need to use event.preventDefault.
A shorter version of @AnishChittora code is :
const form = document.querySelector('#incidentform');
form.addEventListener('onsubmit', function (e) {
if(!confirm("Are you sure you want to submit?"))
e.preventDefault();
});
答案3
得分: -1
使用jQuery - 若要使用jQuery实现带有确认框的提交按钮，您可以将点击事件处理程序附加到按钮上并显示确认对话框。如果用户点击“确定”，则将提交表单，如果用户点击“取消”，则会阻止表单提交。
以下是一个示例：
$(document).ready(function() {
$('#submitButton').click(function(e) {
e.preventDefault(); // 阻止默认的表单提交行为
// 显示确认对话框
if (confirm('您确定要提交表单吗？')) {
// 用户点击“确定” - 提交表单
$('#myForm').submit();
} else {
// 用户点击“取消” - 什么都不做
}
});
});
英文:
Use Jquery - To implement a submit button with a confirmation box using jQuery, you can attach a click event handler to the button and display a confirmation dialog. If the user clicks "OK," the form will be submitted, and if the user clicks "Cancel," the form submission will be prevented.
Here's an example:
$(document).ready(function() {
$('#submitButton').click(function(e) {
e.preventDefault(); // Prevent the default form submission
// Display the confirmation dialog
if (confirm('Are you sure you want to submit the form?')) {
// User clicked "OK" - submit the form
$('#myForm').submit();
} else {
// User clicked "Cancel" - do nothing
}
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论