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

标签 javascript php jquery ajax

表单是 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">

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

最佳答案

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;

关于javascript - 如何使用 javascript 和 ajax 检查表单是否已提交以避免多次发送同一表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59584081/

相关文章:

javascript - 如何动态获取对象的嵌套属性?

javascript - 为什么在调用 event.preventDefault() 后用 JavaScript 切换复选框/单选按钮失败?

javascript - 如何计算javascript中字符串开头的连字符数?

php - mpdf addPage 创建空白页

javascript - 理解关于启动 jQuery 的一句话

javascript - 单击具有 onclick javascript 属性的 href 按钮

javascript - ajax请求后页面刷新

php - 查询多个数据库表的数据到表单表中(MYSQL,PHP)

javascript - 来自 CSS ID 的百分比变量

javascript - 有没有办法保存以前的 html 页面并在重新加载时将其加载到当前页面?