Changer l'action d'un formulaire avec javascript / jquery

Question

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

Toutes les suggestions?

Mise à jour

Voici plus de détails sur le code. J'ai oublié 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 un ivalid opération.

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) 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'attribut DOM ou simplement en évitant d'avoir des éléments de formulaire nommés "action".

 <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

Je suis d'accord avec Paolo qu'il faut 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 du formulaire à la volée.

 <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: 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

};
 

Answer 3

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

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

Answer 4

Vous pouvez réellement utiliser

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

Autant que je sache, cela n'échouera PAS silencieusement.

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 n'effectuera pas la publication.

Par exemple

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

Answer 5

Juste une mise à jour: j'ai un problème similaire lors de la mise à jour de l'attribut d'action d'un formulaire avec jQuery.

Après quelques tests, il s'avère que la commande: $ ('#MyForm'). Attr ('action', 'new_url.html');

échoue silencieusement si l'attribut d'action du formulaire est vide. Si je mets à jour l'attribut d'action de mon formulaire pour qu'il contienne du texte, jquery fonctionne.