Изменение действия формы с помощью JavaScript/jQuery

Question

У меня проблема, которая сводит меня с ума. Я пытаюсь изменить 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 

Есть предложения?

Update

Вот более подробная информация о коде. Для краткости я немного опустил. Единственное, что я сделал, добавляет раздел Facebook к объекту «providers_large» (который успешно добавляет логотип на веб-сайт), и вместо того, чтобы указывать URL-адрес пользователя, я создаю свойство «form_url», которое это то, что я хочу установить для действия моей формы. Если вы посмотрите на заголовок раздела «image image image», вы увидите, где я проверяю наличие свойства «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(); 
    } 
}; 

Answer 1

jQuery (1.4.2) путается, если у вас есть какие-либо элементы формы с именем «action». Вы можете обойти это с помощью методов атрибутов 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> 

Answer 2

Я согласен с Паоло, что нам нужно увидеть больше кода. Я проверил этот слишком упрощенный пример, и он сработал. Это означает, что он способен изменять действие формы «на лету».

<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 

}; 

Answer 3

Вы действительно можете просто использовать

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

Насколько я знаю, это не преминут молча.

Если страница открывается в новой цели, возможно, вам нужно будет удостовериться, что URL-адрес уникален каждый раз, потому что Webkit (chrome/safari) будет кэшировать тот факт, что вы посетили этот URL-адрес и не будете выполнять этот пост.

Например

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

Answer 4

просто добавить детали к тому, что написал, вместо
Тамлин $('form').get(0).setAttribute('action', 'baz'); //this works

$('form')[0].setAttribute('action', 'baz');
работает одинаково хорошо

Answer 5

Просто обновление к этому - я У меня была аналогичная проблема, обновляющая атрибут action формы с помощью jQuery.

После некоторого тестирования выясняется, что команда: $ ('# myForm'). Attr ('action', 'new_url.html');

не работает, если атрибут действия формы пуст. Если я обновляю атрибут действия моей формы, чтобы содержать какой-то текст, работает jquery.

Answer 6

Использование 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 %}