javascript - AJAX 表单提交 - 每次点击都会提交表单 i++ 次

Question

我遇到一个问题，第一次使用 AJAX 提交表单工作正常，但如果我再次单击提交按钮，或按 Enter 键，表单会提交两次。第三次单击会导致表单提交 3 次，依此类推。我尝试在 scripts.js 文件中插入 return false 和 preventDefault() 但无济于事。

可以找到我的表单的实现 here可以找到输出的结果列表 here

此外，我注意到 scripts.js 永远不会继续到 document.getElementById('test').innerHTML="this Works3";

任何帮助将不胜感激。谢谢!

index.html

<form id="form1" action="addpost.php" method="post">
    <div class="form-group" >
        <label for="title">Title:</label>
        <input name="title" type="title" class="form-control " id="title" placeholder="Enter title (Compulsory)" required>
        <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
    </div>
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="name" class="form-control" id="name">
        <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
    </div>
    <div class="form-group">
        <label for="article">Article:</label>
        <textarea name="article" class="form-control" rows="5" id="article"></textarea>
    </div>
    <div class="form-group">
        <label for="img1">Image 1:</label>
        <input type="file" class="form-control" id="img1" accept="image/*">
        <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
    </div>
    <label id="test">hi</label>
    <button class="btn btn-primary" onclick="poop()">Button</button>
    <input type="submit" class="btn btn-primary" onclick="poop()" value = "submit"/>
</form> 

scripts.js

function poop()
{
    document.getElementById('test').innerHTML="this works";
    var form = $('#form1');
    document.getElementById('test').innerHTML="this works2";
    form.submit(function (event) 
    {
        $.ajax
        ({
            type: form.attr('method'),
            url: form.attr('action'),
            data: form.serialize(),
            success: function (data) 
            {
                alert('ok');
            }
        });
    });
    document.getElementById('test').innerHTML="this works3";

}

Answer 1

感谢 Liam 和 Vinod 为我指明了正确的方向。我在index.html 文件中包含了覆盖提交函数的脚本。很好地解决了这个问题。

index.html

        <form id="form1" action="addpost.php" method="post">
            <div class="form-group" >
                <label for="title">Title:</label>
                <input name="title" type="title" class="form-control " id="title" placeholder="Enter title (Compulsory)" required>
                <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
            </div>
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="name" class="form-control" id="name">
                <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
            </div>
            <div class="form-group">
                <label for="article">Article:</label>
                <textarea name="article" class="form-control" rows="5" id="article"></textarea>
            </div>
            <div class="form-group">
                <label for="img1">Image 1:</label>
                <input type="file" class="form-control" id="img1" accept="image/*">
                <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span>
            </div>
            <label id="test">hi</label>
            <input type="submit" class="btn btn-primary" value = "submit"/>
        </form> 

// script included within body of html
<script type="text/javascript">
        var form = $('#form1');
        document.getElementById('test').innerHTML="this works2";
        form.submit(function (event) 
        {
            event.preventDefault();
            $.ajax
            ({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize(),
                success: function (data) 
                {
                    alert('ok');
                }
            });
        });
</script>