Modification de l'action d'un formulaire avec JavaScript/jQuery

Je vais avoir un problème qui me rend fou. Je suis en train de modifier la openid-sélecteur à l'appui de facebook. Je suis en utilisant RPXNow que mon fournisseur il exige que le formulaire soit soumis à une url différente de la norme.

Par exemple. RpxNow me demande de configurer mon formulaire comme ceci:

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

Cela fonctionne pour chaque fournisseur, sauf pour Facebook et Myspace. Ceux-ci exigent la forme pour être affecté à une autre url, comme ceci:

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

et

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

L'open sélecteur d'id a un tas de boutons sur la forme de chaque représentant les fournisseurs openid. Ce que j'essaie de faire est de détecter lorsque le Facebook ou Myspace bouton est cliqué et changé l'action sur le formulaire avant de le soumettre. Cependant il ne fonctionne pas. Voici mon code.

J'ai essayé plusieurs variantes, toutes avec le même "non pris en charge" exception

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

Des suggestions?

Mise à jour

Voici plus de détails sur le code. J'ai omis certains pour des raisons de concision. La seule chose que j'ai fait est ajouté le Facebook de la section du "providers_large" de l'objet (qui a réussi ajoute le logo du site), et au lieu de fournir une url d'identification de l'utilisateur, je suis de la création d'une propriété appelée "form_url", qui est ce que je veux pour définir l'action de mon formulaire. Si vous regardez le titre de la section "Fournisseur de l'image, cliquez", vous verrez où je veux en vérifiant la présence de la propriété "form_url" et l'utilisation de jQuery pour modifier l'action et de soumettre le formulaire. Cependant, quand je l'étape à travers le JavaScript en mode debug, il me dit que c'est une opération non valide.

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();
}
};
  • Nous avons vraiment besoin de plus de code. Quel est le code HTML des boutons ressemblent? Pourquoi ne pas donner la openid forme d'un IDENTIFIANT pour une sélection facile? Est-il hors de votre contrôle?
  • Je ne suis pas sûr de ce que plus de code que je puisse vous donner. Le problème n'est pas de ma sélection. Je peux appeler avec succès $("#openid_form").submit(). Le problème est que lorsque je tente de changer l'attribut action du formulaire, il renvoie une erreur.
  • Avez-vous été en mesure de résoudre ce problème? A ma réponse vous aider?
  • Jose - j'apprécie le suivi, mais je n'ai toujours pas été en mesure de le faire fonctionner. Je vous ai déjà utiliser le openid-sélecteur de bibliothèque? code.google.com/p/openid-selector je suis en train de l'adapter pour utiliser facebook et RpxNow, mais cette question est maintenant de moi.
InformationsquelleAutor Micah | 2009-06-11