Something wrong is going on with my contact form. Just recently everything was fine but now I can't send the message. When I try to submit the form I see this error now:

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'. at submitForm (ajax.js:77) at HTMLFormElement. (ajax.js:72) at HTMLFormElement.dispatch (jquery-3.3.1.js:5183) at 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=".3.1/jquery.min.js"></script>

Something wrong is going on with my contact form. Just recently everything was fine but now I can't send the message. When I try to submit the form I see this error now:

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'. at submitForm (ajax.js:77) at HTMLFormElement. (ajax.js:72) at HTMLFormElement.dispatch (jquery-3.3.1.js:5183) at 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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

What's wrong and why did it suddenly break? Thanks so much in advance, folks.

• javascript
• ajax
• phpmailer

• 2 Try to log this inside submitForm. Should be window or undefined in strict-mode because you call this function without binding it anywhere, nor as being a method of anything (submitForm()). Now, try to guess what will be $(this)[0] here. – Kaiido Commented Aug 26, 2019 at 5:10
• Thanks, unfortunately that didn't help. The error now says: Uncaught SyntaxError: Unexpected token ( – Jamdev Commented Aug 26, 2019 at 5:24
• @Jamdev you were not offered a solution so it's not surprising that it didn't work. You were asked to do some debugging so you can figure out for yourself what the problem is – Phil Commented Aug 26, 2019 at 5:29
• 1 Within your .on('submit', ...) handler, this will refer to the <form> so how about passing that to your submitForm function, eg submitForm(this) and function submitForm(form) { ... } where you can use form instead of $(this)[0] – Phil Commented Aug 26, 2019 at 5:31
• @Phil thank you so much, friend. You are a genius! – Jamdev Commented Aug 26, 2019 at 6:31

3 Answers 3

The error states it pretty cleary.

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'. at submitForm (ajax.js:77) at HTMLFormElement. (ajax.js:72) at HTMLFormElement.dispatch (jquery-3.3.1.js:5183) at HTMLFormElement.elemData.handle (jquery-3.3.1.js:4991)

var formData = new FormData($(this)[0]); // $(this)[0] is not a form element In your code $(this)[0] is bound to the global object(window in a browser)

You could pass a reference to your form like this:

$("#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);

}

In your case you can call the FormData constructor without any parameters since your doing formData.append()

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

You can read more about formData here

The error is in your line:

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

The solution is simple:

var formData = new FormData();

after this append anything you want.

There is another element with same id as the form #subscribeForm