與按Enter相比，按下按鈕時的提交行為有所不同

Question

我有一個簡單的登錄屏幕，其中有一個名稱文本框和一個提交按鈕。 運行的jQuery腳本是這樣的：

$(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。 我在Chrome上跟蹤它，它確實執行重定向，就像您按按鈕時一樣，但是它只停留在同一頁面上。 我還在mainmenu.aspx的Page_Load函數（C＃）中設置了一個斷點，但是它從未達到。

編輯：：這是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><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
});

參考： http : //api.jquery.com/event.preventDefault/

Answer 2

嘗試使表單中的Submit元素只是常規的button元素。 瀏覽器可能正在攔截某些內容。

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

原因是當您按下Enter鍵時，您的提交仍然會發生。 您需要通過在事件處理函數中返回false來取消默認行為 。

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

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

Answer 5

我更改了一些HTML和jQuery代碼。 現在，它將在Enter和單擊按鈕時進行檢查並提交。

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>