javascript - 如何使用 javascript 和 ajax 检查表单是否已提交以避免多次发送同一表单

Question

表单是 javascript 或 jquery 中非常有趣的元素(在本例中)。

这是我的问题:

JS:

const themeFolder = object_name.templateUrl;
const urlAjax = themeFolder + '/FormHandler.php';
const form = $('#contact-form');
const outputmessage = $('.output-message');

form.submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: urlAjax,
        method: form.attr('method'),
        data: form.serialize() + '&submit=true',
        success: function (result) {
            console.log(result);
            outputmessage.append('<p>A message was sent successfully!</p>');
        }
    });
});

PHP:

if ($ok == true && isset($_POST['submit']) && empty( $honeypot )) {
    $json_tidy = json_encode($_POST);
    echo $json_tidy;
} else {
    echo 'something wrong';
}

现在，我没有得到的是，我可以使用相同的值多次发送相同的表单，但我没有找到仅发送一次表单并在完成后立即禁用该表单的解决方案.

可能是我想太多了，但是例如，json_tidy 会发布这个结果:

{"fname":"ma","lname":"ma","email":"ciao@ma.com","message":"ciao","honeypot":"","submit":"true"}</body>

这对我来说没有多大意义。

另外，在这种情况下，我正在努力寻找一个值来识别我将发送表单的次数的计数器。

我可以在 form.submit(function(e) {} 之后和 javascript 的 and 处使用 return true 和 false，但它只会避免我的 js 脚本运行并触发 php 脚本，这以我的形式:

<form id="contact-form" name="contact-form" action="{{ theme.link }}/FormHandler.php" method="POST">

我想知道过去是否有人遇到过同样的问题

Answer 1

bool 变量怎么样？

    // outer scope
    let hasSubmitted = false;
    //...
    form.submit(function(e) {
    if(hasSubmitted)return;
    hasSubmitted = true;
    //...

或者:

const submitButton = $("#submit-button")

form.submit(function(e) {
    submitButton.disabled = true;