Formular senden Ergebnisse zum Laden in div

Question

Kämpfen jetzt für ein paar Tage und Bearbeiten ein paar Codes, nur um mein Formular an die Prozess.php zu senden und dann das Ergebnis in das Div das Formular ist neu zu laden. Ich arbeite mit einem Bootstrap-Layout und möchte nicht, dass die Seite neu geladen wird/go to process.php

HTML-Formular funktioniert, wenn nicht von Ajax aufrufen, so dass das Formular und process.php in Ordnung ist. Nur Sache, die ich in Prozess auf

$_POST['toevoegen'] == "training toevoegen" 

weil mehr Formen process.php gehen, wenn ich die Übertragung es gelingen.

HTML Form nur ein Schnappschuss daraus, es hat mehr Werte drin.

<form id="form1" name="form1" method="post" action="process.php"> 
     <label>datum:</label> 
     <input name="datum" id="datum" size="10" type="text" autocomplete="off" /><br><br> 
     <label>club:</label> 
     <select name="clubid" id="club-list" onChange="gettrainer(this.value);"> 
     <option value="">Selecteer club</option> 
     <?php 
     foreach($results as $club) { 
     ?> 
     <option value="<?php echo $club["id"]; ?>"><?php echo $club["clubnaam"]; ? ></option> 
     <?php 
     } 
     ?> 
<input type="submit" id="submit" name="toevoegen" value="training toevoegen" /> 
</form> 

Der Ajax-Anruf ist so etwas, aber das wird im Moment überhaupt nicht funktionieren.

<script> 
     $(document).ready(function() { 

     $('#form1').on('submit', function (e) { 

      e.preventDefault(); 
      var form1 = document.getElementById("form1"); 
      var fd = new FormData(form1); 

      $.ajax({ 
      type: 'POST', 
      url: 'process.php', 
      data: fd, 
       success: function (response) { 
      $("#main").html(response); 
      } 
      }); 

     }); 

     }); 
    </script> 

Answer 1

änderte das Datenfeld Daten:. $ ('# Form1') serialisiert werden(),

<script> 
     $(document).ready(function() { 

     $('#form1').on('submit', function (e) { 

      e.preventDefault(); 
      $.ajax({ 
      type: 'POST', 
      url: 'process.php', 
      data: $('#form1').serialize(), 
       success: function (response) { 
      $("#main").html(response); 
      } 
      }); 

     }); 

     }); 
    </script>