Modifica dell'azione di un modulo con JavaScript/jQuery

Question

Sto riscontrando un problema che mi sta facendo impazzire. Sto cercando di modificare l'openid-selector per supportare Facebook. Sto usando RPXNow come mio provider in modo che richieda che il modulo sia inviato a un URL diverso dallo standard.

Ad esempio. RpxNow mi impone di impostare la mia forma in questo modo:

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

Questo funziona per tutti i provider ad eccezione di Facebook e Myspace. Quelli richiedono il modulo venga inviato ad un URL diverso come questo:

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

e

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

Il selettore id aperto ha un gruppo di pulsanti sul modulo ognuno dei quali rappresenta i provider OpenID . Quello che sto cercando di fare è rilevare quando si fa clic sul pulsante Facebook o Myspace e modificare l'azione sul modulo prima dell'invio. Tuttavia non funziona. Ecco il mio codice.

Ho provato diverse varianti tutte con l'eccezione stessa "non supportato"

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

Qualche suggerimento?

Aggiornamento

Qui ci sono ulteriori dettagli sul codice. Ne ho omessi alcuni per brevità. L'unica cosa che ho fatto è stata aggiungere la sezione Facebook all'oggetto "providers_large" (che aggiunge con successo il logo al sito web) e invece di fornire un URL che identifica l'utente, sto creando una proprietà chiamata "form_url" che è quello che voglio impostare l'azione della mia forma per. Se guardi il titolo della sezione "Provider image click" vedrai dove sto verificando la presenza della proprietà "form_url" e usando jQuery per cambiare l'azione e inviare il modulo. Tuttavia quando passo attraverso il JavaScript in modalità debug mi dice che è un'operazione non valida.

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) viene confuso se si dispone di elementi del modulo denominati "azione". È possibile aggirare questo usando i metodi di attributo DOM o semplicemente evitare di avere elementi di forma denominati "azione".

<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

Sono d'accordo con Paolo che abbiamo bisogno di vedere più codice. Ho provato questo esempio troppo semplice e ha funzionato. Ciò significa che è in grado di cambiare l'azione del modulo al volo.

<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: Ho testato il codice aggiornato avete inviato e ha trovato un errore di sintassi nella dichiarazione di providers_large. C'è una virgola in più. Firefox ignora il problema, ma IE8 genera un errore.

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

Si può effettivamente utilizzare solo

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

Per quanto ne so, questo non mancherà in silenzio.

Se la pagina si sta aprendo in un nuovo target, potrebbe essere necessario assicurarsi che l'URL sia univoco ogni volta poiché Webkit (chrome/safari) memorizzerà nel cache il fatto che l'URL sia stato visitato e non eseguirà il post.

Per esempio

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

Answer 4

solo per aggiungere un dettaglio a ciò che Tamlyn ha scritto, invece di
$('form').get(0).setAttribute('action', 'baz'); //this works

$('form')[0].setAttribute('action', 'baz');
funziona altrettanto bene

Answer 5

Solo un aggiornamento per questo - Ho avuto un problema simile aggiornando l'attributo action di un modulo con jQuery.

Dopo alcuni test risulta che il comando: $ ('# myForm'). Attr ('action', 'new_url.html');

non riesce in modo corretto se l'attributo di azione del modulo è vuoto. Se aggiorno l'attributo action del mio modulo per contenere del testo, funziona jquery.

Answer 6

Usa script Java per cambiare l'azione URL dinamicamente per me funziona bene

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