javascript - AJAX表单只允许一次提交？

Question

我正在创建一个将通过使用 jQuery AJAX 提交的表单，但由于某种原因我只能提交该表单一次。要再次提交我必须刷新页面吗？

我如何完成表单和脚本，这样我就不必刷新？

表格如下:

<form role="form" class="form-horizontal validate" name="create_form" id="create_form">

<div class="form-group">
    <label class="col-sm-2 control-label" for="name">Name</label>

    <div class="col-sm-10">
        <input type="text" class="form-control" id="name" name="name" data-validate="required" data-message-required="Remeber to fill name" placeholder="">
    </div>
</div>

<div class="form-group-separator"></div>

<div class="form-group">
    <button id="submit_btn" class="btn btn-success">Create</button>
    <button type="reset" class="btn btn-white">Reset</button>
</div>

</form>

这是 AJAX 部分:

$(document).ready(function(){

    $("#submit_btn").on("click", function () {

        $.ajax({
            type: 'POST',
            url: 'data/create.php',
            cache: false,
            data: $('#create_form').serialize() 
        })
        .done(function(data){ 
            $("#name").val("");
        })
        .fail(function() { 

            console.log("ERROR");

        });

        // Prevent refreshing the whole page page
        return false;

    });
});

希望得到帮助并提前致谢:-)

Answer 1

使用提交而不是点击。

$('#submit_btn').on('submit', function(e) {
    e.preventDefault();
    ... //rest of the code
});