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

有没有办法为HTML5中的<input /> formAction属性设置回退？

2 个答案: