Submit behavior is acting differently when pressin

问题:

I've got this simple login screen where is has a text box for the name, and a submit button. The jquery script running is this:

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

It works when I click the button, but when I press enter, it doesn't navigate to the mainmenu.aspx. I'm following it with Chrome and it does execute the redirect just like when you press the button, but it just stays on the same page. I also put a break point in the Page_Load function (C#) of the mainmenu.aspx, but it never reaches it.

EDIT:: Here's the 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>

回答1:

In your form submit handler, use preventDefault() to stop the default submit behavior:

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

Reference: http://api.jquery.com/event.preventDefault/

回答2:

Try making the submit element in the form just a regular button element. The browser may be intercepting something.

回答3:

The reason for that is your submit still happens when you hit enter. You need to cancel the default behavior by returning false in the event handler function.

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

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

回答4:

Edit: refer to the function directly instead of an anonymous function?

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

回答5:

I changed both some of your HTML and jQuery code. Now it will check and submit on both Enter and when the button is clicked.

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>