JavaScript/jQuery를 사용하여 양식의 동작 변경

Question

나를 미치게 만드는 문제가 있습니다. facebook을 지원하기 위해 openid-selector를 수정하려고합니다. 내 공급자로 RPXNow를 사용하고 있으므로 표준보다 다른 URL로 양식을 제출해야합니다.

예를 들면. RpxNow는 다음과 같이 설정 내 양식을 저를 필요

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

이 페이스 북과 마이 스페이스를 제외한 모든 업체에 적용됩니다. 그 양식은 다음과 같이 다른 URL에 게시해야 :

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

및

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

오픈 ID 선택기 양식에 버튼의 무리를 가지고 각 오픈 ID 공급자를 나타내는 . 내가 뭘 하려는지는 Facebook이나 MySpace 버튼을 클릭하고 제출하기 전에 양식의 동작을 변경했을 때 감지합니다. 그러나 그것은 작동하지 않습니다. 여기 내 코드가있다.

나는 모두 같은 "지원되지 않음"예외

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

어떤 제안으로 몇 가지 변화를 시도했습니다? 여기

업데이트

코드에 대한 자세한 내용입니다. 간결함을 위해 일부를 생략했습니다. 내가 한 유일한 일은 "providers_large"객체 (웹 사이트에 로고를 성공적으로 추가하는)에 Facebook 섹션을 추가하고 사용자를 식별하는 URL을 제공하는 대신 "form_url"이라는 속성을 만듭니다. 내 양식의 동작을 설정하려는 것입니다. "공급자 이미지 클릭"섹션 제목을 보면 "form_url"속성의 존재를 확인하고 jQuery를 사용하여 작업을 변경하고 양식을 제출하는 곳을 확인할 수 있습니다. 그러나 디버그 모드에서 자바 스크립트를 통해 단계를 거치면 잘못된 연산임을 알 수 있습니다.

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

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

Answer 2

나는 더 많은 코드가 필요하다는 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 

}; 

Answer 3

당신은 실제로 단지 내가 아는 한

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

을 사용할 수 있습니다, 이것은 자동으로 실패하지 않을 것이다.

페이지가 새 대상에서 열리는 경우 Webkit (chrome/safari)이 해당 URL을 방문 했으므로 게시물을 수행하지 않으므로 매번 URL이 고유해야합니다. 예를 들어

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

Answer 4

단지 Tamlyn이 대신
의 쓴 것과 세부 사항을 추가하는 $('form').get(0).setAttribute('action', 'baz'); //this works

$('form')[0].setAttribute('action', 'baz');
작품 동일하게

Answer 5

이 단지 업데이 트 - I jQuery를 사용하여 양식의 작업 속성을 업데이트하는 것과 비슷한 문제가 발생했습니다.

몇 가지 테스트를 마친 후 $ ('# myForm'). attr ('action', 'new_url.html');

은 양식의 작업 특성이 비어있는 경우 자동으로 실패합니다. 일부 텍스트를 포함하도록 양식의 작업 특성을 업데이트하면 jquery가 작동합니다.

Answer 6

를 사용하여 자바 스크립트

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