Prevent open php page on submit contact form

Question

I created a contact form inside my html page, which once submitted, sends an email via a php page. Currently, once I submit the form, the page is reloaded and the.php page I use to send the email is opened. I would like to make sure that the php page is not opened, and that the page where the form is present remains open. After doing a search I tried to write a.js file using ajax, but the problem was not solved. I put my current code there:

HTML

<form class="input-form-container" action="php/emailHandler.php" method="POST">
<!-- Some input there -->
<div class="input-line">
<div class="input-button">
<input id="submit" type="submit" value="Invia">
</div>
</div>
<div class="validationAlert"></div>
</form>

JS

$(document).ready(function () {
    $('.input-form-container').submit(function(event) {
        console.log('Test sent debug');
        event.preventDefault();

        var name = $('#name').val();
        var company = $('#company').val();
        var phone = $('#phone').val();
        var email = $('#email').val();
        var message = $('#message').val();
        var validationAlert = $('.validationAlert');
        validationAlert.empty();

        if (!email.includes('@') && !email.includes('.')) {
            //event.preventDefault();
            validationAlert.append('<div>Email not valid</div>');
        }

        $.ajax({
            type : "POST",  //type of method
            url  : "php/emailHandler.php",  //your page
            data : { name : name, company: company, phone: phone, email : email, message : message },
            success: function(res){
                alert('MESSAGE SENT!');
            }
        });
    })
})

The.php page is a simple pagian for sending emails via PHPMailer. Here you can find a simple example of the structure: https://github.com/PHPMailer/PHPMailer/blob/master/examples/smtp.phps

I try to select a form in my js whit $(document).ready(function () {$('form').submit(function(event){ , but the result don`t change. If the email field is not correct the alert div of the script is entered correctly (so this is proof that los crypt is loaded correctly), but as I wrote before, when I submit the form, the.php page is opened.

Can you tell me where I'm wrong?

Answer 1

If you are using ajax to submit a form, you do not need to have the following codes on your HTML:

<form class="input-form-container" action="php/emailHandler.php" method="POST">

For your case, please also consider using "button" instead of "submit". Please find below a working version:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
<!-- Some input there -->

<input id=name name=name value='TEST'><br>
<input id=company name=company><br>
<input id=phone name=phone><br>
<input id=email name=email value="testemail@ok.com"><br>
<textarea id=message name=message></textarea>

<input id="button" type="button" value="Invia" onclick='javascript:trigger();'>

<script>

function trigger()
{
        
        var name = $('#name').val();
        var company = $('#company').val();
        var phone = $('#phone').val();
        var email = $('#email').val();
        var message = $('#message').val();
       
        
$.ajax({
  method: "POST",
  url: "2.php",
  data: { 
  name : name, company: company, phone: phone, email : email, message : message
  }
})
  .done(function( msg ) {
  if (msg!="OK")
{
    alert(msg);
}
else
{   

alert("Done ! Email sent ! ....");

}

}); 
        
    }

</script>

and for the php, this is a sample:

<?php

// just to trigger a test to check that the ajax works

echo $_REQUEST["email"];



/// codes to send email
/// after sending email, please echo "OK";
////
?>