用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 %}