HTML & Javascript Form doesn't submit on smaller screens-ThrowExceptions

Exception or error:

I have an HTML form which is submitted via JavaScript function. It works as expected when submitting on full-screen windows, however, when submitting in a smaller window, such as a smartphone or simply a minimized window on a computer, it doesn’t do anything other than quitting the form.

I tried checking by adding a console log when clicking, but nothing is logged when browsing from a smaller display. Below is the code that make up the form.

HTML

<form id="volunteer-form">
  <div class="firstNameTF">
    <label>First Name</label>
    <div>
      <input type="text" id="First Name" name="First Name" placeholder="Your first name"/>
    </div>
  </div>
  <br>
  <div class="lastNameTF">
    <label>Last Name</label>
    <div>
      <input type="text" id="Last Name" name="Last Name" placeholder="Your last name"/>
    </div>
  </div>
  <br>
  <div class="facultyTF">
    <label>Faculty</label>
    <div>
      <input type="text" id="Faculty" name="Faculty" placeholder="Your faculty"/>
    </div>
  </div>
  <br>
  <div class="YearDropdown">
    <label>Year</label>
    <div>
      <select id="Year" name="Year">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
        <option value="Postgraduate">Postgraduate</option>
        <option value="Other">Other</option>
      </select>
    </div>
  </div>
  <br>
  <div class="AffiliationTF">
    <label>Affiliation</label>
    <div>
      <input type="text" id="Campus Affiliation" name="Campus Affiliation" placeholder="Your student affiliation/involvement"/>
    </div>
  </div>
  <div class="EmailTF">
    <label>E-mail Address</label>
    <div>
      <input type="text" id="Email Address" name="Email Address" placeholder="Your e-mail address"/>
    </div>
  </div>
  <br>
  <div>
    <button type="submit"id="submit-form">Submit</button>
  </div>
</form>

JavaScript

// Check if text fields are complete
$('#submit-form').on('click', function (e) {
  console.log("clicked subimt");
  e.preventDefault();
  var empt = document.forms["volunteer-form"]["First Name"].value;
  var empt1 = document.forms["volunteer-form"]["Last Name"].value;
  var empt2 = document.forms["volunteer-form"]["Faculty"].value;
  var empt3 = document.forms["volunteer-form"]["Campus Affiliation"].value;
  var empt4 = document.forms["volunteer-form"]["Email Address"].value;
  var c = 0;
  var close = document.getElementsByClassName("closebtn");
  var i;

  if (empt == "" || empt1 == "" || empt2 == "" || empt3 == "" || empt4 == "") {
    console.log('form failure')
    // window.alert('All fields are required')
    // Show error alert
    console.log("pop errorAlert");
    if (c == 0) {
      document.getElementById("errorAlert").style.display = "block";
      document.getElementById("errorAlert").style.opacity = "1";
      c = 1;
    } else {
      document.getElementById("errorAlert").style.display = "none";
      document.getElementById("errorAlert").style.opacity = "0";
    }
  } else {
    var $form = $('form#volunteer-form'),
      url = 'FORM_URL'
    var jqxhr = $.ajax({
      url: url,
      method: "GET",
      dataType: "json",
      data: $form.serialize()
    }).done(

      console.log("success"),
      document.getElementById("volunteer-form").reset(),
      // window.alert("Thank you for joining me in this campaign! We'll be in touch soon!")

      // Show success alert
      function pop() {
        if (c == 0) {
          document.getElementById("successAlert").style.display = "block";
          document.getElementById("successAlert").style.opacity = "1";
          c = 1;
        } else {
          document.getElementById("successAlert").style.display = "none";
          document.getElementById("successAlert").style.opacity = "0";
        }
      })
  }

  // Loop through all close buttons
  for (i = 0; i < close.length; i++) {
    // When someone clicks on a close button
    close[i].onclick = function () {

      // Get the parent of <span class="closebtn"> (<div class="alert">)
      var div = this.parentElement;

      // Set the opacity of div to 0 (transparent)
      // div.style.opacity = "0";
      // div.style.display = "none";

      $(div).css({
        "opacity": "0",
        "display": "none"
      })

      // Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
      setTimeout(function () {
        div.style.display = "none";
      }, 600);
    }
  }
})
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *