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       = '[email protected]';
$subject  = 'Contact;
$message  =  $body;

$headers = "From: [email protected]" . "\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.

could you please give more information like your html ? i did not get what is the main problem but note that any button element inside the form will do the submit. so you have to prevent it to submit the form and do it with your ajax call — MajiD
– MajiD, Commented Jul 2, 2018 at 11:54
“It doesn’t work” is not a proper problem description. Please go read How to Ask and minimal reproducible example, and then edit your question accordingly. — C3roe
– C3roe, Commented Jul 2, 2018 at 11:56

koromerzhin · Accepted Answer · 2019-10-21 10:04:13Z

2

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 );
    }
  );
});

answered Oct 21, 2019 at 10:04

koromerzhin

215 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

symcbean · Accepted Answer · 2018-07-02 12:18:30Z

0

Change your submit input type to a button.

answered Jul 2, 2018 at 12:18

symcbean

48.4k6 gold badges64 silver badges99 bronze badges

Comments

JeanJacques · Accepted Answer · 2018-07-02 12:27:20Z

0

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>

answered Jul 2, 2018 at 12:27

JeanJacques

7710 bronze badges

Collectives™ on Stack Overflow

form with ajax - message form php without refresh page

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related