wake-up-neo.com

Ändern der Aktion eines Formulars mit JavaScript / jQuery

Ich habe ein Problem, das mich verrückt macht. Ich versuche, den OpenID-Selektor so zu ändern, dass er Facebook unterstützt. Ich verwende RPXNow als Anbieter, daher muss das Formular an eine andere URL als die Standard-URL gesendet werden.

Beispielsweise. Bei RpxNow muss ich mein Formular folgendermaßen einrichten:

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

Dies funktioniert für alle Anbieter mit Ausnahme von Facebook und Myspace. Für diese muss das Formular unter einer anderen URL wie der folgenden veröffentlicht werden:

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

und

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

Der OpenID-Selektor verfügt über eine Reihe von Schaltflächen auf dem Formular, die jeweils die OpenID-Anbieter darstellen. Ich versuche zu erkennen, wann auf die Facebook- oder Myspace-Schaltfläche geklickt wird, und ändere die Aktion auf dem Formular, bevor ich sie abschicke. Es funktioniert jedoch nicht. Hier ist mein Code.

Ich habe mehrere Variationen mit derselben "nicht unterstützten" Ausnahme ausprobiert

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

Irgendwelche Vorschläge?

pdate

Hier finden Sie weitere Details zum Code. Ich habe einige der Kürze halber weggelassen. Das Einzige, was ich getan habe, ist das Hinzufügen des Facebook-Abschnitts zum "providers_large" -Objekt (wodurch das Logo erfolgreich zur Website hinzugefügt wird). Anstatt eine den Benutzer identifizierende URL anzugeben, erstelle ich eine Eigenschaft mit dem Namen "form_url" ist das, worauf ich die Aktion meines Formulars einstellen möchte. Wenn Sie sich den Abschnittstitel "Bild des Anbieters anklicken" ansehen, werden Sie sehen, wo ich das Vorhandensein der Eigenschaft "form_url" überprüfe und mit jQuery die Aktion ändere und das Formular abschicke. Wenn ich jedoch im Debug-Modus durch das JavaScript gehe, wird mir mitgeteilt, dass es sich um eine ungültige Operation handelt.

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();
    }
};
62
Micah

jQuery (1.4.2) ist verwirrt, wenn Sie Formularelemente mit dem Namen "action" haben. Sie können dies umgehen, indem Sie die DOM-Attributmethoden verwenden oder einfach die Verwendung von Formularelementen mit dem Namen "action" vermeiden.

<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>
125
Tamlyn

Ich stimme Paolo zu, dass wir mehr Code sehen müssen. Ich habe dieses stark vereinfachte Beispiel getestet und es hat funktioniert. Dies bedeutet, dass es in der Lage ist, die Formularaktion im laufenden Betrieb zu ändern.

<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: Ich habe den aktualisierten Code, den Sie gepostet haben, getestet und einen Syntaxfehler in der Deklaration von providers_large Festgestellt. Es gibt ein zusätzliches Komma. Firefox ignoriert das Problem, aber IE8 gibt einen Fehler aus.

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

};
25
Jose Basilio

nur um ein Detail zu dem hinzuzufügen, was Tamlyn geschrieben hat, anstatt
$('form').get(0).setAttribute('action', 'baz'); //this works

$('form')[0].setAttribute('action', 'baz');
funktioniert genauso gut

6
yitwail

Sie können tatsächlich nur verwenden

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

Soweit ich weiß, wird dies NICHT im Stillen scheitern.

Wenn die Seite in einem neuen Ziel geöffnet wird, müssen Sie möglicherweise sicherstellen, dass die URL jedes Mal eindeutig ist, da Webkit (Chrome/Safari) die Tatsache zwischenspeichert, dass Sie diese URL besucht haben, und den Beitrag nicht ausführt.

Beispielsweise

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

Nur ein Update dazu - ich hatte ein ähnliches Problem beim Aktualisieren des Aktionsattributs eines Formulars mit jQuery.

Nach einigen Tests hat sich herausgestellt, dass der Befehl: $ ('# myForm'). Attr ('action', 'new_url.html');

schlägt unbeaufsichtigt fehl, wenn das Aktionsattribut des Formulars leer ist. Wenn ich das Aktionsattribut meines Formulars so aktualisiere, dass es Text enthält, funktioniert die Abfrage.

3
Daniel

Verwenden Sie das Java Skript, um die Aktions-URL dynamisch zu ändern. Funktioniert für mich gut

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