I have an html form, and already did the validation, after which the form is submitted.
I want to check if the form was submit successfully, in terms of the internet connection. Because right now, it will say success, even if there is no connection to the internet, in which case i won’t receive the form. I saw a lot of other questions regarding this topic, however they are all about validation, which i already handled.
Here’s the code, in case it matters:
<form name="kctform" action="http://nsa-us.com:5000/kfu" target="dummy" method="post" class="kct-form-javascript-link">
<div class="kform-ff">* Pflichtfelder</div>
<label for="name" class="name form-header-element kce">Ihr Name *</label>
<label for="name" class="name2 form-header-element bce">Vorname, Nachname *</label>
<input class="kform-input empty" name="name" id="name" type="text">
<label for="mail" class="mail form-header-element">E-Mail Addresse *</label>
<input class="kform-input" name="mail" id="mail" type="email">
<label for="phone" class="phone form-header-element bce">Telefon</label>
<input class="kform-input bce" name="phone" id="phone" type="text">
<label for="address" class="address form-header-element bce">Straße / Nummer *</label>
<input class="kform-input bce" name="address" id="address" type="text">
<label for="cityCode" class="cityCode form-header-element bce">Postleitzahl *</label>
<input class="kform-input bce" name="cityCode" id="cityCode" type="text">
<label for="about" class="about form-header-element kce">Betreff *</label>
<input class="kform-input kce" name="about" id="about" type="text">
<label for="main" class="main form-header-element kce">Ihre Nachricht *</label>
<label for="main" class="main2 form-header-element bce">Bewerbung *</label>
<textarea class="kform-input" name="main" id="main" type="text"></textarea>
<div for="datc" class="dataprot-checkbox-t">Ich stimme zu, dass meine Angaben aus dem Kontaktformular zur Beantwortung meiner Anfrage erhoben und verarbeitet werden. Sie können Ihre Einwilligung jederzeit für die Zukunft per E-Mail an [email protected] widerrufen. Detaillierte Informationen zum Umgang mit Nutzerdaten finden Sie in unserer <a href="../datenschutzerklärung">Datenschutzerklärung</a>.</div>
<div class="kform-c-div"><input class="kform-input kform-checkbox" name="datc" id="datc" type="checkbox">
<div class="checkDiv"><label for="datc" class="datc kform-checkbox-text">Ja, ich stimme zu. *</label><div class='echeckbox'>Checkbox ist ein Pflichtfeld!</div></div></div>
<button class="submitButton" type="submit">Senden</button>
</form>
<iframe name="dummy" id="dummy" style="display: none;"></iframe>
</div>
const kctForm = document.querySelector('.kct-form-javascript-link');
kctForm.addEventListener('submit', e => {
e.preventDefault();
const checkbox = document.querySelector('.kform-input#datc');
let sent = false;
let send = true;
if (f === 'ktf') {
const name = kctForm.elements[0].value;
const mail = kctForm.elements[1].value;
const about = kctForm.elements[5].value;
const main = kctForm.elements[6].value;
const nameC = document.querySelector('.name');
const mailC = document.querySelector('.mail');
const aboutC = document.querySelector('.about');
const mainC = document.querySelector('.main');
let formElement = [name, mail, about, main];
let formElementC = [nameC,mailC,aboutC,mainC];
const varIsEmpty = str => !str.replace(/s/g, '').length
for (let i = 0; i < formElement.length; i++) {
let formE = formElement[i];
let formC = formElementC[i];
if (varIsEmpty(formE)) {
formC.classList.add('empty');
send = false;
}
else {
formC.classList.remove('empty');
};
};
}
else if (f === 'bef') {
const name = kctForm.elements[0].value;
const mail = kctForm.elements[1].value;
//const phone = kctForm.elements[2].value;
const address = kctForm.elements[3].value;
const cityCode = kctForm.elements[4].value;
const main = kctForm.elements[6].value;
const nameC = document.querySelector('.name2');
const mailC = document.querySelector('.mail');
//const phoneC = document.querySelector('.phone');
const addressC = document.querySelector('.address');
const cityCodeC = document.querySelector('.cityCode');
const mainC = document.querySelector('.main2');
let formElement = [name, mail, /*phone, */address, cityCode, main];
//let formElementT = ['name', 'mail', /*'phone',*/'address', 'cityCode', 'main'];
let formElementC = [nameC,mailC,/*phoneC,*/addressC,cityCodeC,mainC];
const varIsEmpty = str => !str.replace(/s/g, '').length;
for (let i = 0; i < formElement.length; i++) {
let formE = formElement[i];
let formC = formElementC[i];
if (varIsEmpty(formE)) {
formC.classList.add('empty');
send = false;
}
else {
formC.classList.remove('empty');
};
};
};
function checkboxF() {
if (!checkbox.checked || window.innerWidth <= 511 && send === false) {
document.querySelector('.echeckbox').classList.add('active');
document.querySelector('.kform-c-div').classList.add('active');
}
else if (checkbox.checked && !window.innerWidth <= 511) {
document.querySelector('.echeckbox').classList.remove('active');
document.querySelector('.kform-c-div').classList.remove('active');
};
if (!checkbox.checked) {
send = false;
};
};
function changeEmptyWarningsBasedOnWidth() {
if (window.innerWidth <= 511) {
document.querySelector('.echeckbox').innerHTML = 'Pflichtfelder wurden nicht ausgefüllt!';
}
else {
document.querySelector('.echeckbox').innerHTML = 'Checkbox ist ein Pflichtfeld!';
};
};
checkboxF();
changeEmptyWarningsBasedOnWidth();
window.addEventListener('resize', changeEmptyWarningsBasedOnWidth, false);
window.addEventListener('resize', checkboxF, false);
if (send === true && sent === false) {
e.submit();
const submitButton = document.querySelector('.kform-div form .submitButton');
submitButton.classList.add('success');
submitButton.innerHTML = 'Gesendet!';
sent = true;
setTimeout(() => {
document.kctform.reset();
},2000);
setTimeout(() => {
submitButton.classList.remove('success');
submitButton.innerHTML = 'Senden';
sent = false;
},10000);
};