Как проверить успешность отправки HTML-формы ⇐ Html

[Anonymous]

РЕДАКТИРОВАТЬ:
Я прошу прощения за то, что не предоставил сразу полный код, я просто добавил все необходимое.
У меня есть html-форма, и я уже сделал все необходимое. проверка, после которой форма отправляется.
Я хочу проверить, была ли форма отправлена ​​успешно с точки зрения подключения к Интернету. Потому что прямо сейчас он сообщит об успехе, даже если нет подключения к Интернету, и в этом случае я не получу форму. Я видел много других вопросов по этой теме, однако все они касаются проверки, с которой я уже разобрался.
Вот код

Код: Выделить всё

const kfh = document.querySelector('.kform-div .h');
const kfd = document.querySelector('.kform-div');
var f = 'ktf';
var notH = false;
let SM = false;
var b = false;
var dropdownInterval = false;
function htop() {
const h = document.querySelector('.kform-div .span1');
const s3 = document.querySelector('.kform-div .span3');
hHeight = h.offsetHeight;
s3.style.height = `${hHeight}px`;
}
function showSM() {
kfd.classList.add('active');
const hf = document.querySelector('.kform-div .hf');
const h = document.querySelector('.kform-div .span1');
const s2 = document.querySelector('.kform-div .h .span2');
s2.classList.add('active');
hHeight = h.offsetHeight;
htop()
hf.style.transform = `none`;
setTimeout(() => {
hf.style.transform = `translateY(${hHeight + 10}px)`;
},50)
};
function hideSM() {
const hf = document.querySelector('.kform-div .hf');
const h = document.querySelector('.kform-div .span1');
const s2 = document.querySelector('.kform-div .h .span2');
s2.classList.remove('active');
hHeight = h.offsetHeight;
htop()
hf.style.transform = `none`;
setTimeout(() => {
kfd.classList.remove('active');
},300);
}
function ktf() {
SM = false;
f = 'ktf';
removeEL();
hideSM();
const formClass = document.querySelector('.kform-div .kct');
formClass.classList.remove('bct');
setTimeout(() => {
kfh.innerHTML = 'Kontaktformular &#10094Bewerbungsformular';
addEL();
},330);
};
function bef() {
SM = false;
f = 'bef';
removeEL();
hideSM();
const formClass = document.querySelector('.kform-div .kct');
formClass.classList.add('bct');
setTimeout(() =>  {
kfh.innerHTML = 'Bewerbungsformular &#10094Kontaktformular';
addEL();
},330);
};
function toggleSM() {
if (SM === true) {
hideSM();
SM = false;
}else{
showSM();
SM = true;
};
};
function addEL() {
const kfs = document.querySelector('.kform-div .h span');
const kformBef = document.querySelector('.kform-bef');
const kformKtf = document.querySelector('.kform-ktf');
if (kfs !== null){kfs.addEventListener('click', toggleSM, false);};
if (kformBef !== null){kformBef.addEventListener('click', bef, false);};
if (kformKtf !== null){kformKtf.addEventListener('click', ktf, false);};
};
function removeEL() {
const kfs = document.querySelector('.kform-div .h span');
const kformBef = document.querySelector('.kform-bef');
const kformKtf = document.querySelector('.kform-ktf');
if (kfs !== null){kfs.removeEventListener('click', toggleSM, false);};
if (kformBef !== null){kformBef.removeEventListener('click', bef, false);};
if (kformKtf !== null){kformKtf.removeEventListener('click', ktf, false);};
};
function refreshEL() {
removeEL();
addEL();
};
function getBef() {
const urlParams = new URLSearchParams(window.location.search);
b = urlParams.get('b');
if (b === 'true') {
f = 'bef';
SM = false;
removeEL();
hideSM();
kfh.innerHTML = 'Bewerbungsformular &#10094Kontaktformular';
addEL();
const formClass = document.querySelector('.kform-div .kct');
formClass.classList.add('bct');
}
};
function ktcFormSubmit() {
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  {
ktf();
setTimeout(() => {
showSM();
setTimeout(() => {
bef();
}, 370);
}, 370);
}, 370);
dropdownInterval = setInterval(() => {
showSM();
setTimeout(() => {
ktf();
setTimeout(() => {
showSM();
setTimeout(() =>  {
bef();
}, 370);
}, 370);
}, 370);
}, 1480);
};
function stopDropdown() {
if (dropdownInterval !== false) {
clearInterval(dropdownInterval);
};
};
addEL();
htop();
getBef();
ktcFormSubmit();

