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

Answer 2

我真的不明白为什么您要在文档加载时运行脚本。我建议您将脚本的源代码包含在html中，并在button元素中包含onClick属性，然后将事件处理函数调用分配给该脚本，以便每次单击“提交”按钮时将其触发。

<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

AJAX表单仅允许一个提交？

2 个答案: