Question

我有一个必须在提交时执行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">

Answer 1

设置为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);">

Answer 2

绝对有效。

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

因此，对于一个简短的回答：是，这是一个选项，也是一个不错的选择。它说＆＃34;提交时，请不要去任何地方，只需运行此脚本＆＃34; - 非常重要。

<强> BUT

当您尝试执行此操作时，会有轻微的不便：

<form action="javascript:myFunction(this)">  <!-- won't give you the sender -->

这不是你所期望的; 此应该为您提供发件人对象，但它不会。因此，我建议使用以下格式，它只有几个字符，并且像魅力一样：

推荐方式

<form action="javascript:;" onsubmit="myFunction(this)">  <!-- now you have it! -->

...现在您可以正确访问发件人表单了。（你可以写一个简单的＆＃34;＃＆＃34;作为动作，它很常见 - 但是它在提交时有滚动到顶部的副作用。）

同样，我喜欢这种方法，因为它毫不费力且自我解释。不＆＃34;返回false＆＃34;，没有jQuery / domReady，没有重型武器。它只是做它似乎做的事情。当然其他方法也有效，但对我来说，这就是武士之道。

有关验证的说明

如果您只是需要验证并转到另一个页面当且仅当表格已正确填写时，那么这是最简单的事情：

<form action="/something.php" onsubmit="return myFunction(this)">

现在，您的函数将在提交之前运行;如果它返回true（-ish）， /something.php 将获得你的东西。虚假值将使浏览器保持在页面上，您可以开始向用户大喊大叫以进行无效输入。

Answer 3

我总是将js文件包含在html文档的头部，并且它们在动作中只调用javascript函数。像这样：

action="javascript:checkout()"

你试试这个吗？

不要忘记在html头中包含脚本引用。

我不知道在firefox中有什么用。问候。

Answer 4

问了问题已经有8年了，但是我敢回答一个以前没有给出的答案。 OP说这不起作用：

action="javascript:simpleCart.checkout()"

OP表示，尽管尝试了他得到的所有好的建议，但此代码仍继续失败。因此，我将大胆猜测。该操作正在将checkout()类的静态方法调用simpleCart；但也许checkout()实际上是实例成员，而不是静态。这取决于他如何定义checkout()。

顺便说一句，simpleCart大概是一个类名，并且按照惯例，类名都有一个大写的大写字母，所以让我们在这里使用该约定。我们使用名称SimpleCart。

以下是一些示例代码，它们说明了将checkout()定义为实例成员。在ECMA-6之前，这是正确的方法：

function SimpleCart() {
    ...
}
SimpleCart.prototype.checkout = function() { ... };

许多人使用了不同的技术，如下所示。这很流行，而且确实有效，但是我反对这样做，因为实例应该在prototype上定义一次，而以下技术则在this上定义成员并重复执行，每次实例化。

function SimpleCart() {
    ...
    this.checkout = function() { ... };
}

这是ECMA-6中的一个实例定义，使用的是官方class：

class SimpleCart {
    constructor() { ... }
    ...
    checkout()    { ... }
}

与ECMA-6中的静态定义进行比较。区别只是一个词：

class SimpleCart {
    constructor() { ... }
    ...
    static checkout()    { ... }
}

这是旧的静态定义，ECMA-6之前的版本。请注意，checkout()方法是在函数外部定义的。它是 function 对象的成员，而不是 prototype 对象的成员，这就是使其成为 static 的原因。

function SimpleCart() {
    ...
}
SimpleCart.checkout = function() { ... };

由于定义方式的不同，静态函数对关键字this所引用内容的概念有所不同。请注意，使用this关键字调用实例成员函数：

this.checkout();

使用类名称调用

静态成员函数：

SimpleCart.checkout();

问题是OP希望将调用放入HTML，而该调用将在 global 范围内。他不能使用关键字this，因为this会引用全局范围（即window）。

action="javascript:this.checkout()" // not as intended
action="javascript:window.checkout()" // same thing

没有简单的方法在HTML中使用实例成员函数。您可以与JavaScript结合使用，在Class的静态范围内创建注册表，然后调用替代静态方法，同时将参数传递给该替代，从而将索引引入实例的注册表中，然后代理调用实际的实例成员函数。像这样：

// 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();
}

您还可以将索引存储为元素上的属性。

但是通常使用.addEventListener()在HTML中什么也不做，而在JavaScript中使用.bind()功能则更容易。

使用javascript进行表单操作

4 个答案:

绝对有效。