我有一个表单，在提交时必须执行一个javascript函数，该函数然后将数据发布到我的php发件人邮件文件中并发送邮件。但是它只在火狐浏览器中起作用。在IE中，表单操作似乎没有起作用，我的问题是：这是从表单操作正确调用外部文件中的函数的方法吗？
action="javascript:simpleCart.checkout()"
simpleCart是一个.js文件，checkout()是其中的一个函数。
如果能提供一些提示就更好了，我很困惑为什么它可以在Firefox中运行，但在IE、Chrome或Safari中却不行。
<form name=form onsubmit="return validateFormOnSubmit(this)" enctype="multipart/form-data" action="javascript:simpleCart.checkout()" method="post">
<form action="javascript:alert('Hello there, I am being submitted');">
<button type="submit">
Let's do it
</button>
</form>
<!-- Tested in Firefox, Chrome, Edge and Safari -->
<form action="javascript:myFunction(this)"> <!-- should work, but it won't -->
但是与其指向有意义的内容，this 将会指向 Window 对象。显然，javascript: 链接存在于不同的作用域中。因此，我建议使用以下格式，它只多了 13 个字符，但效果非常好：
<form action="javascript:;" onsubmit="myFunction(this)"> <!-- now you have it! -->
<form action="/something.php" onsubmit="return isMyFormValid(this)">
将表单的action设置为JavaScript函数并不被广泛支持，我很惊讶它在FireFox中能够工作。
最好的方法是将表单的action设置为你的PHP脚本；如果在提交之前需要进行任何操作，只需添加到onsubmit即可。
编辑：事实证明您不需要任何额外的函数，只需要在这里进行小小的更改：
function validateFormOnSubmit(theForm) {
var reason = "";
reason += validateName(theForm.name);
reason += validatePhone(theForm.phone);
reason += validateEmail(theForm.emaile);
if (reason != "") {
alert("Some fields need correction:\n" + reason);
} else {
simpleCart.checkout();
}
return false;
}
然后在您的表单中：
<form action="#" onsubmit="return validateFormOnSubmit(this);">
<input type=submit name=Submit value=Send style=cursor:pointer /> - whispering_Jackaction="javascript:simpleCart.checkout()"
楼主表示尝试所有好的建议后，这段代码仍然无法正常运行。因此我猜测问题可能出在这里：将checkout()作为simpleCart类的静态方法调用，但也有可能checkout()实际上是一个实例成员，而不是静态成员。这取决于他如何定义checkout()。
顺便提一下，simpleCart很可能是一个类名，按照惯例，类名的首字母应该大写，所以我们在这里也采用这个约定。我们使用名称SimpleCart。
以下是一些示例代码，演示如何将checkout()定义为实例成员。在ECMA-6之前，这是正确的方法：
function SimpleCart() {
...
}
SimpleCart.prototype.checkout = function() { ... };
许多人使用了一种不同的技术，如下所示。这种方法很流行，也很有效，但我不建议采用，因为实例应该只在原型上定义一次，而以下技术在每个实例上都重复定义成员变量，定义在this上。
function SimpleCart() {
...
this.checkout = function() { ... };
}
以下是使用官方 class 在ECMA-6中定义 实例(instance) 的示例:
class SimpleCart {
constructor() { ... }
...
checkout() { ... }
}
与ECMA-6中的静态定义相比，它们之间只有一个单词不同：
class SimpleCart {
constructor() { ... }
...
static checkout() { ... }
}
这里是旧方法（ECMA-6之前）的静态定义。请注意，checkout()方法在函数外定义。它是函数对象的成员，而不是原型对象的成员，这就使它成为一个静态方法。
function SimpleCart() {
...
}
SimpleCart.checkout = function() { ... };
this 的引用会有不同的概念。请注意，实例 成员函数是使用关键字 this 调用的：this.checkout();
静态成员函数使用类名调用：
SimpleCart.checkout();
this，因为this将引用全局作用域（即window）。action="javascript:this.checkout()" // not as intended
action="javascript:window.checkout()" // same thing
在HTML中没有一种简单的方法可以使用实例成员函数。你可以利用JavaScript创建一个类的静态作用域内的注册表，并调用代理静态方法，同时将参数传递给代理使其给出实例在注册表中的索引，最后让代理调用实际的实例成员函数。类似这样：
// In Javascript:
SimpleCart.registry[1234] = new SimpleCart();
// In HTML
action="javascript:SimpleCart.checkout(1234);"
// In Javascript
SimpleCart.checkout = function(myIndex) {
var myThis = SimpleCart.registry[myIndex];
myThis.checkout();
}
我通常将js文件包含在html文档的头部，然后在操作中调用javascript函数。就像这样：
action="javascript:checkout()"
useFormState钩子，表单正在等待中，因此它将执行与提交相同的操作，但不会更新钩子提供的等待状态。export default MyComponent(){
const [state, formAction] = useFormState(submitFormAction, initialState)
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
e.preventDefault()
handleSubmitForm()
}
}
const handleSubmitForm = async () => {
const formElement: HTMLFormElement | null = document.querySelector("form");
const formData = new FormData(formElement || undefined);
await formAction(formData)
}
return(
<form action={formAction}
...
</form>
)
}
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
e.preventDefault()
triggerSubmitClick()
}
}
const triggerSubmitClick = () => {
const submitButton: HTMLButtonElement | null = document.querySelector("button[type='submit']");
if (submitButton) {
submitButton.click();
}
}