Reputation: 43

Display success message upon form submit

I would like to display a success message on the same page, instead of redirecting the user to the .php file.

I would prefer not to over complicate by using AJAX & jQuery and I would like to keep the PHP file seperate from my form's HTML file.

Is it possible to use a small amount of Javascript for this?

Here is my code;

HTML Form

<div id="viewing-container">
    <div id="viewing-header">
        <h3 class="form-header">Request a Viewing</h3><button type="button" id="close" class="button-primary close-form" onclick="openClose()">&#735;</button>
    </div>
    <div id="viewing-content">
        <div id="success">
            <p class="form">Thank you for contacting us. We will be in touch soon.</p>
        </div>
        <p class="form">Please text or call Alex on <a href="">0123456789</a> for fastest response or enter your contact details below and we will call you back as soon as we can.</p>
        <form action="" method="post" autocomplete="on">
            <label for="name">Name <i>&#42;</i></label><input type="text" name="name" autofocus required><br />
            <label for="number">Contact Number <i>&#42;</i></label><input type="tel" name="number" required><br />
            <label for="message">Message <i>&#42;</i></label><textarea type="textarea" name="message" rows="5" required>Please call me to arrange a viewing of one of your properties.</textarea><br />
            <div class="g-recaptcha" data-sitekey="###"></div>
                    <br />
            <button type="submit" name="contactSubmit" id="contactSubmit" class="button-primary">Send</button>
        </form>
    </div>

PHP submit code

$name = $number = $message = "";

if(isset($_POST['contactSubmit'])){
    $name = $_POST["name"];
    $number = $_POST["number"];
    $message = $_POST["message"];


    $msg = "Name: " . $name . "\n" . "Number: " . $number "\n" . "Message:" . $message;
    $msg = wordwrap($msg,70);

    $subject = "Viewing Request";

    mail("[email protected]", $subject, $msg)
    header("Location: /index.htm");
}

exit;

I have tried using an onclick() Javascript function to display the success , but the form redirects to the PHP file before the Javascript function can be displayed. The only thing I have been able to get to work is a javascript alert function, but this is not very attractive or user friendly. I would like to display the success message and run the external php file without reloading the HTML page.

Please help!! I'm not extremely proficient in PHP or Javascript :( Thanks in advance.

Upvotes: 1

Answers (2)

guillefd

Reputation: 2013

You can accomplish this by using an AJAX call and jQuery is your best friend here.

jQuery will save you to write a lot of lines of code, its very simple to use, simply add the cdn hosted link to your HTML <head>:

form.html

<html>    
<head>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

</head>

Add this JS script after your form in the html file.
(you can also use a separate file "script.js" and add it to the head after the jquery link, but we will avoid overcomplicating it.)

<div id="viewing-container">
    <!-- your form -->
</div>

<script>
    $(document).ready(function() {

// hide the success message
$('#success').hide(); 

// process the form
$('form').submit(function(event) {

    // get the form data before sending via ajax
    var formData = {
        'name'               : $('input[name=name]').val(),
        'number'             : $('input[name=number]').val(),
        'message'            : $('input[name=message]').val(),
        'contactSubmit'      : 1 
    };

    // send the form to your PHP file (using ajax, no page reload!!)
    $.ajax({
        type: 'POST', 
        url:  'file.php', // <<<< -------  complete with your php filename (watch paths!)
        data:  formData,  // the form data
        dataType: 'json', // how data will be returned from php
        encode: true
    })
    // JS (jQuery) will do the ajax job and we "will wait that promise be DONE"
    // only after that, we´ll continue
    .done(function(data) {
        if(data.success === true) {
           // show the message!!!
           $('#success').show();
        }
        else{
            // ups, something went wrong ...
            alert('Ups!, this is embarrasing, try again please!');
            } 
        });
    // this is a trick, to avoid the form submit as normal behaviour
    event.preventDefault();
});
    }); 
</script>

finally, change the last 2 lines of your php file:

<?php 

// .... your code .... 

//mail("[email protected]", $subject, $msg)
//header("Location: /index.htm");

if(mail("[email protected]", $subject, $msg)) {
    $data['success'] = true;
}
else{
    $data['success'] = false;
}

// convert the $data to json and echo it
// so jQuery can grab it and understand what happend
echo json_encode($data);

?>

Upvotes: 1

Passionate Coder

Reputation: 7294

<?php
$nameErr = $numberErr = $messageErr = "";
$name = $number = $message = "";
if(isset($_POST['contactSubmit'])){
$name = $_POST["name"];
$number = $_POST["number"];
$message = $_POST["message"];
$msg = "Name:" . $name . "\n" . "Number: " . $number. "\n" . "Message:" . $message;
    $msg = wordwrap($msg,70);
$subject = "Viewing Request";
mail("[email protected]", $subject, $msg)?>
<script>alert("your message is sent successfully");
 window.location="index.html";
</script>
<?php  } ?>

after submitting form you will get a alert with message your message is sent successfully and if you click ok then you will redirect to index.html. Also please used javascript window.location beacuse header will give error of already sent

Upvotes: 1

Display success message upon form submit

Answers (2)

Related Questions