用JavaScript / jQuery改变表单的动作
我有一个令我疯狂的问题。 我试图修改openidselect器来支持Facebook。 我使用RPXNow作为我的提供者，所以它要求表单被提交到不同于标准的url。
例如。 RpxNow要求我设置我的forms是这样的：
<form action="https://wikipediamaze.rpxnow.com/openid/start?token_url=...">
这适用于除Facebook和Myspace之外的所有提供商。 这些需要将表单发布到不同的url，如下所示：
<form action="https://wikipediamaze.rpxnow.com/facebook/start?token_url=...">
和
<form action="https://wikipediamaze.rpxnow.com/myspace/start?token_url=...">
开放的idselect器在窗体上有一堆button，每个都代表openid提供者。 我想要做的是检测当Facebook或Myspacebutton被点击，并在提交之前更改表单上的操作。 然而它不工作。 这是我的代码。
我已经用相同的“不支持”exception尝试了几个变种
$("#openid_form").attr("action", form_url) document.forms[0].action = form_url
有什么build议么？
更新
这里是关于代码的更多细节。 为了简洁，我省略了一些。 我做的唯一的事情就是将Facebook部分添加到“providers_large”对象（它成功将徽标添加到网站），而不是提供标识用户的url，我创build了一个名为“form_url”的属性是我想要设置我的forms的行动。 如果你看“提供者图像点击”部分标题，你会看到我在哪里检查属性“form_url”的存在，并使用jQuery来更改操作并提交表单。 但是，当我在debugging模式下浏览JavaScript时，它告诉我这是一个无效的操作。
var providers_large = { google: { name: 'Google', url: 'https://www.google.com/accounts/o8/id' }, facebook: { name: 'Facebook', form_url: 'http://wikipediamaze.rpxnow.com/facebook/start?token_url=http://www.wikipediamaze.com/Accounts/Logon' }, }; var providers_small = { myopenid: { name: 'MyOpenID', label: 'Enter your MyOpenID username.', url: 'http://{username}.myopenid.com/' }, livejournal: { name: 'LiveJournal', label: 'Enter your Livejournal username.', url: 'http://{username}.livejournal.com/' }, flickr: { name: 'Flickr', label: 'Enter your Flickr username.', url: 'http://flickr.com/{username}/' }, technorati: { name: 'Technorati', label: 'Enter your Technorati username.', url: 'http://technorati.com/people/technorati/{username}/' }, wordpress: { name: 'Wordpress', label: 'Enter your WordPress.com username.', url: 'http://{username}.wordpress.com/' }, blogger: { name: 'Blogger', label: 'Your Blogger account', url: 'http://{username}.blogspot.com/' }, verisign: { name: 'Verisign', label: 'Your Verisign username', url: 'http://{username}.pip.verisignlabs.com/' }, vidoop: { name: 'Vidoop', label: 'Your Vidoop username', url: 'http://{username}.myvidoop.com/' }, verisign: { name: 'Verisign', label: 'Your Verisign username', url: 'http://{username}.pip.verisignlabs.com/' }, claimid: { name: 'ClaimID', label: 'Your ClaimID username', url: 'http://claimid.com/{username}' } }; var providers = $.extend({}, providers_large, providers_small); var openid = { cookie_expires: 6*30, // 6 months. cookie_name: 'openid_provider', cookie_path: '/', img_path: 'images/', input_id: null, provider_url: null, init: function(input_id) { var openid_btns = $('#openid_btns'); this.input_id = input_id; $('#openid_choice').show(); $('#openid_input_area').empty(); // add box for each provider for (id in providers_large) { openid_btns.append(this.getBoxHTML(providers_large[id], 'large', '.gif')); } if (providers_small) { openid_btns.append('<br/>'); for (id in providers_small) { openid_btns.append(this.getBoxHTML(providers_small[id], 'small', '.ico')); } } $('#openid_form').submit(this.submit); var box_id = this.readCookie(); if (box_id) { this.signin(box_id, true); } }, getBoxHTML: function(provider, box_size, image_ext) { var box_id = provider["name"].toLowerCase(); return '<a title="'+provider["name"]+'" href="javascript: openid.signin(\''+ box_id +'\');"' + ' style="background: #FFF url(' + this.img_path + box_id + image_ext+') no-repeat center center" ' + 'class="' + box_id + ' openid_' + box_size + '_btn"></a>'; }, /* Provider image click */ signin: function(box_id, onload) { var provider = providers[box_id]; if (! provider) { return; } this.highlight(box_id); this.setCookie(box_id); // prompt user for input? if (provider['label']) { this.useInputBox(provider); this.provider_url = provider['url']; } else if(provider['form_url']) { $('#openid_form').attr("action", provider['form_url']); $('#openid_form').submit(); } else { this.setOpenIdUrl(provider['url']); if (! onload) { $('#openid_form').submit(); } } }, /* Sign-in button click */ submit: function() { var url = openid.provider_url; if (url) { url = url.replace('{username}', $('#openid_username').val()); openid.setOpenIdUrl(url); } return true; }, setOpenIdUrl: function (url) { var hidden = $('#'+this.input_id); if (hidden.length > 0) { hidden.value = url; } else { $('#openid_form').append('<input type="hidden" id="' + this.input_id + '" name="' + this.input_id + '" value="'+url+'"/>'); } }, highlight: function (box_id) { // remove previous highlight. var highlight = $('#openid_highlight'); if (highlight) { highlight.replaceWith($('#openid_highlight a')[0]); } // add new highlight. $('.'+box_id).wrap('<div id="openid_highlight"></div>'); }, setCookie: function (value) { var date = new Date(); date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); document.cookie = this.cookie_name+"="+value+expires+"; path=" + this.cookie_path; }, readCookie: function () { var nameEQ = this.cookie_name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }, useInputBox: function (provider) { var input_area = $('#openid_input_area'); var html = ''; var id = 'openid_username'; var value = ''; var label = provider['label']; var style = ''; if (label) { html = '<p>' + label + '</p>'; } if (provider['name'] == 'OpenID') { id = this.input_id; value = 'http://'; style = 'background:#FFF url('+this.img_path+'openid-inputicon.gif) no-repeat scroll 0 50%; padding-left:18px;'; } html += '<input id="'+id+'" type="text" style="'+style+'" name="'+id+'" value="'+value+'" />' + '<input id="openid_submit" type="submit" value="Sign-In"/>'; input_area.empty(); input_area.append(html); $('#'+id).focus(); } };
如果您有任何名为“action”的表单元素，jQuery（1.4.2）会感到困惑。 您可以通过使用DOM属性方法解决这个问题，或者避免使用名为“action”的表单元素。
<form action="foo"> <button name="action" value="bar">Go</button> </form> <script type="text/javascript"> $('form').attr('action', 'baz'); //this fails silently $('form').get(0).setAttribute('action', 'baz'); //this works </script>
我同意保罗的意见，我们需要看到更多的代码。 我testing了这个过于简单的例子，它的工作。 这意味着它可以即时更改表单动作。
<script type="text/javascript"> function submitForm(){ var form_url = $("#openid_form").attr("action"); alert("Before - action=" + form_url); //changing the action to google.com $("#openid_form").attr("action","http://google.com"); alert("After - action = "+$("#openid_form").attr("action")); //submit the form $("#openid_form").submit(); } </script> <form id="openid_form" action="test.html"> First Name:<input type="text" name="fname" /><br/> Last Name: <input type="text" name="lname" /><br/> <input type="button" onclick="submitForm()" value="Submit Form" /> </form>
编辑：我testing了你发布的更新后的代码，发现了providers_large声明中的语法错误。 还有一个逗号。 Firefox忽略这个问题，但IE8引发错误。
var providers_large = { google: { name: 'Google', url: 'https://www.google.com/accounts/o8/id' }, facebook: { name: 'Facebook', form_url: 'http://wikipediamaze.rpxnow.com/facebook/start?token_url=http://www.wikipediamaze.com/Accounts/Logon' }, //<-- Here's the problem. Remove that comma };
只是为了添加一个细节，而不是Tamlyn写的
$('form').get(0).setAttribute('action', 'baz'); //this works
$('form')[0].setAttribute('action', 'baz');
工作同样好
你实际上可以使用
$("#form").attr("target", "NewAction");
据我所知，这不会默默地失败。
如果页面在新目标中打开，则可能需要确保URL每次都是唯一的，因为Webkit（chrome / safari）会caching您访问该URL的事实，并且不会执行该post。
例如
$("form").attr("action", "/Pages/GeneratePreview?" + new Date().getMilliseconds());
只是一个更新 – 我一直有一个类似的问题，更新与jQueryforms的行动属性。
经过一些testing发现，命令：$（'＃myForm'）。attr（'action'，'new_url.html'）;
如果表单的action属性为空，则默默地失败。 如果我更新我的表单的动作属性包含一些文本，jQuery的作品。
使用Java脚本dynamic地改变动作url对我来说很好的工作
function chgAction( action_name ) { {% for data in sidebar_menu_data %} if( action_name== "ABC"){ document.forms.action = "/ABC/"; } else if( action_name== "XYZ"){ document.forms.action = "/XYZ/"; }
}
<form name="forms" method="post" action="<put default url>" onSubmit="return checkForm(this);">{% csrf_token %}
