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');
        }
    };
};

1 thought on “Why does my form only submit on the second click?”

  1. If ".button-f" and "#send-btn-form" are the same button, you are adding an event listener every time you click the button. In that case, you are not executing the code inside that listener, it will be executed the next time you click it. So you could replace this

    let sendBttn = document.querySelector("#send-btn-form");
    sendBttn.addEventListener('click', e => {
        if (e.isTrusted) {
            request.send(formData);
        } else {
            console.log('blocked!');
        }
    });
    

    with just this

    if (e.isTrusted) {
        request.send(formData);
    } else {
        console.log('blocked!');
    }
    
    Reply

Leave a Comment