Basic HTML Form With JS Fetch Submit Sample Code

<form id="htmlForm1" action="https://www.imnobby.com/" method="POST">
 <div class="mb-3">
 <label for="formName" class="form-label">Name</label>
 <input type="text" class="form-control" name="Name" id="formName" placeholder="" required>
 </div>
 <div class="mb-3">
 <label for="formEmail" class="form-label">Email address</label>
 <input type="email" class="form-control" name="Email" id="formEmail" placeholder="" required>
 </div>
 <div class="mb-3">
 <label for="formMessage" class="form-label">Message</label>
 <textarea class="form-control" name="Message" id="formMessage" rows="5"></textarea>
 </div>
 <div class="mb-3 text-end">
 <button type="submit" class="btn btn-primary mt-1 w-100">Submit <span class="processing-text"></span>
 </button>
 </div>
</form>
<div id="htmlForm1Success" class="border border-3 border-success px-3 py-2 d-none">
 <div>{{ Success Text }}</div>
</div>
<div id="htmlForm1Fail" class="border border-3 border-danger px-3 py-2 d-none">
 <div>{{ Fail Text }}</div>
</div>

<script>
 function htmlFormSubmit(event) {

 event.preventDefault();

 var processingText = document.getElementById("htmlForm1").getElementsByClassName("processing-text")[0].innerHTML = " Processing..";

 const form = event.currentTarget;
 const url = form.action;

 const formData = new FormData(form);
 const plainFormData = Object.fromEntries(formData.entries());
 const formDataJsonString = JSON.stringify(plainFormData);

 const fetchOptions = {
 method: "POST",
 body: formDataJsonString,
 cache: "no-cache",
 };

 fetch(url, fetchOptions)
 .then(response => response.json())
 .then(html => {

 if (html) {

 tmphtml = "";

 if (html.success) {

 document.getElementById("htmlForm1").style.display = "none";
 document.getElementById("htmlForm1Success").style.setProperty("display", "block", "important");

 } else {

 document.getElementById("htmlForm1Fail").style.setProperty("display", "block", "important");
 processingText.innerHTML = "";

 }

 }

 })
 .catch((err) => console.log("Cannot access " + url + " response. Blocked by browser?" + err));

 }

 const htmlForm1 = document.getElementById("htmlForm1");
 htmlForm1.addEventListener("submit", htmlFormSubmit);
<script>