Cambiar la acción de un formulario con JavaScript/jQuery

Question

Tengo un problema que me está volviendo loco. Estoy intentando modificar el selector de apertura para admitir Facebook. Estoy usando RPXNow como mi proveedor, por lo que requiere que el formulario se envíe a una URL diferente a la estándar.

Por ejemplo. RpxNow me obliga a configurar mi formulario como el siguiente:

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

Esto funciona para todos los proveedores, a excepción Facebook y Myspace. Los que requieren que el formulario sea enviado a una dirección URL diferente como esto:

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

y

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

El selector de ID abierto tiene un montón de botones en la forma que representan cada uno de los proveedores de OpenID . Lo que trato de hacer es detectar cuando se hace clic en el botón de Facebook o de Myspace y se cambia la acción en el formulario antes de enviarlo. Sin embargo, no está funcionando. Aquí está mi código.

He intentado varias variaciones, todas con el mismo "no es compatible" excepción

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

¿Alguna sugerencia?

actualización

Aquí hay más información sobre el código. He omitido algo por brevedad. Lo único que he hecho es agregar la sección de Facebook al objeto "providers_large" (que agrega con éxito el logotipo al sitio web), y en lugar de proporcionar una url que identifica al usuario, estoy creando una propiedad llamada "form_url" que es a lo que quiero establecer la acción de mi formulario. Si mira el título de la sección "Haga clic en la imagen del proveedor", verá dónde estoy comprobando la presencia de la propiedad "form_url" y el uso de jQuery para cambiar la acción y enviar el formulario. Sin embargo, cuando paso por el JavaScript en modo de depuración, me dice que es una operación no válida.

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) se confunde si tiene elementos de formulario llamados "acción". Puede evitar esto utilizando los métodos de atributo DOM o simplemente evitar tener elementos de formulario llamados "acción".

<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

Estoy de acuerdo con Paolo en que necesitamos ver más código. Probé este ejemplo demasiado simplificado y funcionó. Esto significa que es capaz de cambiar la acción del formulario sobre la marcha.

<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: He probado el código actualizado informados y se encontró un error de sintaxis en la declaración de providers_large. Hay una coma extra. Firefox ignora el problema, pero IE8 arroja un 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 

}; 

Answer 3

Usted puede simplemente utilizar

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

Por lo que yo sé, esto no va a dejar en silencio.

Si la página se está abriendo en un nuevo objetivo, es posible que deba asegurarse de que la URL sea única cada vez porque Webkit (cromo/safari) almacenará en caché el hecho de que ha visitado esa URL y no realizará la publicación.

Por ejemplo

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

Answer 4

sólo para añadir un detalle a lo Tamlyn escribió, en lugar de
$('form').get(0).setAttribute('action', 'baz'); //this works

$('form')[0].setAttribute('action', 'baz');
funciona igual de bien

Answer 5

Apenas una actualización a esto - He estado teniendo un problema similar al actualizar el atributo de acción de un formulario con jQuery.

Después de algunas pruebas, resulta que el comando: $ ('# myForm'). Attr ('action', 'new_url.html');

falla silenciosamente si el atributo de acción del formulario está vacío. Si actualizo el atributo de acción de mi formulario para contener algo de texto, el jquery funciona.

Answer 6

Usar script de Java para cambiar la URL de acción dinámica Obras para mí así

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