有没有办法为 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 绑定到提交按钮，提取 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>

您需要在表单上附加一个委托，以监听表单中提交按钮的点击：

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.
    }
});

由于单击是作为委托应用的，因此任何动态添加到表单的新提交按钮也会触发此单击功能。 （例外如果您将点击处理程序直接绑定到带有e.stopPropagation() 的按钮）

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

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

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

Answer 2

formaction 是一个 HTML5 属性。这就是你使用它的方式

<form action="/url" >
     <input type="submit" value="save1" id="save1" formAction="http://example.com/save1" />
     <input type="submit" value="save2" id="save2" formAction="http://example.com/save2" />
</form>

这是您需要的后备。

if (!('formAction' in document.createElement('input'))){
 $('form').on('click', 'input[type=submit]', function (e) {
    var attr = this.getAttribute('formAction');

    if (attr) {
        this.action = attr; //Set the form's action to formAction
    }
  });
}