使用javascript进行表单操作

Question

我有一个必须在提交时执行javascript函数的表单,然后该函数将数据发布到我的php发送邮件文件并发送邮件.但它只适用于火狐.表单操作似乎没有在IE中做任何事情,我的问题是:这是从表单操作从外部文件调用函数的正确方法:

action="javascript:simpleCart.checkout()"

simpleCart是.js文件,checkout()是函数.

提示赞赏,努力理解为什么它可以在Firefox中工作,但不是IE,铬或野生动物园.

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

所以是的,这是一个选择,一个很好的选择.它说"提交时,请不要去任何地方,只需运行此脚本" - 非常重要.

唯一的不便是:

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

... 这不会给你发送者对象.

但它很容易修复:

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

...现在它给你发送形式此.(你可以写一个简单的"#"作为动作,这很常见 - 但是它在提交时会产生滚动到顶部的副作用.)

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

关于验证的说明

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

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

现在你的函数将在提交发生之前运行; 如果它返回true(-ish),/ something.php将获得你的东西.Falsy值会使浏览器保持在页面上,您可以开始向用户大喊大叫,以获得无效输入.

Answer 3

距离这个问题提出已经快八年了，但我冒昧地给出一个以前没有给出过的答案。OP 说这不起作用：

action="javascript:simpleCart.checkout()"

OP 表示，尽管尝试了他得到的所有好建议，但这段代码仍然失败。所以我大胆猜测一下。该操作checkout()作为类的静态方法进行调用simpleCart；但也许checkout()实际上是一个实例成员，而不是static。那要看他怎么定义了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()方法是在函数外部定义的。它是函数对象的成员，而不是原型对象，这就是它成为static 的原因。

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

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

this.checkout();

使用类名调用静态成员函数：

SimpleCart.checkout();

问题是 OP 希望将调用放入 HTML 中，它将处于全局范围内。他不能使用关键字，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();
}

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

但通常情况下，在 HTML 中什么也不做，而在 JavaScript 中执行所有操作并.addEventListener()使用该.bind()功能会更容易。