使用JavaScript/jQuery更改表单的操作

63

我遇到一个令我发疯的问题。我正在尝试修改openid-selector以支持Facebook。我使用的提供商是RPXNow,因此它要求将表单提交到与标准不同的网址。

例如,RpxNow要求我设置表单如下:

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

这适用于除Facebook和Myspace之外的所有提供商。这些需要将表单发布到不同的网址,例如:

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

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

OpenID选择器在表单上有许多按钮,每个代表一个OpenID提供商。我要做的是检测Facebook或Myspace按钮何时被点击,并在提交前更改表单上的操作。然而它没有起作用。以下是我的代码。

我已经尝试了几种变化,都出现了相同的"不受支持"异常。

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

有什么建议吗?

更新

以下是代码的更多细节,为了简洁起见,我省略了一些内容。我所做的唯一事情就是将Facebook部分添加到“providers_large”对象中(成功将标志添加到网站),并且不再提供用于识别用户的url。相反,我正在创建一个称为“form_url”的属性,这是我要设置表单操作的内容。如果您查看“Provider image click”部分的标题,您将看到我正在检查属性“form_url”的存在,并使用jQuery更改操作并提交表单。但是,在调试模式下逐步执行JavaScript时,它告诉我这是无效操作。

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

1
我们确实需要更多的代码。按钮的HTML是什么样子的?为什么不给OpenID表单一个ID以便于选择?这是否超出了你的控制范围? - Paolo Bergantino
我不确定我还能给你什么代码。问题不在于我的选择。我可以成功调用$("#openid_form").submit()。问题是,当我尝试更改表单的action属性时,它会抛出一个错误。 - Micah
@Micah - 你解决了这个问题吗?我的回答有帮到你吗? - Jose Basilio
Jose - 我很感激你的跟进,但我仍然无法让它正常工作。你有没有使用过 openid-selector 库?http://code.google.com/p/openid-selector/ 我正在尝试将其适应于 Facebook 和 RpxNow,但这个问题一直困扰着我。 - Micah
6个回答

132

如果你有任何名为"action"的表单元素,jQuery (1.4.2) 会混淆。你可以通过使用DOM属性方法或避免使用名为"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>

9
谢谢,这帮了我大忙。我在还剩一点头发的时候发现了这个,真是太好了。 - ebt
2
我也有这种情况,但我的更加棘手。我刚使用了WordPress的settings_field()函数,结果发现该函数在输出中包含了<input name="action" value="update" />。非常感谢您的帮助。 - Ardee Aram
啊哈!你刚刚救了我!表单字段名为“action”让我出了点问题。 - Marc Hughes
对于此话题可能有点偏离,但是如果你正在使用Zend MVC,则称为“action”的表单字段也会出现问题——它会将一个名为“action”的字段作为路由的一部分而默默设置,它们会彼此干扰。你可能认为在前几次之后我应该记住了,但有时仍然会困扰我。 - Polsonby
使用 $($(myform).get(0)).attr('action', action); 对我有效。 - user673046
jQuery 1.8,问题仍然存在 :( - neobie

26

我同意Paolo的观点,我们需要看到更多的代码。我测试了这个过于简化的示例并且它工作正常。这意味着它可以动态改变表单的行为。

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

编辑: 我测试了你发布的更新代码,并发现在providers_large的声明中存在语法错误,有一个额外的逗号。Firefox忽略了这个问题,但IE8会抛出一个错误。

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

};

是的。我在IE8、FF和Chrome中进行了测试。 - Jose Basilio
这是我在将代码放入stackoverflow时犯的一个错误。为了简洁起见,我删除了许多其他的providers_larg声明。如果您有时间,可以从code.google.com/p/openid-selector下载库并尝试使其工作。这是一个一直困扰着我的问题,我现在没有足够的脑力来解决它。非常感谢您的帮助。 - Micah

6

补充一下Tamlyn所写的细节,可以使用以下代码来替代:
$('form').get(0).setAttribute('action', 'baz'); //这个代码能够正常工作

$('form')[0].setAttribute('action', 'baz');
同样能够正常工作


4
你可以直接使用:
$("#form").attr("target", "NewAction");

据我所知,这不会默默地失败。
如果页面在新的目标中打开,您可能需要确保每次URL都是唯一的,因为Webkit(chrome/safari)将缓存您访问该URL的事实,并且不会执行post请求。
例如:
$("form").attr("action", "/Pages/GeneratePreview?" + new Date().getMilliseconds());

3

这只是一个更新——我一直在使用jQuery更新表单的操作属性时遇到类似的问题。

经过一些测试,发现命令: $('#myForm').attr('action','new_url.html');

如果表单的操作属性为空,则会悄悄地失败。 如果我更新表单的操作属性以包含一些文本,则jQuery可以正常工作。


非常正确,而且方法也需要说明。谢谢提醒,我现在感觉像个白痴;-) - Ian Stanway

1

使用JavaScript动态更改操作URL 对我来说效果很好

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接