Changing form action using JavaScript / jQuery

Question

I have a problem that drives me crazy. I am trying to change the openid selector to support facebook. I use RPXNow as my provider, so it requires the form to be sent to a different URL than the standard.

For example. RpxNow requires me to configure my form as follows:

<form action="https://wikipediamaze.rpxnow.com/openid/start?token_url=...">

This works for every provider except Facebook and Myspace. This requires the form to be hosted at a different URL:

<form action="https://wikipediamaze.rpxnow.com/facebook/start?token_url=...">

and

<form action="https://wikipediamaze.rpxnow.com/myspace/start?token_url=...">

The id selector that opens has a group of buttons, each of which represents openid providers. What I'm trying to do is detect when the Facebook or Myspace button is clicked and change the action on the form before submitting. However, it does not work. Here is my code.

I tried several options with the same “unsupported” exception

 $("#openid_form").attr("action", form_url) document.forms[0].action = form_url 

Any suggestions?

Update

Here is more information about the code. For brevity, I omitted a little. The only thing I did is add the Facebook section to the providers_large object (which successfully adds the logo to the website), and instead of specifying the user url, I create the form_url property, which is what I want set for the action of my form. If you look at the heading for the "image image image" section, you'll see where I check for the presence of the "form_url" property and using jQuery to change the action and submit the form. However, when I switch to JavaScript in debug mode, it tells me about an invalid operation.

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

Answer 1

jQuery (1.4.2) gets confused if you have any form elements called "action". You can get around this using the DOM attribute methods or simply not have form elements called "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> 

Answer 2

I agree with Paolo that we need to see more code. I checked this oversimplified example and it worked. This means that he is able to change the action of the form on the fly.

 <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> 

EDIT: I tested the updated code you posted and found a syntax error in the providers_large declaration. There is an extra comma. Firefox ignores this problem, but IE8 gives an error message.

 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 the problem. Remove that comma }; 

Answer 3

just to add detail to what Tamlin wrote instead of $('form').get(0).setAttribute('action', 'baz'); //this works $('form').get(0).setAttribute('action', 'baz'); //this works

$('form')[0].setAttribute('action', 'baz');
works equally well

Answer 4

In fact, you can just use

 $("#form").attr("target", "NewAction"); 

As far as I know, this will not fail.

If the page opens for a new purpose, you may need to make sure that the URL is unique every time because Webkit (chrome / safari) will cache the fact that you visited this URL and will not execute the message.

for example

 $("form").attr("action", "/Pages/GeneratePreview?" + new Date().getMilliseconds()); 

Answer 5

Just an update for this - I had a similar problem updating the form action attribute using jQuery.

After some testing, it turns out that the command: $ ('# Myform') atr ('action', 'new_url.html') ;.

silently if the form action attribute is empty. If I update the action attribute of my form to contain some text, jquery works.

Answer 6

Using a Java script to dynamically change the URL works well for me.

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