Question

我的联系表出现了问题。就在最近，一切都很好，但现在我无法发送消息。当我尝试提交表单时，我现在看到此错误：

未捕获的TypeError：无法构造'FormData'：参数1不是类型为“ HTMLFormElement”。在SubmitForm（ajax.js：77）在HTMLFormElement。（ajax.js：72）在HTMLFormElement.dispatch（jquery-3.3.1.js：5183）在HTMLFormElement.elemData.handle（jquery-3.3.1.js：4991）

$(document).ready(function() {
$("#subscribeForm").validator().on("submit", function (event) {
    if (event.isDefaultPrevented()) {
        formError();
        submitMSG(false, "Are you sure you filled form inputs correctly?");
    } else {
        event.preventDefault();
        submitForm();
    }
});
function submitForm(){
            var subscribe_email =$("input[name=subscribe_email]").val();
            var formData = new FormData($(this)[0]);
            formData.append('subscribe_email', subscribe_email );
            $.ajax({
                 url: "include/ajax/subscribe.php",
                 type: "POST",
                 contentType: false,
                 processData: false,
                 data: formData,
                 cache: false,
                 success : function(text){
             if (text == "success"){
                 formSuccess();
             } else {
                 formError();
                 submitMSG(false,text);
             }
         }
     });
 }
function formSuccess(){
    $("#subscribeForm")[0].reset();
    submitMSG("valid", "Your message was successfully sent");
}
function formError(){
  submitMSG("invalid", "Something went wrong. Please, try again or contact with our support team.");
}
function submitMSG(valid, msg){
    if(valid){
        var msgClasses = "cf-alert alert success";
    } else {
        var msgClasses = "cf-alert alert warning";
    }
    $("#success_submit").removeClass().addClass(msgClasses).text(msg);
}
});

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

怎么了？为什么突然中断了？谢谢大家。

Answer 1

该错误表明它很清楚。

未捕获到的TypeError：无法构造'FormData'：参数1不是'HTMLFormElement'类型的。在HTMLFormElement的SubmitForm（ajax.js：77）处。（ajax.js：72）在HTMLFormElement.dispatch（jquery-3.3.1.js：5183）在HTMLFormElement.elemData.handle（jquery-3.3.1.js：4991）

var formData = new FormData($(this)[0]); // $(this)[0] is not a form element 在您的代码中，$(this)[0]已绑定到全局对象（浏览器中的窗口）

您可以像这样传递对表单的引用：

$("#subscribeForm").on("submit", function (event) {
    event.preventDefault();
    submitForm(this);
});

function submitForm(myForm){
    const formData = new FormData(myForm);
    // or like this
    // const myForm = document.getElementById("subscribeForm");
    // const formData = new FormData(myForm);

}

在这种情况下，您可以在不使用任何参数的情况下调用FormData构造函数，因为您执行的是formData.append（）

const formData = new FormData();
formData.append("some_key", "some_value");

您可以了解有关formData here

的更多信息

Answer 2

您的行中存在错误：

//var formData = new FormData($(this)[0]);

解决方案很简单：

var formData = new FormData();

在此之后添加您想要的任何内容。

Answer 3

还有另一个具有与#subscribeForm形式相同的ID的元素

无法构建“ FormData”错误出现

3 个答案: