有没有办法为< input>设置回退？ HTML5中的formAction属性？ [英] Is there a way to set up a fallback for the <input> formAction attribute in HTML5?

问题描述

我有一个表单应该动态更改提交的位置。我这样做是通过使用ajax引入一个提交按钮，其中formAction属性设置为我希望表单提交到的位置（我还引入了许多依赖于用户输入的其他内容，但是据我所知，这个问题没有任何影响）。以下是我的提交按钮的示例：

I have a form that is supposed to dynamically change where it is submitted to. I am doing this by bringing in a submit button using ajax that has the formAction attribute set to where I want the form to submit to (I'm bringing in a number of other things as well that are dependent on the user input, but as far as I can tell have no bearing on this question). Here's an example of my submit button:

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

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

The URL in formAction is dynamically generated based on user input in the initial form.

一切都像我在chrome和firefox中预期的那样工作，但尽管事实上IE 11应该支持formAction，但似乎忽略了它。无论如何，我想使用与IE 9相同的功能，我知道它不支持formAction，所以我试图创建一个后备。

Everything is working as I expected in both chrome and firefox, but despite the fact that IE 11 supposedly has support for formAction, it appears to be ignoring it. Regardless, I'd like to have the same functionality work with IE 9, which I know doesn't support formAction, so I'm trying to create a fallback.

我过去曾使用过Modernizr，但是查看文档向我表明它确实不检查formAction属性。有没有办法在使用回退选项的同时使用formAction的html 5功能？我想尽可能尝试编写html 5标准。

I've used Modernizr in the past, but looking at the documentation indicates to me that it does not check for the formAction attribute. Is there a way to use the html 5 functionality of formAction while having a fallback option? I like to try to code to html 5 standards whenever possible.

推荐答案

你可以用jQuery绑定到提交按钮，提取 formAction 并将其应用于表单元素的操作：

You could bind to the submit button with jQuery, extract the formAction and apply it to the action of the form element:

鉴于以下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>

您需要在表单中附加一名代表，以便在您的表单中点击提交按钮： / p>

You'd attach a delegate to the form to listen for click of submit buttons within your 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（））

Since the click is applied as a delegate, any new submit buttons dynamically added to the form would also trigger this click function. (exception if you bind a click handler directly to the button with e.stopPropagation() in it)

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

Now, when the form submits, it will use the value of formAction as its action.

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

This jsfiddle shows the value of formAction being retrieved in the click handler.

编辑实际上，它会点击默认的提交按钮，即使例如按下在焦点文本字段中输入。

Edit Actually, it does "click" the default submit button, even if, for example, you press Enter in a focused text field.

这篇关于有没有办法为< input>设置回退？ HTML5中的formAction属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！