form with ajax - message form php without refresh page

Question

I want to send form using an ajax call without refreshing the page

Html

<form id="form">
<input type="radio" name="radio" value="radio1">
<input type="radio" name="radio" value="radio1">

<input type="checkbox" name="box" value="box1">
<input type="checkbox" name="box" value="box2">

<input type="text" name="text" value="box2">

<input type="submit" id="submit" name="submit" class="embtn btn-1" value="Send" onclick="submitform()">

</form>

This is JS code

function submitform(e) {
    e.preventDefault();
    $.ajax({
        url : 'assets/php/brief-wiz.php', 
        type: 'post', 
        data: $('form').serialize() 
    }).done(function(html) {
        $( ".form-message" ).append( html );
    });
};

PHP

<?php

$errors = [];

if (empty($_POST["radio"])) {
    $errors[] = "Complete radio ";
} else { 
    $radio = implode($_POST['radio']);
}

if (empty($_POST["box"])) {
    $errors[] = "Complete box ";
} else { 
    $box = implode($_POST['box']);
}

$text = ($_POST['text']);   

$body = "";

$body .=  "<div><b>1:</b> " . $profil . "</div>";
$body .=  "<div><b>2:</b> " . $box . $text . "</div>";

$to       = 'mymail@com.pl';
$subject  = 'Contact;
$message  =  $body;

$headers = "From: webmaster@example.com" . "\r\n";
$headers .= "Reply-To: " . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";

$success = mail($to, $subject, $message, $headers);


echo $success ? "Mail sended" : "Error";


?>

Now my page is reloading without messgaes.

Without this code:

(e) {
    e.preventDefault();
}

Messages shows for one second, but the page is reloading. How can I load the messages using PHP without refreshing the page.

Answer 1

Use Javascript Event :

HTML

<form id="form" action="assets/php/brief-wiz.php">
    <input type="radio" name="radio" value="radio1">
    <input type="radio" name="radio" value="radio1">

    <input type="checkbox" name="box" value="box1">
    <input type="checkbox" name="box" value="box2">

    <input type="text" name="text" value="box2">

    <input type="submit" id="submit" name="submit" class="embtn btn-1" value="Send">
</form>

JAVASCRIPT

$('form').on('submit',function(event){
  event.preventDefault();
  var form = event.currentTarget;
  $.ajax(
    {
        url : $(form).attr('action'), 
        type: 'post', 
        data: $(form).serialize() 
    }
  ).done(
    function(html) {
        $( ".form-message" ).append( html );
    }
  );
});

Answer 2

将您的提交输入类型更改为按钮。

Answer 3

It is because the type of your button is submit ! I am suggesting you to use this instead :

<button id="submit" class="embtn btn-1" onclick="submitform()">Send</button>