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


183

对于带有警报的简单表单,询问是否正确填写了字段,我需要一个执行此操作的函数:

  • 单击带有两个选项的按钮时显示警报框:

    • 如果单击“确定”,则提交表单
    • 如果单击“取消”,则警告框将关闭,并且可以调整并重新提交表单

我认为JavaScript确认会起作用,但我似乎不知道如何解决。

我现在拥有的代码是:

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>

Answers:


396

一个简单的内联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);">

28

评论中指出的问题是有效的,因此这是一个不受此影响的修订版本:

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



2

好的,只需将代码更改为如下所示:

<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>


0

如果您想对表单提交应用某些条件,则可以使用此方法

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

始终牢记,方法操作属性是在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;
   }  
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.