form submit results to load in div - html

Question

Struggling now for a few days and editing a few codes just to send my form to the process.php and then reload the result in the div the form is.
I'm working with a bootstrap layout and don't want the page to reload / go to process.php
HTML form is working when not by ajax call so the form and process.php is ok.
Only thing is I check in process on
$_POST['toevoegen'] == "training toevoegen"
because more forms go to process.php if I succeed the transfer to it.
HTML form just a snapshot out of it, it has more values in it.
<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>
The ajax call is something like this but this won't work at all for the moment.
<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

changed the data field to data: $('#form1').serialize(),
<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>