Question

我下载了工作联系表单，并添加了一些我需要的东西，但现在我还有另一个问题，我不知道如何修复。

提交表单后，仍然可以点击该按钮几次，这将向我发送多封邮件。表单提交后，应该禁用该按钮。

HTML：

static Long toLong(Object object) {
    if (object == null) {
        return null;
    }
    if (object instanceof Number) {
        return ((Number) object).longValue();
    }
    return new Double(Double.parseDouble(object.toString().trim())).longValue();
}

这是JavaScript：

<button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>

Answer 1

禁用表单提交上的按钮，如下所示：

$("#contactForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        // handle the invalid form...
        formError();
        submitMSG(false, "Did you fill in the form properly?");
    } else {
        // everything looks good!
        event.preventDefault();
        $("#form-submit").prop("disabled",true);
        submitForm();
    }
});

Answer 2

根据您的完整架构，可以在此处完成多项任务。您可以使用jQuery的one函数，虽然我不推荐它，因为这意味着在您加载页面之前，联系表单只能提交一次。

我所做的是，我会停用按钮，$("#form-submit").attr("disabled","disabled"); 要么 $("#form-submit").addClass("inactive")并在您的CSS中使用

#form-submit{
    pointer-events:none;
    opacity:0.6;
    /*etc etc*/
}

当您的ajax返回时，只需执行相反的操作（删除已禁用的属性或类）。另外，将input，textarea值设置为空字符串。

Answer 3

const $contactForm=document.getElementById("contactForm");
const $submitButton=$contactForm.getElementById("form-submit");
$contactForm.addEventListener("submit",e => {
e.preventDefault();
$submitButton.setAttribute("disabled","disabled") }) //first is attribute, second is value, disabled

JavaScript很简单，请保持简单。

联系表单，点击后禁用提交按钮

3 个答案: