Changer l’action d’un formulaire avec JavaScript / jQuery

J’ai un problème qui me rend fou. J’essaie de modifier le sélecteur openid pour supporter facebook. J’utilise RPXNow en tant que fournisseur, il faut donc que le formulaire soit soumis à une URL différente de la norme.

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

Cela fonctionne pour tous les fournisseurs, sauf pour Facebook et Myspace. Ceux-ci exigent que le formulaire soit publié dans une URL différente comme ceci:

Le sélecteur d’id ouvert a un tas de boutons sur le formulaire, chacun représentant les fournisseurs openid. Ce que je tente de faire, c’est de détecter le clic sur le bouton Facebook ou Myspace et de modifier l’action sur le formulaire avant de l’envoyer. Cependant, ça ne marche pas. Voici mon code.

J’ai essayé plusieurs variantes avec la même exception “non supscope”

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

Aucune suggestion?

Mettre à jour

Voici plus de détails sur le code. J’en ai omis pour des raisons de concision. La seule chose que j’ai faite est d’append la section Facebook à l’object “providers_large” (qui ajoute le logo au site avec succès), et au lieu de fournir une URL identifiant l’utilisateur, je crée une propriété appelée “form_url” qui est ce que je veux mettre l’action de ma forme à. Si vous regardez le titre de la section “Image du fournisseur, cliquez sur”, vous verrez où je recherche la présence de la propriété “form_url” et en utilisant jQuery pour modifier l’action et envoyer le formulaire. Cependant, lorsque je passe en revue le code JavaScript en mode débogage, il me dit qu’il s’agit d’une opération invalide.

 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('
'); 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 ''; }, /* 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(''); } }, 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('
'); }, setCookie: function (value) { var date = new Date(); date.setTime(date.getTime()+(this.cookie_expires*24*60*60*1000)); var expires = "; expires="+date.toGMTSsortingng(); 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 = '' + label + '
'; } 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_area.empty(); input_area.append(html); $('#'+id).focus(); } };

jQuery (1.4.2) devient confus si vous avez des éléments de formulaire nommés “action”. Vous pouvez contourner ce problème en utilisant les méthodes d’atsortingbut DOM ou simplement éviter d’avoir des éléments de formulaire nommés “action”.

Je suis d’accord avec Paolo que nous avons besoin de voir plus de code. J’ai testé cet exemple trop simplifié et cela a fonctionné. Cela signifie qu’il est capable de changer l’action de la forme à la volée.

   First Name:
 Last Name:

EDIT: J’ai testé le code mis à jour que vous avez posté et trouvé une erreur de syntaxe dans la déclaration de providers_large . Il y a une virgule supplémentaire. Firefox ignore le problème, mais IE8 génère une erreur.

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

juste pour append un détail à ce que Tamlyn a écrit, au lieu de
$('form').get(0).setAtsortingbute('action', 'baz'); //this works

$('form')[0].setAtsortingbute('action', 'baz');
fonctionne aussi bien

Vous pouvez réellement utiliser

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

Pour autant que je sache, cela ne va pas échouer en silence.

Si la page s’ouvre dans une nouvelle cible, vous devrez peut-être vous assurer que l’URL est unique à chaque fois, car Webkit (chrome / safari) mettra en cache le fait que vous avez visité cette URL et que vous n’effectuerez pas la publication.

Par exemple

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

Juste une mise à jour à cela – j’ai eu un problème similaire en mettant à jour l’atsortingbut d’action d’un formulaire avec jQuery.

Après quelques tests, il apparaît que la commande: $ (‘# myForm’). Attr (‘action’, ‘new_url.html’);

échoue silencieusement si l’atsortingbut d’action du formulaire est vide. Si je mets à jour l’atsortingbut d’action de mon formulaire pour contenir du texte, la jquery fonctionne.

Utiliser le script Java pour changer l’action

 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/"; }

}

 {% csrf_token %}