I&#39;m having an issue that is driving me crazy. I&#39;m trying to modify the openid-selector to support facebook. I&#39;m using RPXNow as my provider so it requires the form to be submitted to a different url than the standard. 

For example. RpxNow requires me to setup my form like this:

`&lt;form action=&quot;https://wikipediamaze.rpxnow.com/openid/start?token_url=...&quot;&gt;`

This works for every provider except for Facebook and Myspace. Those require the form to be posted to a different url like this:

`&lt;form action=&quot;https://wikipediamaze.rpxnow.com/facebook/start?token_url=...&quot;&gt;`

and

`&lt;form action=&quot;https://wikipediamaze.rpxnow.com/myspace/start?token_url=...&quot;&gt;`

The open id selector has a bunch of buttons on the form each representing the openid providers. What I&#39;m trying to do is detect when the Facebook or Myspace button is clicked and changed the action on the form before submitting. However it&#39;s not working. Here is my code.

I&#39;ve tried several variations all with the same &quot;not supported&quot; exception

    $(&quot;#openid_form&quot;).attr(&quot;action&quot;, form_url)
    document.forms[0].action = form_url

Any suggestions?

**Update**

Here are more details on the code. I&#39;ve omitted some for brevity. The only thing i&#39;ve done is added the Facebook section to the &quot;providers_large&quot; object (which successfully adds the logo to the website), and instead of supply a url identifying the user, I&#39;m creating a property called &quot;form_url&quot; which is what I want to set the action of my form to. If you look at the section title &quot;Provider image click&quot; you&#39;ll see where I&#39;m checking for the presence of the property &quot;form_url&quot; and using jQuery to change the action and submit the form. However when I step through the JavaScript in debug mode it tells me it&#39;s an invalid operation.

    
    var providers_large = {
        google: {
            name: &#39;Google&#39;,
            url: &#39;https://www.google.com/accounts/o8/id&#39;
        },
        facebook: {
            name: &#39;Facebook&#39;,
            form_url: &#39;http://wikipediamaze.rpxnow.com/facebook/start?token_url=http://www.wikipediamaze.com/Accounts/Logon&#39;
        },
        
    };
    var providers_small = {
        myopenid: {
            name: &#39;MyOpenID&#39;,
            label: &#39;Enter your MyOpenID username.&#39;,
            url: &#39;http://{username}.myopenid.com/&#39;
        },
        livejournal: {
            name: &#39;LiveJournal&#39;,
            label: &#39;Enter your Livejournal username.&#39;,
            url: &#39;http://{username}.livejournal.com/&#39;
        },
        flickr: {
            name: &#39;Flickr&#39;,        
            label: &#39;Enter your Flickr username.&#39;,
            url: &#39;http://flickr.com/{username}/&#39;
        },
        technorati: {
            name: &#39;Technorati&#39;,
            label: &#39;Enter your Technorati username.&#39;,
            url: &#39;http://technorati.com/people/technorati/{username}/&#39;
        },
        wordpress: {
            name: &#39;Wordpress&#39;,
            label: &#39;Enter your Wordpress.com username.&#39;,
            url: &#39;http://{username}.wordpress.com/&#39;
        },
        blogger: {
            name: &#39;Blogger&#39;,
            label: &#39;Your Blogger account&#39;,
            url: &#39;http://{username}.blogspot.com/&#39;
        },
        verisign: {
            name: &#39;Verisign&#39;,
            label: &#39;Your Verisign username&#39;,
            url: &#39;http://{username}.pip.verisignlabs.com/&#39;
        },
        vidoop: {
            name: &#39;Vidoop&#39;,
            label: &#39;Your Vidoop username&#39;,
            url: &#39;http://{username}.myvidoop.com/&#39;
        },
        verisign: {
            name: &#39;Verisign&#39;,
            label: &#39;Your Verisign username&#39;,
            url: &#39;http://{username}.pip.verisignlabs.com/&#39;
        },
        claimid: {
            name: &#39;ClaimID&#39;,
            label: &#39;Your ClaimID username&#39;,
            url: &#39;http://claimid.com/{username}&#39;
        }
    };
    var providers = $.extend({}, providers_large, providers_small);
    
    var openid = {
    
            cookie_expires: 6*30,   // 6 months.
            cookie_name: &#39;openid_provider&#39;,
            cookie_path: &#39;/&#39;,
            
            img_path: &#39;images/&#39;,
            
            input_id: null,
            provider_url: null,
            
        init: function(input_id) {
            
            var openid_btns = $(&#39;#openid_btns&#39;);
            
            this.input_id = input_id;
            
            $(&#39;#openid_choice&#39;).show();
            $(&#39;#openid_input_area&#39;).empty();
            
            // add box for each provider
            for (id in providers_large) {
            
                    openid_btns.append(this.getBoxHTML(providers_large[id], &#39;large&#39;, &#39;.gif&#39;));
            }
            if (providers_small) {
                    openid_btns.append(&#39;&lt;br/&gt;&#39;);
                    
                    for (id in providers_small) {
                    
                            openid_btns.append(this.getBoxHTML(providers_small[id], &#39;small&#39;, &#39;.ico&#39;));
                    }
            }
            
            $(&#39;#openid_form&#39;).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[&quot;name&quot;].toLowerCase();
            return &#39;&lt;a title=&quot;&#39;+provider[&quot;name&quot;]+&#39;&quot; href=&quot;javascript: openid.signin(\&#39;&#39;+ box_id +&#39;\&#39;);&quot;&#39; +
                            &#39; style=&quot;background: #FFF url(&#39; + this.img_path + box_id + image_ext+&#39;) no-repeat center center&quot; &#39; + 
                            &#39;class=&quot;&#39; + box_id + &#39; openid_&#39; + box_size + &#39;_btn&quot;&gt;&lt;/a&gt;&#39;;    
        
        },
        /* 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[&#39;label&#39;]) {
                            
                            this.useInputBox(provider);
                            this.provider_url = provider[&#39;url&#39;];
                            
                    } 
                    else if(provider[&#39;form_url&#39;]) {

                            $(&#39;#openid_form&#39;).attr(&quot;action&quot;, provider[&#39;form_url&#39;]);
                            $(&#39;#openid_form&#39;).submit();
                    }
                    else {
                            
                            this.setOpenIdUrl(provider[&#39;url&#39;]);
                            if (! onload) {
                                    $(&#39;#openid_form&#39;).submit();
                            }       
                    }
        },
        /* Sign-in button click */
        submit: function() {
            
            var url = openid.provider_url; 
            if (url) {
                    url = url.replace(&#39;{username}&#39;, $(&#39;#openid_username&#39;).val());
                    openid.setOpenIdUrl(url);
            }
            return true;
        },
        setOpenIdUrl: function (url) {
        
            var hidden = $(&#39;#&#39;+this.input_id);
            if (hidden.length &gt; 0) {
                    hidden.value = url;
            } else {
                    $(&#39;#openid_form&#39;).append(&#39;&lt;input type=&quot;hidden&quot; id=&quot;&#39; + this.input_id + &#39;&quot; name=&quot;&#39; + this.input_id + &#39;&quot; value=&quot;&#39;+url+&#39;&quot;/&gt;&#39;);
            }
        },
        highlight: function (box_id) {
            
            // remove previous highlight.
            var highlight = $(&#39;#openid_highlight&#39;);
            if (highlight) {
                    highlight.replaceWith($(&#39;#openid_highlight a&#39;)[0]);
            }
            // add new highlight.
            $(&#39;.&#39;+box_id).wrap(&#39;&lt;div id=&quot;openid_highlight&quot;&gt;&lt;/div&gt;&#39;);
        },
        setCookie: function (value) {
        
                    var date = new Date();
                    date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000));
                    var expires = &quot;; expires=&quot;+date.toGMTString();
                    
                    document.cookie = this.cookie_name+&quot;=&quot;+value+expires+&quot;; path=&quot; + this.cookie_path;
        },
        readCookie: function () {
                    var nameEQ = this.cookie_name + &quot;=&quot;;
                    var ca = document.cookie.split(&#39;;&#39;);
                    for(var i=0;i &lt; ca.length;i++) {
                            var c = ca[i];
                            while (c.charAt(0)==&#39; &#39;) 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 = $(&#39;#openid_input_area&#39;);
                    
                    var html = &#39;&#39;;
                    var id = &#39;openid_username&#39;;
                    var value = &#39;&#39;;
                    var label = provider[&#39;label&#39;];
                    var style = &#39;&#39;;
                    
                    if (label) {
                            html = &#39;&lt;p&gt;&#39; + label + &#39;&lt;/p&gt;&#39;;
                    }
                    if (provider[&#39;name&#39;] == &#39;OpenID&#39;) {
                            id = this.input_id;
                            value = &#39;http://&#39;;
                            style = &#39;background:#FFF url(&#39;+this.img_path+&#39;openid-inputicon.gif) no-repeat scroll 0 50%; padding-left:18px;&#39;;
                    }
                    html += &#39;&lt;input id=&quot;&#39;+id+&#39;&quot; type=&quot;text&quot; style=&quot;&#39;+style+&#39;&quot; name=&quot;&#39;+id+&#39;&quot; value=&quot;&#39;+value+&#39;&quot; /&gt;&#39; + 
                                            &#39;&lt;input id=&quot;openid_submit&quot; type=&quot;submit&quot; value=&quot;Sign-In&quot;/&gt;&#39;;
                    
                    input_area.empty();
                    input_area.append(html);
    
                    $(&#39;#&#39;+id).focus();
        }
    };



All Openid Selector Solutions on Gang of Coders

Total of 1 Openid Selector Solutions

Changing the action of a form with JavaScript/jQuery