有没有办法为HTML5中的 formAction属性设置回退?

[英]Is there a way to set up a fallback for the formAction attribute in HTML5?


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:

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

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

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

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

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.

一切都按照我在chrome和firefox中的预期工作,但尽管IE 11据称支持formAction,但似乎忽略了它。无论如何,我想使用与IE 9相同的功能,我知道它不支持formAction,所以我试图创建一个后备。

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.

我过去使用过Modernizr,但查看文档告诉我它没有检查formAction属性。有没有办法在使用回退选项的同时使用formAction的html 5功能?我想尽可能尝试编写html 5标准。

2 个解决方案

#1


4  

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

您可以使用jQuery绑定到提交按钮,提取formAction并将其应用于表单元素的操作:

Given the following HTML

给出以下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>

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

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)

由于单击作为委托应用,因此动态添加到表单的任何新提交按钮也会触发此单击功能。 (如果将单击处理程序直接绑定到带有e.stopPropagation()的按钮,则会出现异常)

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

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

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

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

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

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

#2


2  

formaction is an HTML5 attribute. This is how you use it

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>

Here is a fallback what you need.

这是你需要的后备。

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
    }
  });
}
智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2014/01/03/54db264e07b2c97f4774fb841e6efad7.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告