Inserting Form Data into MYSQL Database using PHP - php

Question

I am having trouble inserting data into the database when my "submit" button is pressed from a form. I want to take the values inputted from the user and store those values in the table I created
<?php
if(isset($_POST['submit'])){
$email = $_POST['email'];
$link = $_POST['link'];
$email = $_POST['screenerAmount'];
$minutes = $_POST['minutes'];
$comments = $_POST['comments'];
//insert into table
$sql = "INSERT INTO test_myFilm (email, link, screeners, minutes, comments)
VALUES ('$email', '$link','$screenerAmount', '$minutes','$comments')";
if (mysqli_query($conn, $sql)) {
header('Location: submit_ThankYou.php' );
} else {
echo "Error: " . $sql . "
" . mysqli_error($conn);
}
mysqli_close($conn);
}
?>
Here is the form:
<div>
<form class="submit-film" action="testfilm.php" method="POST">
<p class="email">Email</p>
<input class="field" name="email" id="email" placeholder="youremail#example.com" required>
<p class="project_link">Link to your project:</p>
<input class="field" name="link" id="link" placeholder="https://vimeo.com/myfilm" required>
<p class="number">How many screeners do you want?</p>
<input class="field" name="screenerAmount" id="screenerAmount" placeholder="8 screeners" required>
<p class="please">Please attach a questionaire if you have one preparred:</p>
<input type="file" class="select">
<p class="length">How many minutes is your project?</p>
<input class="field" name="minutes" id="minutes" placeholder="15 minutes" required>
<p class="questions">Do you have any additional comments or questions?</p>
<input class="field" name="comments" id="comments" placeholder="(insert comments/questions here)">
<div>
<button type="submit" class="button_type" class="button_type:hover" value="Submit" name ='submit'>Submit</button>
</div>
</form>
</div>
My connection seems to be working and I am not receiving any error. I am using Javascript to validate the values inputted into the form fields, so I see the values logged to the console, but the page does not refresh when the "submit" button is pressed.
Javascript as requested:
const form = document.querySelector('.submit-film');
const emailPattern = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
const linkPattern = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/;
form.addEventListener('submit', e=> {
e.preventDefault();
//validation
const email = form.email.value;
if (emailPattern.test(email)){
true;
console.log(form.email.value);
} else if (email === ""){
alert("Please submit your email address so we can get in contact with you.")
false;
} else {
alert("You have entered an invalid email address!");
false;
}
const link = form.link.value;
if (linkPattern.test(link)){
true;
console.log(form.link.value);
} else if (link===""){
alert ("Please input a link to your project. If you do not have a link to your project simply input 'no link'");
false;
} else {
alert("Please input a valid URL for your film. Youtube, Google Drive, and Vimeo work great. If you are still having trouble email contact#entholigy.com for help.");
false;
}
const screenerAmount = form.screenerAmount.value;
if (screenerAmount==="" || screenerAmount.value === null){
alert("Please let us know how many screeners you want.");
} else {
console.log(form.screenerAmount.value);
}
// const foo = form.foo.value;
// console.log(foo);
const minutes = form.minutes.value;
if (minutes==="" || minutes.value === null){
alert("Please let us know how long your film is (in minutes)");
} else {
console.log(form.minutes.value);
}
console.log(form.comments.value);
});
const now = new(Date);
console.log(now);

Answer 1

Change your submit button to input as you're checking for $_POST['submit'] in your submit page. See if this works for you.
<input type="submit" class="button_type" value="submit" name='submit'>Submit</input>