제출 동작은 버튼을 누를 때와 다르게 동작합니다.

Question

이름에 대한 텍스트 상자와 제출 버튼이있는 간단한 로그인 화면이 있습니다. 내가 버튼을 클릭하면

$(document).ready(function() { 

    $('#btnLogin').click(function() { validate() }); 
    $('#loginForm').submit(function() { validate() }); 

}); 

function validate() { 
    if ($('#txtLogin').val() != '') { 
     document.cookie = 'loginID=' + $('#txtLogin').val(); 
     $('#lblError').hide(); 
     document.location.href = 'mainmenu.aspx'; 
    } 
    else { 
     $('#txtLogin').text(''); 
     $('#lblError').show(); 
    } 
} 

그것은 작동하지만 Enter 키를 누르면, 그것은 mainmenu.aspx로 이동하지 않습니다 JQuery와 스크립트 실행이입니다. Chrome을 따르고 있으며 버튼을 누를 때처럼 리디렉션을 실행하지만 동일한 페이지에 머물러 있습니다. 또한 mainmenu.aspx의 Page_Load 함수 (C#)에 중단 점을 넣었지만 절대로 도달하지 않았습니다.

편집 : 여기

<form id="loginForm" runat="server"> 
    <div> 

     <div class='theme login'> 
      <p>Login</p> 
      <input type='text' id='txtLogin' maxlength='17' /> 
      <div><input type='button' id='btnLogin' class='button' value='Log In' /></div> 
      <div><span id='lblError' visible='false' text='*You must enter a valid username'></span></div> 
     </div> 

    </div> 
</form> 

Answer 1

, 기본 행동 제출 중지 preventDefault()를 사용

$('#loginForm').submit(function(e) { 
    e.preventDefault(); // swallow regular submit behavior 
    validate(); // your stuff 
    // real submit? your option 
}); 

R을 인용 : http://api.jquery.com/event.preventDefault/

Answer 2

이 양식 단지 일반 버튼 요소에 요소를 제출하고 시도 html로에게 있습니다. 브라우저가 뭔가를 가로 채고있을 수 있습니다.

Answer 3

편집 : 익명 함수 대신 함수를 직접 참조 하시겠습니까?

function validate() { 
    if ($('#txtLogin').val() != '') { 
     document.cookie = 'loginID='+$('#txtLogin').val();//set expire and path? 
     $('#lblError').hide(); 
     location.href = "mainmenu.aspx"; //"submit" 
    } 
    else { 
     $('#lblError').show(); 
     return false; //prevent submit 
    } 
} 

$(function() { 
    $('#btnLogin').click(validate); 
    $('#loginForm').submit(validate); 
});​ 

Answer 4

그 이유는 입력을 누르면 여전히 제출이 발생하기 때문입니다. 기본 동작을 취소하려면 by 이벤트 핸들러 기능에서 거짓을 반환합니다.

function validate() { 
    // ... 
    return false; 
} 

$('#loginForm').submit(validate); 
$('#btnLogin').click(validate); 

Answer 5

일부 HTML과 jQuery 코드가 변경되었습니다. 이제는 을 입력하고 버튼을 클릭하면 모두 확인하고 제출할 것입니다.

jQuery를

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("form").attr("action","javascript:void();"); // No action on form submission 

    $("input").keypress(function(e) { // Capture keys pressed 
     if(e.keyCode==13) { // Enter key? 
     validate(); 
     } 
    }); 

    $("input:button").click(function() { // Button clicked? 
     validate(); 
    }); 
    }); 

    function validate() { 
    if ($("#txtLogin").val()!='') { 
     document.cookie="loginID="+$("#txtLogin").val(); 
     $("#lblError").hide(); 
     $("form").attr("action","mainmenu.aspx"); // Change form action 
     $("form").submit(); // Submit the form 
    } else { 
     $("#lblError").show(); 
    } 
    } 
</script> 

HTML 양식 제출 처리기에서

<form id="loginForm" runat="server"> 
    <div> 
    <div class="theme login"> 
     <p>Login</p> 
     <input type="text" id="txtLogin" maxlength="17" /> 
     <div><input type="button" id="btnLogin" class="button" value="Log In" /></div> 
     <div id="lblError" style="display: none;">* You must enter a valid username</div> <!-- Error message --> 
    </div> 
    </div> 
</form>