Question

我正在使用jQuery来提交表单，因此我不希望表单自行提交。

这是我的表格：

<form class="navbar-form navbar-right" id="signform">
   <div class="form-group">
      <input type="text" placeholder="Username" class="form-control">
    </div>
    <div class="form-group">
      <input type="password" placeholder="Password" class="form-control">
    </div>
    <button id="signbtn" class="btn btn-success">Sign in</button>
</form>

这是我的JQuery代码：

var signingIn = false;

$(document).ready(function() {
    $('#signbtn').click(function() {
        if (signingIn) return;
        signingIn = true;

        var img = $('<img id="loader" style="padding-left: 10px;" src="loader.gif"/>');
        $(this).after(img);

        var data = $('signform').serialize();

        $.ajax({
            url: '/logs',
            type: 'post',
            data: data,
            done: function() {
                $('#loader').remove();
                alert('success');
            }
        });
    });
});

现在，当我访问url：website.com/index.html并点击登录时，它会刷新页面（我根本不需要）并转到website.com/index.html？ - 现在当我再次点击它时，没有任何反应（正是我想要的所有时间，所以我通过jQuery添加的元素不会丢失）。

Answer 1

你想像这样使用jQuery ajax调用：

$(document).on('click','button#signbtn', function(){

        var $form = $('form#signform');
        var url = $form.attr('action');
        $.ajax({
               type: "POST",
               enctype: 'mutipart/form-data',
               url: url,
               data: $form.serialize(), // serializes the form's elements.
               success: function(data){// whatever you want your code to do on success}
             })

        return false; // avoid to execute the actual submit of the form.
    });

Answer 2

$(function() {

  $( '#signform' ).submit(function(e) {

    e.preventDefault();

     $.ajax({
       type: 'POST',
       url: $(this).attr( 'action' ),
       data: $(this).serialize(),
       success: function(result) {

         // Do something on success

       }

     });

  });

});

HTML / JQuery：Button根本不提交一次

2 个答案: