I have a website https://studiodvekalinki.netlify.app/
My register form work but do not show success message/alert. I tried adding a with the status that should change display=“block” or “none”, tried alert after the fetch, but no luck. So people dont know that they are registered
My HTML Preformatted textcode for the form is:
<form name="register-form" class="register-form" method="post" netlify action="/">
<div class="form-field">
<label for="name-parent">Име родител:</label>
<input class="form-input-field" type="text" name="name-parent" id="name-parent" required="true">
</div>
<div class="form-field">
<label for="email">Имейл адрес:</label>
<input class="form-input-field" type="email" name="email" id="email" required="true">
</div>
<div class="form-field">
<label for="phone">Телефонен номер:</label>
<input class="form-input-field" type="text" name="phone" id="phone" required="true">
</div>
<div class="form-field">
<label for="activity">Желая да регистрирам детето/децата си в: </label>
<select name="activity" id="activity" onchange="onSelect()">
<option value="Dve-Kalinki-spring">Клуб "Две Калинки" - пролетен срок</option>
<option value="Dve-Kalinki-1-visit">Клуб "Две Калинки" - еднократно посещение</option>
<option value="fika">Фика</option>
</select>
</div>
<div class="form-field " id="date-field">
<label for="date">Дата за еднократно посещение: </label>
<input class="form-input-field" type="text" name="date" id="date" value=" ">
</div>
<div class="form-field">
<label for="kids">Моля напишете името/имената и възрастта на детето/децата:</label>
<textarea name="kids" id="kids" cols="30" rows="5"></textarea>
</div>
<button class="btn" id="registerBtn" type="submit">Регистрация</button>
<p class="formStatus"></p>
</form>
My JavaScript code:
const onRegister = (event) => {
event.preventDefault();
const myForm = event.target;
const formData = new FormData(myForm);
console.log(formData);
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(formData).toString(),
})
.then(() => alert("Thank you for your submission"))
.then(myForm.reset())
.catch((error) => alert(error));
};
document
.querySelector("form")
.addEventListener("submit", onRegister);
