如何检查表单是否已使用 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

布尔变量怎么样？

    // 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;

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) => {

    e.preventDefault();

    

    // Option 1: Remove submit event handler:

    $form.off('submit');

    $form.on('submit', (e) => e.preventDefault());

    

    // Option 2: Disable the submit button:

    $submit.prop('disabled', true);

    

    // Disable all input fields (optional):

    $form.find('input, textarea').prop('disabled', true);    

    

    // Add feedback message:

    $message.text('Sending message...');

    

    // Simulate request:

    setTimeout(() => {

      // Update feedback message:

      $message.text('The message was sent successfully!');

    }, 2000)

});

body {

  font-family: monospace;

  font-size: 16px;

  margin: 0;

}

#form {

  width: 50vw;

  margin: 0 auto;

}

input,

textarea,

button {

  display: block;

  width: 100%;

  padding: 8px;

  margin-top: 8px;

  box-sizing: border-box;

  border: 2px solid black;

  background: transparent;

  font-family: monospace;

  font-size: 16px;

}

#message {

  margin-top: 8px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form">

  <input type="text" placeholder="Subject" />

  <textarea placeholder="Message"></textarea>

  

  <div id="message"></div>

  

  <button type="submit" id="submit">Send</button>

</form>