提交按钮不会触发表单提交

Question

I have this html form for which the submit button has some weird behavior.

When I click the Submit button it stays depressed, but it does not submit the form. However, if the form is submitted by other means, say pressing Enter on the keyboard, or GO on Mobile Safari (iDevice), everything works fine. I am using jQuery mobile btw.

Can anyone see why this might be the case?

HTML

<div class='login' id='login'>
    <div class='login-header'>Please Login</div>
    <div class='alert-error' id='login-error' style='display:none;'>
      Please check your username and password and try again.
    </div>

    <form id='login_form'>
      <br>
      <p class='label'>Username</p>
      <input type='text' name='username'>
      <p class ='label'>Password</p>
      <input type='password' name='password'>
      <button type='submit' data-theme='a' id='login-button'>Login</button> 
    </form>
  </div>

JS

$('#login_form').submit(function(e) {
        e.preventDefault();
        e.stopPropagation();

        var serializedFormData = $(this).serialize();

        // blah blah ajax form submit
        });
    });

EDIT

It seems like I was able to solve my problem by switching the following lines:

<button type='submit' data-theme='a' id='login-button'>Login</button> 

with

<input type='submit' value='Submit'>.

Reputation remains to be awarded to anyone who knows why this worked.

Answer 1

Try removing e.preventDefault(); and see if the button is working.

Answer 2

Try

  $('#login_button').click(function(e) {
    e.preventDefault();

    var serializedFormData = $('#login_form').serialize();

    // blah blah ajax form submit
    });
});

This is how I submit my forms using ajax, pressing return still works as expected

Answer 3

There's no <button type="submit">Submit me</button> .

Submit button should actually be an input tag with type="submit"