3

So basically I am trying to create a form that users can input their name, e-mail, message, etc., click submit, and the information gets compiled and sent to my e-mail address. What happens when you click submit is you get redirected to a new page, joeyorlando.me/php/index.php.

What I would like to have happen upon clicking submit is to have a small box pop up near the submit button saying, "Thanks for your submission" (or something of the sort), and the page not get redirected, instead you would remain on the same page as the form.

How can I prevent the submit button from sending you to this new page? Any advice would be much appreciated!!

<?php
    $firstname = $_POST['firstname'];
    $lastname = $_POST['lastname'];
    $company = $_POST['company'];
    $phone = $_POST['phone'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $human = $_POST['human'];

    $from = 'From: $firstname $lastname'; 
    $to = 'joey@joeyorlando.me'; 
    $subject = 'You Have a New Form Submission!';
    $body = "From: $firstname $lastname\n Company: $company Phone: $phone \n E-Mail: $email\n Message:\n $message";

    if ($_POST['submit']) {
        if ($firstname != '' && $lastname != '' && $email != '' && $message != '') {
            if ($human == '14') {
                if (mail ($to, $subject, $body, $email)) { 
                    echo '<p>Your message has been sent!</p>';
                } else { 
                    echo '<p>Something went wrong, go back and try again!</p>'; 
                }
            } else if ($_POST['submit'] && $human != '14') {
                echo '<p>You answered the question incorrectly!</p>';
            }
        } else {
        echo '<p>You need to fill in all required fields!!</p>';
    }
  }
  ?>
Joey Orlando
  • 1,408
  • 2
  • 17
  • 33
  • You can do this using an [AJAX request](http://api.jquery.com/jquery.ajax/), otherwise you'll have a full page rendered (and being a POST you should redirect user to prevent rePOSTing if refreshing the page – mTorres Aug 02 '14 at 18:02
  • Just a quick add on, it looks like you're doing a little spam check with the number 14. Assuming that the image isn't dynamic, it's not a good idea. I recommend using something like [Recaptcha](https://www.google.com/recaptcha/intro/index.html). Also you might want to use `htmlspecialchars` on the `POST` values. Otherwise, you should be fine security wise. – Idris Aug 02 '14 at 18:41

3 Answers3

2

You can use AJAX to send post the form to another script and wait for a response either showing the error or success message.

jquery ajax form submit

<script>
$(document).ready(function() {
    $('#my-form').submit(function() {

        $.ajax({
            url: 'script.php',
            method: 'post,'
            /* TODO: add data */
        }).done(function(response) {
            alert(response);
        });

        return false;
    });
});
</script>

<form id="my-form" method="post" action="script.php">
    <input type="submit" value="submit">
<form>
Community
  • 1
  • 1
Jake
  • 11,273
  • 21
  • 90
  • 147
0

As suggested by Jake, you could use Ajax or alternatively, you could write the form in the same php file. Then, when after all verification steps, if all is well, echo Success ;)

if(isset($_POST['submit']))
{
//the code you've posted + sucess message
}

<form name="name_of_form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
//Input form
</form>
Idris
  • 997
  • 2
  • 10
  • 27
0

AJAX will be good in this case. AJAX will submit your form without refreshing it and you can show appropriate message on successful submission.

Anoop
  • 61
  • 8