如何检查表单是否已使用 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":"[e-mail]","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

布尔变量怎么样？&nbsp; &nbsp; // outer scope&nbsp; &nbsp; let hasSubmitted = false;&nbsp; &nbsp; //...&nbsp; &nbsp; form.submit(function(e) {&nbsp; &nbsp; if(hasSubmitted)return;&nbsp; &nbsp; hasSubmitted = true;&nbsp; &nbsp; //...或者：const submitButton = $("#submit-button")form.submit(function(e) {&nbsp; &nbsp; submitButton.disabled = true;

Answer 2

您可以在发送表单后立即删除submit事件处理程序，因此不会再次发送表单。根据您使用的 jQuery 版本，您可以使用$form.submit(false);或者：$form.off('submit');$form.on('submit', (e) => e.preventDefault());另一种选择是禁用提交按钮和可选的输入字段：const $form = $('#form');const $message = $('#message');const $submit = $('#submit');$form.submit((e) => {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Option 1: Remove submit event handler:&nbsp; &nbsp; $form.off('submit');&nbsp; &nbsp; $form.on('submit', (e) => e.preventDefault());&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Option 2: Disable the submit button:&nbsp; &nbsp; $submit.prop('disabled', true);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Disable all input fields (optional):&nbsp; &nbsp; $form.find('input, textarea').prop('disabled', true);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Add feedback message:&nbsp; &nbsp; $message.text('Sending message...');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Simulate request:&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; // Update feedback message:&nbsp; &nbsp; &nbsp; $message.text('The message was sent successfully!');&nbsp; &nbsp; }, 2000)});body {&nbsp; font-family: monospace;&nbsp; font-size: 16px;&nbsp; margin: 0;}#form {&nbsp; width: 50vw;&nbsp; margin: 0 auto;}input,textarea,button {&nbsp; display: block;&nbsp; width: 100%;&nbsp; padding: 8px;&nbsp; margin-top: 8px;&nbsp; box-sizing: border-box;&nbsp; border: 2px solid black;&nbsp; background: transparent;&nbsp; font-family: monospace;&nbsp; font-size: 16px;}#message {&nbsp; margin-top: 8px;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form id="form">&nbsp; <input type="text" placeholder="Subject" />&nbsp; <textarea placeholder="Message"></textarea>&nbsp;&nbsp;&nbsp; <div id="message"></div>&nbsp;&nbsp;&nbsp; <button type="submit" id="submit">Send</button></form>