jquery - 有没有办法在 HTML5 中为 <input> formAction 属性设置回退？

Question

我有一个表单，应该动态更改提交到的位置。我这样做是通过使用 ajax 引入一个提交按钮，该按钮的 formAction 属性设置为我希望表单提交到的位置(我还引入了许多其他依赖于用户输入的东西，但是作为据我所知，与这个问题无关)。这是我的提交按钮的示例:

<input type="submit" value="Edit" name="save" id="save" formAction="http://example.com" />

formAction 中的 URL 是根据初始表单中的用户输入动态生成的。

在 chrome 和 firefox 中，一切都按照我的预期工作，但尽管 IE 11 据说支持 formAction，但它似乎忽略了它。无论如何，我希望在 IE 9 上使用相同的功能，我知道它不支持 formAction，所以我正在尝试创建一个后备方案。

我过去使用过 Modernizr，但查看 documentation向我表明它不检查 formAction 属性。有没有一种方法可以在具有后备选项的同时使用 formAction 的 html 5 功能？我喜欢尽可能按照 html 5 标准进行编码。

Answer 1

您可以使用 jQuery 绑定(bind)到提交按钮，提取 formAction 并将其应用于 form 元素的操作:

给定以下 HTML

<form action="defaultAction.php" id="myForm">
     <input type="submit" value="save" id="save" formAction="http://example.com/save" />
     <input type="submit" value="delete" id="delete" formAction="http://example.com/delete" />
</form>

您将委托(delegate)附加到表单以监听表单中提交按钮的点击:

var myForm = $('#myForm');
myForm.on('click', 'input[type=submit]', function (e) {
    var attr = this.getAttribute('formAction');

    if (attr) {
        myForm[0].action = attr; //Set the form's action to formAction
        //this.form.action = attr; //As per Greg's comment, this is an equivalent statement to above, and should be used if myForm reference doesn't need to be used elsewhere in your script.
    }
});

由于点击是作为委托(delegate)应用的，任何动态添加到表单的新提交按钮也会触发此点击功能。 (异常 如果您将点击处理程序直接绑定(bind)到其中包含 e.stopPropagation() 的按钮)

现在，当表单提交时，它将使用 formAction 的值作为其操作。

这jsfiddle显示在点击处理程序中检索的 formAction 的值。

编辑 实际上，它确实会“单击”默认提交按钮，即使您在焦点文本字段中按 Enter 也是如此。