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

IT技术 javascript html forms submit confirm
2021-01-11 19:41:41

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

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

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

我认为 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>

6个回答

一个简单的内联 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);">
@SamuelLiew 我仔细检查了它,并意识到它由于data-ajax=trueasp.net 核心中属性而不起作用所以我实现了对提交按钮的检查<button type="submit" onclick="return confirm('Are you sure?')">Submit</button>
2021-03-14 19:41:41
只是为了澄清,客户端(在 JavaScript 中)的验证应该只考虑为用户提供方便。JavaScript 代码可由用户自由编辑,不应被信任。真正的验证应该总是在后台进行,以避免不正确或恶意数据到达您的数据库或服务器。
2021-03-26 19:41:41
@Muflix 你可能错过了一个 return 语句。
2021-03-28 19:41:41
不知何故,即使我选择取消,提交也会继续(Chrome 86)
2021-04-07 19:41:41

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

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

您可以使用 JS 确认功能。

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

http://jsfiddle.net/jasonennaro/DBHEz/

onsubmit="return confirm('Is the form filled out correctly?');" 会简单得多,结果是一样的。
2021-03-11 19:41:41

简单易行

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

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

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