Question

我有一个问题，我在第一次使用AJAX提交表单时工作正常，但是如果我再次单击提交按钮，或按回车键，表单会提交两次。第三次单击会导致表单提交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文件中的submit函数。很好地解决了这个问题。

<强>的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>

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

1 个答案: