Simple Ajax form submit w/ jquery

by davehol

HTML

<!-- FORM: HEAD SECTION -->



<link href="https://rmit.tfaforms.net/dist/form-builder/5.0.0/wforms-layout.css?v=287e029b36841a1937f90a5af2003826ed9e9b75" rel="stylesheet" type="text/css" />

<link href="https://rmit.tfaforms.net/uploads/themes/theme-74.css" rel="stylesheet" type="text/css" />
<link href="https://rmit.tfaforms.net/dist/form-builder/5.0.0/wforms-jsonly.css?v=287e029b36841a1937f90a5af2003826ed9e9b75" rel="alternate stylesheet" title="This stylesheet activated by javascript" type="text/css" />
<script type="text/javascript" src="https://rmit.tfaforms.net/wForms/3.11/js/wforms.js?v=287e029b36841a1937f90a5af2003826ed9e9b75"></script>
<script type="text/javascript">
  wFORMS.behaviors.prefill.skip = false;

</script>
<script type="text/javascript" src="https://rmit.tfaforms.net/wForms/3.11/js/localization-en_GB.js?v=287e029b36841a1937f90a5af2003826ed9e9b75"></script>

<!-- FORM: BODY SECTION -->
<div class="wFormContainer">
  <div class="wFormHeader"></div>
  <style type="text/css"></style>
  <div class="">
    <div class="wForm" id="2511-WRPR" dir="ltr">
      <div class="codesection" id="code-2511"></div>
      <h3 class="wFormTitle" id="2511-T">Edit Form Title</h3>
      <form method="post" action="https://rmit.tfaforms.net/responses/processor" class="hintsBelow labelsAbove" id="2511" role="form">
        <div class="oneField field-container-D    " id="tfa_1-D">
          <label id="tfa_1-L" class="label preField " for="tfa_1">Name</label><br>
          <div class="inputWrapper"><input type="text" id="tfa_1" name="tfa_1" value="" title="Name" class=""></div>
        </div>
        <div class="actions" id="2511-A"><input type="submit" data-label="Submit" class="primaryAction" id="submit_button" value="Submit"></div>
        <div style="clear:both"></div>
        <input type="hidden" value="2511" name="tfa_dbFormId" id="tfa_dbFormId"><input type="hidden" value="" name="tfa_dbResponseId" id="tfa_dbResponseId"><input type="hidden"...

JavaScript

document.addEventListener('submit', e => {
   
  // Store reference to form to make later code easier to read
  const form = e.target;

  // Post data using the Fetch API
  fetch(form.action, {
      method: form.method,
      body: new FormData(form)
    })
    // We turn the response into text as we expect HTML
    .then(res => res.text())

    // Let's turn it into an HTML document
    .then(text => new DOMParser().parseFromString(text, 'text/html'))

    // Now we have a document to work with let's replace the <form>
    .then(doc => {

      // Create result message container and copy HTML from doc
      const result = document.createElement('div');
      result.innerHTML = doc.body.innerHTML;

      // Allow focussing this element with JavaScript
      result.tabIndex = -1;

      // And replace the form with the response children
      form.parentNode.replaceChild(result, form);

      // Move focus to the status message
      result.focus();

    })
    .catch(err => {

      // Some form of connection failure
    //  form.querySelector('[role=alert]').hidden = false;

    });

  // Make sure connection failure message is hidden
 // form.querySelector('[role=alert]').hidden = true;

  // Prevent the default form submit
  e.preventDefault();

});