'발사에서 양식의 기본 단추 방지'문제에 대한 좋은 해결책은 무엇입니까?

Question

나는 '기본 단추'가 바람직하지 않게 발사되는 오래된 문제에 대한 해결책이 필요합니다. 즉 입력란에 입력을 누르지 만 실행하려는 것이 아닌 양식에 제출 버튼이 있습니다 (아니면 양식이 전혀 실행되기를 원하지 않을 수도 있음).

다음 '해결책'에 대해 궁금합니다. 약간 hacky하지만 내가 말할 수있는 한 신뢰할 수 있어야합니다.

첫 번째 것은 보이지 않는 버튼입니다. 그런 다음 일부 jquery가 즉시이를 비활성화합니다. 양식에서 Enter 키를 누르면이 단추는 '기본 단추'로 계산되고 트리거되지만 'return false'이벤트 처리기로 인해 아무 것도 수행하지 않습니다.

솔루션 이전에 keydown 이벤트 처리기 또는 기타 모든 복잡한 브라우저/모든 브라우저에서 테스트하기 어려운 것에 의존했습니다.

내 솔루션 (이전에는 보지 못했지만 아마도 고유하지 않은 것 같습니다)은 훨씬 단순 해 보이며 신뢰할 만합니다. 서버가 양식 데이터에서이 버튼을 수신하기 때문에 자바 스크립트가 사용 중지되었는지 여부를 알 수 있습니다.

<form action="/store/checkout" method="post"> 

    <input id="btnFakeSubmit" name="FakeSubmit" src="/images/pixel.gif" 
    style="width:1px; height:1px; position:absolute;" type="image" /> 

     <script> 
      $('#btnFakeSubmit').click(function() { 
       return false; 
      }); 
     </script> 

모든 브라우저에서 버튼을 숨기는 가장 좋은 방법을 포함한이 솔루션에 대한 조언. 당신이 할 수

Answer 1

한 가지입니다

• 가 전송을 수행 다른 버튼 만들기 버튼을
• 를 제출 만들지 마십시오 javascript: return false;
• 에 제출 조치를 설정하고, 양식의 작업을 실제 주소로 변경하는 함수를 호출 한 다음 폼 개체에서 submit()을 호출합니다.

<form id="myform" action="javascript: return false"> 
.... 
<input type="button" onclick="submit_myform"> 
... 

function submit_myform() 
{ 
    jQuery("#myform").attr("action", "post.php").submit(); //untested 
} 

이렇게하면이 버튼을 명시 적으로 누르지 않고 양식을 제출할 수 없습니다.

Answer 2

그냥 한 가지 이상의 제출 버튼이 필요한데 왜 모든 브라우저에서 숨길까요?

Answer 3

당신은 (대부분) 올바른 방향으로 가고 있습니다. 먼저 제출 버튼이 필요합니다. 제출

#dummy { display: none; } 

그리고 비활성화 :

$(function() { 
    $("#dummy").click(function() { 
    return false; 
    }); 
}); 

을 당신이 사람들을 맞추려면 지금 그것을 숨길

<input id="dummy" name="dummy" type="submit"> 

: 이것은 매우 첫 번째 형태의 버튼을 제출해야한다 Javascript가 비활성화 된 상태에서 POST/GET (적절한 경우) 변수에 "dummy"라는 변수가 있는지 확인합니다 (실제로 제출 버튼이 눌러지면 보내집니다). 받은 경우 양식을 그대로 사용자에게 보냅니다. 대부분의 경우에는 Javascript가 비활성화 된 사람들을 위해 취사를 할만한 가치가 없습니다.

자바 스크립트가 동작과 다른 방법으로 엉망으로 만들어 지기만하면 양식 제출을 허용 할 수 있지만 너무 무거울 수 있습니다.

Answer 4

<script> 
var statusSend = valse; 
var checkSend = function(){return statusSend;} 
</script> 

<form id="myForm" action="/store/checkout" method="post" onSubmit="return checkSend();"> 
... 
<button id="myButton">Send Data</button> 
</form> 

<script> 
$("#myButton").click(function(e){ 
    e.stopPropagation(); 
    //check data ok 
    statusSend = true; 
    $("#myForm").submit(); 
}); 
</script> 

Answer 5

다음은 ASP.net 프로젝트에서이 문제를 해결하는 방법입니다.

<form runat="server" defaultbutton="DoNothing"> 
     <asp:Button ID="DoNothing" runat="server" Enabled="false" style="display: none;" />