JavaScript表单提交-确认或取消提交对话框

Question

对于一个带有询问是否正确填写字段的警报提示的简单表单，我需要一个能够执行以下功能的函数：

• 当点击按钮时显示一个带有两个选项的警报对话框：

  • 如果点击“确定”，则提交表单
  • 如果点击“取消”，则关闭警报对话框，可以调整表单并重新提交

我认为JavaScript confirm可以实现，但我似乎无法弄清楚如何使用。

我现在的代码是：

function show_alert() {
  alert("xxxxxx");
}

<form>
  <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();" alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

- matt

Answer 1

一个简单的 内联 JavaScript 确认框 就可以了：

<form onsubmit="return confirm('Do you really want to submit the form?');">

除非您正在进行验证，否则不需要使用外部函数，您可以像这样进行验证：

<script>
function validate(form) {

    // validation code here ...


    if(!valid) {
        alert('Please correct the errors in the form!');
        return false;
    }
    else {
        return confirm('Do you really want to submit the form?');
    }
}
</script>
<form onsubmit="return validate(this);">

- Samuel Liew

---

为了澄清，JavaScript 客户端验证仅应视为用户方便而已。JavaScript 代码可被用户自由编辑，不应信任其内容。真正的验证应始终在后端进行，以避免畸形或恶意数据进入您的数据库或服务器。 - Adrian Wiik

无论我选择取消还是提交，都会继续提交（Chrome 86） - Muflix

@Muflix，你可能忘记了一个返回语句。 - Samuel Liew

@SamuelLiew 我进行了双重检查，发现由于 asp.net core 中的 data-ajax=true 属性而无法工作。因此，我实现了在提交按钮上进行检查而不是 <button type="submit" onclick="return confirm('Are you sure?')">提交</button> - Muflix

Answer 2

您可以使用JS确认功能。

<form onSubmit="if(!confirm('Is the form filled out correctly?')){return false;}">
  <input type="submit" />
</form>

http://jsfiddle.net/jasongennaro/DBHEz/

- Jason Gennaro

---

onsubmit="return confirm('Is the form filled out correctly?');" 可以更简单，而且结果是一样的。 - Sk8erPeter

Answer 3

function show_alert() {
  if(!confirm("Do you really want to do this?")) {
    return false;
  }
  this.form.submit();
}

- Majid Fouladpour

Answer 4

简单易用:

<form onSubmit="return confirm('Do you want to submit?') ">
  <input type="submit" />
</form>

- Pablo Salazar

Answer 5

好的，只需将您的代码更改为以下代码：

<script>
function submit() {
   return confirm('Do you really want to submit the form?');
}
</script>

<form onsubmit="return submit(this);">
   <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();"
      alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

以下是实际运行的代码，我将简化它以便更容易理解其工作原理。只需运行下面的代码即可查看结果：

function submitForm() {
  return confirm('Do you really want to submit the form?');
}

<form onsubmit="return submitForm(this);">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>

- Alireza

Answer 6

如果您想在表单提交时应用某些条件，则可以使用此方法。

<form onsubmit="return checkEmpData();" method="post" action="process.html">
  <input type="text" border="0" name="submit" />
  <button value="submit">submit</button>
</form>

请牢记一件事，method和action属性要写在onsubmit属性之后。

JavaScript代码

function checkEmpData()
{
  var a = 0;

  if(a != 0)
  {
    return confirm("Do you want to generate attendance?");
  }
   else
   {
      alert('Please Select Employee First');
      return false;
   }  
}

- Sumit Kumar Gupta