Изменение действия формы с помощью JavaScript/jQuery
у меня проблема, которая сводит меня с ума. Я пытаюсь изменить openid-селектор для поддержки facebook. Я использую RPXNow в качестве своего провайдера, поэтому он требует, чтобы форма была отправлена на другой url-адрес, чем стандартный.
например. RpxNow требует от меня настроить мою форму следующим образом:
<form action="https://wikipediamaze.rpxnow.com/openid/start?token_url=...">
это работает для каждого провайдера, за исключением Facebook и Myspace. Те требуют, чтобы форма была размещена на другой url, например это:
<form action="https://wikipediamaze.rpxnow.com/facebook/start?token_url=...">
и
<form action="https://wikipediamaze.rpxnow.com/myspace/start?token_url=...">
селектор open id имеет кучу кнопок на форме, каждая из которых представляет поставщиков openid. То, что я пытаюсь сделать, это определить, когда кнопка Facebook или Myspace нажата и изменила действие в форме перед отправкой. Однако это не работает. Вот мой код.
Я пробовал несколько вариантов, все с той же "не поддерживается" исключение
$("#openid_form").attr("action", form_url)
document.forms[0].action = form_url
любой предложения?
обновление
вот более подробная информация о коде. Я опустил некоторые для краткости. Единственное, что я сделал, это добавил раздел Facebook в объект "providers_large" (который успешно добавляет логотип на веб-сайт), и вместо того, чтобы предоставить url-адрес, идентифицирующий пользователя, я создаю свойство под названием "form_url", которое я хочу установить действие моей формы. Если вы посмотрите на заголовок раздела "изображение поставщика нажмите", вы увидите, где я нахожусь проверка на наличие свойства "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();
}
};
6 ответов:
jQuery (1.4.2) запутывается, если у вас есть какие-либо элементы формы с именем "действие". Вы можете обойти это с помощью методов атрибута DOM или просто избежать наличия элементов формы с именем "действие".
<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>
Я согласен с Паоло, что нам нужно увидеть больше кода. Я проверил этот чрезмерно упрощенный пример, и он сработал. Это означает, что он способен изменять форму действия на лету.
<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: Я проверил обновленный код, который вы опубликовали, и обнаружил синтаксическую ошибку в объявлении
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 };
просто добавить деталь к тому, что Тамлин написал, вместо
$('form').get(0).setAttribute('action', 'baz'); //this works
$('form')[0].setAttribute('action', 'baz');
работает одинаково хорошо
вы можете просто использовать
$("#form").attr("target", "NewAction");насколько я знаю, это не просто сбой.
Если страница открывается в новой цели, вам может потребоваться убедиться, что URL-адрес уникален каждый раз, потому что Webkit (chrome/safari) будет кэшировать факт посещения этого URL-адреса и не будет выполнять сообщение.
$("form").attr("action", "/Pages/GeneratePreview?" + new Date().getMilliseconds());
просто обновление для этого - у меня была аналогичная проблема с обновлением атрибута действия формы с помощью jQuery.
после некоторого тестирования оказалось, что команда: $('#myForm').attr ('action', ' new_url.html');
молча завершается ошибкой, если атрибут действия формы пуст. Если я обновляю атрибут действия моей формы, чтобы содержать некоторый текст, jquery работает.
используйте Java-скрипт для динамического изменения 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 %}
Comments