javascript - 提交表单并使用 PreventDefault 的替代方案

Question

我正在努力让我的网站的登录功能在所有浏览器上运行 - 最接近的情况是 Firefox 中出现“ReferenceError:事件未定义”错误。

我知道有很多关于 PreventDefault 的现有帖子在 Firefox 中的处理方式特别不同，但我发现的选项似乎都不适用于所有浏览器。这是我的基本设置...

<button id="signinbutton" name="signin" type="submit" onclick="signInSubmit(this.form, this.form.signInPassword);">Sign In</button>

function signInSubmit(theForm, theHashPassword) {
  event.preventDefault(); //disables submit action so I can add custom code
  //rest of sign in...
  //e.g. theForm.appendChild(p);
}

Firefox 给出错误的原因是我没有从我的点击/提交处理程序中显式传递“事件”(我认为我无法使用现有的设置来做到这一点，因为我直接调用“signInSubmit”与其他参数)。从我尝试过的其他帖子中...

• 删除 event.preventDefault() 并将按钮类型从“提交”更改为“按钮”(但这只会阻止登录在所有浏览器上工作，因为我使用 this.form 传递数据)

• 删除 event.preventDefault() 并在 signInSubmit() 底部添加“return false” - 这也与上面的问题相同

• 最有希望的建议是从我的按钮中删除 onclick 属性并实现类似...

  $('#signInForm').submit(function(e) { 如果(!准备好){ e.preventDefault(); SignInSubmit(this.form, this.form.signInPassword, false); } });

但是，当然，从jquery选择.submit()的上下文中，我不能使用“this.form”来引用我的原始表单，而且我也无法以预期的格式返回表单通过使用 $('#signInForm')"或 "$('#signInForm').serialize() 进行signInSubmit。

如果这是关于这个问题的一些相当困惑的想法，我深表歉意，但我真的希望有人注意到我的设置中的某些内容可以重新设计以解决这个问题 - 感谢您的任何想法!

Answer 1

the most promising suggestion was to remove the onclick attribute from my button and implement something like

是的。这样做。

I can't use "this.form" to refer to my original form

这是因为该事件是在表单上下文中触发的，而不是在提交按钮中触发。使用 this 而不是 this.form。

 $('#signInForm')" or "$('#signInForm').serialize()

原始函数需要一个表示表单的 DOM 对象。第一个是围绕此类对象的 jQuery 包装器，第二个是来自表单的 URL 编码数据字符串。

如果您打算使用这种方法(您不应该这样做，因为 this 更优雅)，那么您可以使用 $('#signInForm')[0] 从 jQuery 对象中提取 DOM 对象。