提交带有 preventDefault 替代选项的表单

Question

我正在努力让我的网站的登录功能在所有浏览器上工作 - 我能得到的最接近的是 Firefox 中的 "ReferenceError: event is not defined" 错误。

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

<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 给出错误的原因是我没有明确地从我的 click/submit 处理程序传递 "event"（我不认为我可以用我现有的设置来做，因为我' m 使用其他参数直接调用 "signInSubmit"）。从我试验过的其他帖子...

删除 event.preventDefault() 并将按钮类型从 "submit" 更改为 "button" （但这只会阻止登录在所有浏览器上工作，因为我我正在使用 this.form)
删除 event.preventDefault() 并在 signInSubmit() 的底部添加 "return false" - 这与上面的问题也有同样的问题
最有希望的建议是从我的按钮中删除 onclick 属性并实现类似...

$('#signInForm').submit(function(e) { if(!ready){ e.preventDefault(); signInSubmit(this.form, this.form.signInPassword, false); } });

但是当然，从 jquery 选择 .submit() 的上下文来看，我不能使用 "this.form" 来引用我的原始表单，而且我也无法 return signInSubmit 预期格式的表单 $('#signInForm')" or "$('#signInForm').serialize().

抱歉，关于这个问题的想法是相当混乱的，但我真的希望有人注意到我的设置中的某些东西可以重新工作以解决这个问题 - 感谢您的任何想法！

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对象。

提交带有 preventDefault 替代选项的表单

Submit form with alternative to preventDefault

html

javascript

firefox

jquery

preventdefault