Prevent php Form from Refreshing Page after Sending

Question

<!-- THIS IS USING GOOGLES reCaptcha V2 -->

<?php 
    if(isset($_POST['ContactButton'])) {
        $url = "https://www.google.com/recaptcha/api/siteverify";
        $privateKey = "##########################";
        $response = file_get_contents($url."?secret=".$privateKey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
        $data = json_decode($response);
        if (isset($data->success) AND $data->success==true) {
            $error = "";
            $successMsg = "";
            if ($_POST) {
                if ($_POST['email'] && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) {
                    $error .= "The email is invalid!<br>";
                }
                if (!$_POST['email']) {
                    $error .= "An email address is required!<br>";
                }
                if (!$_POST['subject']) {
                    $error .= "A subject is required!<br>";
                }
                if (!$_POST['body']) {
                    $error .= "Content in the body is required!<br>";
                }
                if ($error != "") {
                    $error = '<div class="alert alert-danger" role="alert"><strong>There is an error with your form!</strong><br>' . $error . '</div>';
                } else {
                    $emailTo = 'contactform@########.com';
                    $subject = $_POST['subject'];
                    $body = $_POST['body'];
                    $headers = "From: ".$_POST['email'];
                    if (mail($emailTo, $subject, $body, $headers)) {
                        $successMsg = '<div class="alert alert-success" role="alert">The message has successfully been sent. We will contact you ASAP!</div>';
                    } else {
                        $error = '<div class="alert alert-danger" role="alert">There was a problem sending your message, please try again later!</div>';
                    }
                }
            }
        } else {
            $captchaFail = '<div class="alert alert-danger" role="alert"><strong>There is an error with your form!</strong><br>reCaptcha Verification Failed, Please Try Again.</div>';
        }
    }
        
?>



<div class="jumbotron" id="contact-us-co" style="display: none">
      <p>Contact Us: 
          <br><br>
          <form method="POST" class="container">
            <h2 style="text-align:center;">***Contact Us***</h2>
            <br>
            <div id="error"><?php echo $successMsg ?><?php echo $error ?><?php echo $captchaFail ?></div>
            <div class="form-row">
                <div class="form-group col-md-12">
                    <label for="inputEmail">Email</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="inputSubject">Subject</label>
                <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
            </div>
            <label for="inputBody">Message</label>
            <div class="form-group input-group">
                <textarea class="form-control" aria-label="With textarea" placeholder="Body" name="body" id="body"></textarea>
            </div>
            <div class="g-recaptcha" data-sitekey="###################"></div>
            <br>
            <button type="submit" class="btn btn-primary" name="ContactButton" id="ContactButton">Submit</button>&nbsp;&nbsp;&nbsp;
        </form> </p>
    </div>

Solution #1 (not sure how to add this code)

code to prevent refresh:

document.getElementById('ContactButton').addEventListener('click', function(event) {
event.preventDefault();
}, false);

Solution #2 After form refresh reset back to the Contact Page: (I used onClick for behaviors)

<a href="#" class="nav-link" onClick="MM_callJS('offAll()');MM_setTextOfLayer('Htxt','','Contact Us');MM_changeProp('contact-us-co','','display','inline-block','DIV');MM_callJS('topFunction()')">Contact Us</a>

score 1 · Accepted Answer · answered Mar 19 '21 at 17:20

1

It's a default html form behavior. If you want to send form data without page reloading you need to looking for AJAX (or AjaxForm plugin): F.e: jQuery AJAX submit form

answered Mar 19 '21 at 17:20

nikamon

44
5

Prevent php Form from Refreshing Page after Sending

1 Answers1