title: HTML form won't carry out correct actions, interference
body: <p>I have written the following website which uses a very simple form and sends that data into a mysql database. My problem is that the javascript/ajax form id="contactForm" script seems to interfere with the form action="insert.php"</p>
  
  <p>Here is my basic html:</p>
  
  <pre><code> &lt;form action="insert.php" method="post" id="contactForm" role="form"  data-toggle="validator" class="shake"&gt;
          &lt;div class="row"&gt;
              &lt;div class="form-group down col-sm-6"&gt;
                  &lt;label for="name" class="h4"&gt;Voor en achternaam.&lt;/label&gt;
                  &lt;input name="naam" type="text" class="form-control" id="name" placeholder="Voornaam Achternaam" required data-error="Vergeet deze niet!"&gt;
                  &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
              &lt;/div&gt;
       &lt;/div&gt;
   &lt;button value="Submit" style="background-color: #75963c;" type="submit" id="form-submit" class="btn btn-success btn-lg pull-right "&gt;Submit&lt;/button&gt;
          &lt;div id="msgSubmit" class="h3 text-center hidden"&gt;&lt;/div&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>here is my insert.php to put the data into the mysql database:</p>
  
  <pre><code>&lt;?php
  $con = mysql_connect("mydatabaseip","mydbuser","mydbpassword");
  if (!$con)
    {
    die('Could not connect: ' . mysql_error());
    }
  
  mysql_select_db("mydbname", $con);
  
  $sql="INSERT INTO nametable (naam) VALUES('$_POST[naam]')";
  
  if (!mysql_query($sql,$con))
    {
    die('Error: ' . mysql_error());
    }
  
  
  echo "1 record added";
  
  mysql_close($con)
  ?&gt;
  </code></pre>
  
  <p>Here is my ajax/javascript for sending the email:</p>
  
  <pre><code>$("#contactForm").validator().on("submit", function (event) {
      if (event.isDefaultPrevented()) {
          // handle the invalid form...
          formError();
          submitMSG(false, "Did you fill out everything correctly?");
      } else {
          // everything looks good!
          event.preventDefault();
          submitForm();
      }
  });
  function submitForm(){
      // Initiate Variables With Form Content
      var name = $("#name").val();
  
      $.ajax({
          type: "POST",
          url: "php/form-process.php",
          data: "name=" + name,
          success : function(text){
              if (text == "success"){
                  formSuccess();
              } else {
                  formError();
                  submitMSG(false,text);
              }}});
  }
  function formSuccess(){
      $("#contactForm")[0].reset();
      submitMSG(true, "Message received!")
  } 
  function formError(){
      $("#contactForm").removeClass().addClass('shake animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
          $(this).removeClass();
      });
  }
  function submitMSG(valid, msg){
      if(valid){
          var msgClasses = "h3 text-center tada animated text-success";
      } else {
          var msgClasses = "h3 text-center text-danger";
      }
      $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
  }
  </code></pre>
  
  <p>here is my form-process.php:</p>
  
  <pre><code>&lt;?php
  
  $errorMSG = "";
  
  // NAME
  if (empty($_POST["name"])) {
      $errorMSG = "Name is required ";
  } else {
      $name = $_POST["name"];
  }
  
  
  
  $EmailTo = "myemail@outlook.com";
  $Subject = "form info.";
  
  // prepare email body text
  $Body = "";
  $Body .= "Name: ";
  $Body .= $name;
  $Body .= "\n";
  
  
  // send email
  $success = mail($EmailTo, $Subject, $Body, "From:".$name);
  
  // redirect to success page
  if ($success &amp;&amp; $errorMSG == ""){
     echo "success";
  }else{
      if($errorMSG == ""){
          echo "Something went wrong :(";
      } else {
          echo $errorMSG;
      }
  
  }
  ?&gt;
  </code></pre>
  
  <p>Somehow these two files seem to interfere with each other. Probably because they both perform an action on the same element - the form element. I've been working along time to get this running but can't figure out how to do so. If I let the id="contactForm" be in there it will execute but the action="insert.php" won't.</p>
  
  <p>All help is appreciated.</p>