POST Request doesnt get received - php

Question

So I have this form to add a person to a database:
<div id="formDiv">
<form id="form1" method="post" action="#">
<input type="text" name="title" placeholder="Title">
<br>
<input type="text" name="firstname" placeholder="First Name">
<br>
<input type="text" name="lastname" placeholder="Last Name">
<br>
<input type="text" name="group" placeholder="Group">
<br>
<input type="text" name="company" placeholder="Company">
<br>
<select name="sex" required>
<option value="" disabled selected>Sex/option>
<option value="male">male</option>
<option value="female">female</option>
</select>
<br>
<button type="submit" id="insert" name="insert">Insert</button>
</form>
</div>
And a php File that handles inserting the data into the database:
<?php
include($_SERVER['DOCUMENT_ROOT'].'/website/dbConnection.php');
include($_SERVER['DOCUMENT_ROOT'].'/website/administrator/components/com_backend/backend.php');
if(isset($_POST['insert'])){
$title = $_POST['title'];
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$group = $_POST['group'];
$company = $_POST['company'];
$sex = $_POST['sex'];
if ($sex == "male"){
$sex = 0;
}
else{
$sex = 1;
}
$query = "INSERT INTO members (Title, Firstname, Lastname, Group, Company, Sex)
VALUES('$title', '$firstname', '$lastname', '$group', '$company', '$sex')";
mysqli_query($GLOBALS['connect'], $query);
}
I know that theres a problem between the 2 files communicating. Because the 2nd File does not receive the POST from the 1st file.
When I use the first file and press the submit Button, it reloads the page and enters nothing into the database.
When I navigate directly to the 2nd file, I can use the form since I include the first file. So I fill out the form, press the submit button and like magic, it works there!
I have checked the path, when including the 1st file 100 times. Its correct. I have checked the path when including the databse connection 100 times. Its correct. I have run the query directly in my database. Its correct.
I am assuming that I made a small mistake, that I cant spot, but the code is so small and simple thats just impossible.

Answer 1

<form id="form1" method="post" action="your_php_file.php">
This will point to your php file and proceed the POST request from your front-end to the back-end. According to your code you don't send anything to your php file. So the code you have there may work but your request is never made to your php file, so nothing is put inside the database.
Edit
In order not to reload the page as you requested then you shouldn't submit the form but you must make an ajax call to the backend side.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="formDiv">
<input type="text" name="title" placeholder="Title">
<br>
<input type="text" name="firstname" placeholder="First Name">
<br>
<input type="text" name="lastname" placeholder="Last Name">
<br>
<input type="text" name="group" placeholder="Group">
<br>
<input type="text" name="company" placeholder="Company">
<br>
<select name="sex" required>
<option value="" disabled selected>Sex/option>
<option value="male">male</option>
<option value="female">female</option>
</select>
<br>
<button type="button" id="insert" name="insert">Insert</button>
</div>
<script>
$( "#insert" ).click(function() {
let title = $("input[name=title]").val();
let firstname = $("input[name=firstname]").val();
let lastname = $("input[name=lastname]").val();
let group = $("input[name=group]").val();
let company = $("input[name=company]").val();
let sex = $("input[name=sex] option:selected").text();
$.ajax({
method: 'POST',
url: 'your_php_file.php',
data: {'title': title, 'firstname': firstname, 'lastname': lastname, 'group': group, 'company': company, 'sex': sex},
success: function (response) {
console.log(works)
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(JSON.stringify(jqXHR));
console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
}
});
})
</script>
That way the data will be send to your backend and you can handle it the same like you did. It's in json format so don't forget to decode if needed.

Answer 2

<div id="formDiv">
<form id="form1" method="post" action="#">
<input type="text" name="title" placeholder="Title">
<br>
<input type="text" name="firstname" placeholder="First Name">
<br>
<input type="text" name="lastname" placeholder="Last Name">
<br>
<input type="text" name="group" placeholder="Group">
<br>
<input type="text" name="company" placeholder="Company">
<br>
<select name="sex" required>
<option value="" disabled selected>Sex/option>
<option value="0">male</option>
<option value="1">female</option>
</select>
<br>
<button type="submit" id="insert" name="insert">Insert</button>
</form>
</div>
<script>
$('#form1').submit(function (e) {
e.preventDefault();
var senddata = $(this).serializeArray();
var sendto = $(this).attr("action");
$.ajax({
url: sendto,
type: 'POST',
data: senddata,
success: function (data) {
$('.messages').html(data);
},
error: function (error) {
$('.messages').html(error);
}
});
});
</script>