title: PHP Jquery POST - sends duplicate data
body: <p>I have a PHP form that sends data with the help of jQuery. Whenever I click "submit" I see it sends the data twice which results in double database entries and so on.</p>
  
  <p>Also I am still working on how to display "errors" and Exceptions from the try/catch block.</p>
  
  <p>Note: This form worked on another site, I changed just fields and where it sends the data but can't get it to work.</p>
  
  <p>THANK YOU for your help.</p>
  
  <hr>
  
  <h1>Registration form</h1>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="registration" class="representativeForm"&gt;
   &lt;div class="result"&gt;
   &lt;/div&gt;
   &lt;div class="formbody"&gt;
    &lt;div class="left"&gt;
     &lt;input required="required" type="text" name="name" placeholder="Your name" /&gt;
     &lt;input required="required" type="text" name="surname" placeholder="Your surname" /&gt;
     &lt;input required="required" type="text" name="birthdate" placeholder="Your birth date" /&gt;
     &lt;input required="required" type="text" name="nationality" placeholder="Your nationality" /&gt;
     &lt;?php  countriesSelection($con, $_LANG, "country"); ?&gt;
     &lt;input required="required" type="email"  name="email" placeholder="Your Email adress" /&gt;
     &lt;input required="required" type="text" name="position" placeholder="Your title or job position" /&gt;
     &lt;div class="schoolSelectionfields"&gt;
      &lt;?php schoolSelection($con, $_LANG, "schools");  ?&gt;
     &lt;/div&gt;
     &lt;input type="checkbox" id="schoolnotlisted" name="schoolnotlisted" value="1"&gt;Your school is not listed? Register school here.&lt;br /&gt;
    &lt;/div&gt;
    &lt;div class="right"&gt;
     &lt;div class="school_register"&gt;
      &lt;?php  schoolRepresentativeRegistration($_LANG, $con); ?&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;input type="hidden" name="form" value="representativeForm"&gt;
   &lt;input type="submit" value="Register" id="representativeSubmit" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <h1>jQuery Code</h1>
  
  <pre><code> $("#representativeSubmit").click(function() { 
  
      var proceed = true;
      //simple validation at client's end
      //loop through each field and we simply change border color to red for invalid fields
      $("#registration.representativeForm input[required=true]").each(function(){
          $(this).css('border-color',''); 
          if(!$.trim($(this).val())){ //if this field is empty 
              $(this).css('border-color','red'); //change border color to red   
              proceed = false; //set do not proceed flag
          }
          //check invalid email
          var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
          if($(this).attr("type")=="email" &amp;&amp; !email_reg.test($.trim($(this).val()))) {
              $(this).css('border-color','red'); //change border color to red   
              proceed = false; //set do not proceed flag              
          }
      });
      if(proceed) //everything looks good! proceed...
      {
          //get input field values data to be sent to server
          post_data = {
              'form'     : $('input[name=form]').val(),
              'name'     : $('input[name=name]').val(), 
              'surname'    : $('input[name=surname]').val(), 
              'birthdate'  : $('input[name=birthdate]').val(), 
              'nationality'  : $('input[name=nationality]').val(), 
              'email'  : $('input[name=email]').val(), 
              'position'  : $('input[name=position]').val(), 
              'country'  : $('select[name=country]').val(), 
          };
  
          if($("#schoolnotlisted").prop('checked') == true) {
              post_data += {
                  'schoolName'  : $('input[name=schoolName]').val(), 
                  'schoolAddress'  : $('input[name=schoolAddress]').val(), 
                  'schoolZipcode'  : $('input[name=schoolZipcode]').val(), 
                  'schoolCity'  : $('input[name=schoolCity]').val(), 
                  'schoolCountry'  : $('select[name=schoolCountry]').val()
              };
          }
          else {
              post_data += {
                  'schools'  : $('select[name=schools]').val()
              };
          }
          //Ajax post data to server
          $.post('registration.php', post_data, function(response){  
              if(response.type == 'error'){ //load json data from server and output message     
                  output = '&lt;div class="error"&gt;'+response.text+'&lt;/div&gt;';
              }else{
                  output = '&lt;div class="success"&gt;'+response.text+'&lt;/div&gt;';
                  //reset values in all input fields
                  $("#registration.representativeForm  input[required=true]").val(''); 
                  $("#registration.representativeForm .formbody").slideUp(); //hide form after success
              }
              $("#registration .result").hide().html(output).slideDown();
          }, 'json');
      }
  });
  //reset previously set border colors and hide all message on .keyup()
  $("#registration.representativeForm  input[required=true]").keyup(function() { 
      $(this).css('border-color',''); 
      $(".result").slideUp();
  });
  </code></pre>