Changing the action of a form with JavaScript jQuery

Question

I m having an issue that is driving me crazy  I m trying to modify the openid-selector to support facebook  I 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  https   wikipediamaze rpxnow com openid start token url      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  https   wikipediamaze rpxnow com facebook start token url      gt   and   lt form action  https   wikipediamaze rpxnow com myspace start token url      gt   The open id selector has a bunch of buttons on the form each representing the openid providers  What I 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 s not working  Here is my code   I ve tried several variations all with the same  not supported  exception      openid form   attr  action   form url  document forms 0  action   form url   Any suggestions   Update  Here are more details on the code  I ve omitted some for brevity  The only thing i ve done is added the Facebook section to the  providers large  object  which successfully adds the logo to the website   and instead of supply a url identifying the user  I m creating a property called  form url  which is what I want to set the action of my form to  If you look at the section title  Provider image click  you ll see where I m checking for the presence of the property  form url  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 s 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   lt br  gt                      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   lt 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  gt  lt  a gt                       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  gt  0                    hidden value   url            else                       openid form   append   lt input type  hidden  id      this input id      name      this input id      value    url     gt                          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   lt div id  openid highlight  gt  lt  div gt                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  lt  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     lt p gt     label     lt  p gt                                      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      lt input id    id    type  text  style    style    name    id    value    value      gt                                                lt input id  openid submit  type  submit  value  Sign-In   gt                     input area empty                    input area append html                          id  focus

User · Answer

I agree with Paolo that we need to see more code. I tested this overly simplified example and it worked. This means that it is able to change the form action 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 declaration of providers_large. There's an extra comma. Firefox ignores the issue, but IE8 throws an error.

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

};

User · Answer

just to add a detail to what Tamlyn wrote  instead of    form   get 0  setAttribute  action    baz      this works      form   0  setAttribute  action    baz    works equally well

User · Answer

Use Java script to change action url dynamically  Works for me well  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                 lt form name  forms  method  post  action   lt put default url gt   onSubmit  return checkForm this    gt    csrf token

User · Answer

Just an update to this - I ve been having a similar problem updating the action attribute of a form with jQuery   After some testing it turns out that the command      myForm   attr  action   new url html     silently fails if the action attribute of the form is empty  If i update the action attribute of my form to contain some text  the jquery works

User · Answer

jQuery  1 4 2  gets confused if you have any form elements named  action   You can get around this by using the DOM attribute methods or simply avoid having form elements named  action     lt form action  foo  gt     lt button name  action  value  bar  gt Go lt  button gt   lt  form gt    lt script type  text javascript  gt       form   attr  action    baz      this fails silently      form   get 0  setAttribute  action    baz      this works  lt  script gt

User · Answer

You can actually just use      form   attr  target    NewAction      As far as I know  this will NOT fail silently   If the page is opening in a new target  you may need to make sure the URL is unique each time because Webkit  chrome safari  will cache the fact you have visited that URL and won t perform the post   For example     form   attr  action     Pages GeneratePreview     new Date   getMilliseconds

[jquery] Changing the action of a form with JavaScript/jQuery

Examples related to jquery

Examples related to openid

Examples related to openid-selector