Why does my form only submit on the second click?

Why isn’t the form submitted the first time?
What have I done wrong?

If I click submit, the console will display the output (Event check # 0. Event check # 1.)
If I click on the submit button again, the console will display the output (Event check # 0. Event check # 1. Event check # 2.)
And after that the message will be sent to the mail.

enter image description here

".button-f" and "# send-btn-form" are the same button!

//#1grn --- Submitting the form without reloading the page
let sendBtn = document.querySelector(".button-f");
sendBtn.onclick = function(e) {
    e.preventDefault(); // Cancels the default browser action
    console.log("Event check №0.");

    let formName = document.querySelector('#main-form'); // Find our shape
    let formData = new FormData(formName); // Create a new FormData-object. We use all fields with the attribute name
    let request = new XMLHttpRequest(); // Create a new XMLHttpRequest-object.
    request.open('POST', "php/send.php"); // We configure it: POST-request for URL php/send.php

    //#1grn --- Filtering characters such as: &<>"'
    ['name', 'socialname', 'numberfo', 'email', 'text'].forEach(name => {
        let input = document.querySelector(`[name='${name}']`);
        input.value = escape(input.value);
        console.log("Event check №1.");
    });

    //#1grn --- Check ("real" event or generated by code)
    let sendBttn = document.querySelector("#send-btn-form");
    sendBttn.addEventListener('click', e => { // We accept the event object into our callback-function, call it "e".
        if (e.isTrusted) { // CHECKING, if a e.isTrusted === true - then this is not a machine click.
            request.send(formData); // We send HTTP request to the server and get a response.
            console.log("Event check №2.");
        } else {
            console.log('blocked!');
        }
    });

    // This code will work after we receive the server response
    request.onload = function() {
        if (request.status != 200) { // analyze HTTP-response status, if the status is not 200, then an error has occurred
        } else { // if everything went smoothly, clear the form and display the result
            formName.reset(formData); // Clearing the form
            let on = document.querySelector(".message-good");
            on.classList.add('ms-on');
        }
    };
};

14 thoughts on “Why does my form only submit on the second click?”

Leave a Comment