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 plicate 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" autoplete="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.

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 plicate 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" autoplete="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.

• javascript
• php
• html
• forms
• submit

• But why? It may be a successful redirect but that doesn't mean the php function will be a success... – krisph Commented Jun 10, 2016 at 9:19
• You would normally use an AJAX call for this. You can write one yourself in Javascript but why do this if Jquery, and others, already has done that for you? – KIKO Software Commented Jun 10, 2016 at 9:20
• You cannot achieve your desired functionality without AJAX. – Epodax Commented Jun 10, 2016 at 9:22
• 1 If you want to do clever stuff with your web site then you are going to have to get more proficient The only way to do this is with an AJAX call from the browser to get the PHP script to run and then send you a responce message ( Good/Bad ) – RiggsFolly Commented Jun 10, 2016 at 9:22

2 Answers 2

<?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

You can acplish 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>:

1. form.html

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

2. 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 overplicating 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', // <<<< -------  plete 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>
   

3. 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);
   
   ?>