При нажатии кнопки поведение отправки действует иначе, чем при нажатии

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();
    }
}

Это работает, когда я нажимаю кнопку, но когда я нажимаю ввод, он не переходит к mainmenu.aspx. Я следую за ним с помощью Chrome, и он выполняет перенаправление точно так же, как когда вы нажимаете кнопку, но он остается на той же странице. Я также поставил точку останова в функции Page_Load (C #) mainmenu.aspx, но она никогда не достигает ее.

РЕДАКТИРОВАТЬ :: Вот 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

Я изменил как ваш 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>

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

Попробуйте сделать элемент отправки в форме просто обычным элементом кнопки.Возможно, браузер что-то перехватывает.