Код: Выделить всё

.kform-div {
display: flex;
flex-direction: column;
--font-size: calc(var(--s3) * 1.0);
font-size: var(--font-size);
padding: var(--r7) calc(22vw - 44px) 0 calc(22vw - 44px);
color: var(--main);
--line-height: calc(var(--font-size) * 1.5);
--padding: 17px;
--kgb: #eee;
}
.kform-div .h .span1 {
padding: var(--padding);
z-index: 10;
position: absolute;
display: flex;
flex-direction: row;
background-color: var(--kgb);
border-radius: 5px;
top: 0;
font-size: calc(var(--s3) * 0.8);
}
.kform-div .h .span2 {
margin-left: 10px;
display: inline-block;
transform: rotate(-90deg);
transition: transform 0.4s ease;
}
.kform-div .h .span2.active {
transform: rotate(-270deg) translateX(-1px);
}
.kform-div .h .span3 {
width: 100vw;
background-color: #fff;
display: block;
position: absolute;
left: calc(calc(22vw - 44px)* -1);
top: 0;
z-index: 2;
cursor: default;
}
body.dark .kform-div .h .span3 {
background-color: #111;
}
.kform-div .h {
padding: var(--padding) 0;
width: fit-content;
cursor: pointer;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
background-color: var(--kgb);
border-radius: 5px;
}
.kmarg {
height: var(--r7);
}
.kform-div .hf {
top: 0;
display: flex;
flex-direction: column;
position: absolute;
left: 0;
transition: transform 0.3s ease;
z-index: 1;
}
.kform-bef,.kform-ktf {
padding: var(--padding);
background-color: var(--kgb);
border-radius: 5px;
font-size: calc(var(--s3) * 0.8);
}
.kform-div .kform-ktf,.kform-div .kform-bef {
display: none;
}
.kform-div.active .kform-ktf,.kform-div.active .kform-bef {
display: block;
}
.kform-div .kct form {
margin: var(--r8) 0 0 0;
}
.kform-div .form-header-element {
font-size: var(--s3);
font-weight: 400;
margin: var(--r5) 0 0 0;
display: block;
}
.kform-div .dataprot-checkbox-h span {
margin-top: var(--r5);
font-size: var(--s3);
margin-bottom: calc(-1 * var(--r1));
display: block;
}
.kform-div .dataprot-checkbox-t {
font-size: var(--s2);
margin: 0 0 0 0;
display: block;
color: var(--sec);
}
.kform-div .dataprot-checkbox-t a {
color: var(--main);
font-weight: 500;
}
.kform-checkbox-text {
margin: 0 0 0 var(--r2);
font-size: calc(var(--s2) * 1.2);
}
.kform-c-div {
display: flex;
flex-direction: row;
margin: var(--r3) 0 var(--r3) 0;
align-items: center;
justify-content: left;
}
.kform-input {
background-color: #fff;
border: 1px solid #666;
border-radius: 5px;
padding: var(--kfipadding);
font-size: calc(1.2 * var(--s2));
margin: var(--r3) 0 var(--r2) 0;
width: calc(100% - calc(var(--kfipadding) * 2));
}
.kform-checkbox#datc {
margin: 0 0 0 0;
display: block;
width: fit-content;
padding: 2px;
}
.kform-div {
--kfipadding: 7px;
}
.kform-div .kct textarea {
font-size: calc(1.2 * var(--s2));
font-family: inherit !important;
resize: vertical;
height: 270px;
}
.kform-div form .submitButton {
font-family: inherit !important;
font-size: calc(var(--s2)* 1.2);
font-weight: 500 !important;
margin: var(--r2) 0 0 0;
border: 1px solid var(--red);
padding: 9px 33px;
color: white;
background-color: var(--red);
transition:  0.3s;
cursor: pointer;
border-radius: 5px;
}
.kform-div form .submitButton:hover {
background-color: #a8111b;
}
.kform-div form .submitButton.success {
--sbcolor: rgb(20, 182, 20);
background-color: var(--sbcolor);
border-color: var(--sbcolor);
cursor: default;
}
kform-div form .submitButton.success:hover {
background-color: var(--sbcolor);
}
.kform-div .kct form .bce {
display: none;
}
.kform-div .kct.bct form .bce {
display: block;
}
.kform-div .kct.bct form .kce {
display: none;
}
.kform-ff {
font-size: var(--s2);
}
@media (min-width: 512px) {
.empty {
position: relative;
}
.empty::after {
content: "Feld ist ein Pflichtfeld!";
font-size: var(--s2);
color: var(--red);
text-align: right;
position: absolute;
top: 8px;
right: 0;
}
}
.echeckbox {
display: none
}
.checkDiv {
position: relative;
}
.echeckbox.active {
position: absolute;
display: block;
font-size: var(--s2);
color: var(--red);
text-align: left;
white-space: nowrap;
left: -10px;
top: 30px;
}
.kform-c-div.active {
margin: 12px 0 25px 0;
}
body.dark .kform-input {
background-color: #090909;
color: #fff;
}
body.dark .kform-div {
--kgb: #222;
}
:root {
--footer-color: #eee;
--header-bg: #e9e9e980;
--br: 7px;
--background-color: white;
--r1: 4px;
--r2: calc(var(--r1) * 2);
--r3: calc(var(--r1) * 3);
--r4: calc(var(--r1) * 4);
--r5: calc(var(--r1) * 5);
--r6: calc(var(--r1) * 7);
--r7: calc(var(--r1) * 10);
--r8: calc(var(--r1) * 15);
--r9: calc(var(--r1) * 25);
--r10: calc(var(--r1) * 40);
--r11: calc(var(--r1) * 60);
--base-size: 9px;
--scale-factor: 1.6180339887;
--s1: calc(var(--base-size) * 1);
--s2: calc(var(--s1) * var(--scale-factor));
--s3: calc(var(--s2) * var(--scale-factor));
--s4: calc(var(--s3) * var(--scale-factor));
--s5: calc(var(--s4) * var(--scale-factor));
--s6: calc(var(--s5) * var(--scale-factor));
--s7: calc(var(--s6) * var(--scale-factor));
--s8: calc(var(--s7) * var(--scale-factor));
}
button {
border: unset;
border-radius: unset;
padding: unset;
margin: unset;
}
body{
--red: #e30613;
--main-bg: #fff;
--main: #000;
--sec: #222;
margin: 0;
font-family: "Roboto", sans-serif;
font-size: var(--s3);
background-color: var(--background-color);
width: 100%;
height: 100%;
overflow-x: hidden;
}
body.dark {
/*--red: #f80011;*/
--main-bg: #000;
--main: #fff;
--sec: #ddd;
}
body.dark {
background-color: #000;
}
body.dark .content {
background-color:  #111;
}

Код: Выделить всё

    




Kontaktformular &#10094

Bewerbungsformular




* Pflichtfelder
Ihr Name *
Vorname, Nachname *

E-Mail Addresse *

Telefon

Straße / Nummer *

Postleitzahl *

Betreff *

Ihre Nachricht *
Bewerbung *

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 [url=../datenschutzerklärung]Datenschutzerklärung[/url].

Ja, ich stimme zu. *Checkbox ist ein Pflichtfeld!
Senden

Подробнее здесь: https://stackoverflow.com/questions/793 ... successful