After submitting form its showing success message on different page

Abhishek Patil

After clicking the submit now button I can't get the message above the form. Please help me out in this. Please anyone.

Here is index.html form:

<form id="contact-form" method="post" action="contact.php">
   <div class="messages"></div>
   <div class="controls">
      <div class="row">
         <div class="col-md-6">
            <div class="form-group">
               <label for="form_name">Firstname *</label>
               <input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
               <div class="help-block with-errors"></div>
            </div>
         </div>
         <div class="col-md-6">
            <div class="form-group">
               <label for="form_lastname">Lastname *</label>
               <input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
               <div class="help-block with-errors"></div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-6">
            <div class="form-group">
               <label for="form_email">Email *</label>
               <input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
               <div class="help-block with-errors"></div>
            </div>
         </div>
         <div class="col-md-6">
            <div class="form-group">
               <label for="form_need">Please specify your need *</label>
               <select id="form_need" name="need" class="form-control" required="required" data-error="Please specify your need.">
                  <option value="">-----</option>
                  <option value="Request quotation">Request quotation</option>
                  <option value="Request order status">Request order status</option>
                  <option value="Request copy of an invoice">Request copy of an invoice</option>
                  <option value="Other">Other</option>
               </select>
               <div class="help-block with-errors"></div>
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <div class="form-group">
               <label for="form_message">Message *</label>
               <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please, leave us a message."></textarea>
               <div class="help-block with-errors"></div>
            </div>
         </div>
         <div class="col-md-12">
            <div class="form-group">
               <div class="g-recaptcha" data-sitekey="6LdX5uQUAAAAAEPAP03K3_jafzIdoOFSblSgm2um" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
               <input class="form-control d-none" data-recaptcha="true" required data-error="Please complete the Captcha">
               <div class="help-block with-errors"></div>
            </div>
         </div> 
         <div class="col-md-12">
            <button type="submit" class="btn btn-success btn-send btn-danger-gradiant mt-3 mb-3 text-white border-0 py-2 px-3" value="Send message"><span> SUBMIT NOW <i class="fa fa-paper-plane"></i></span></button> 
         </div>
      </div>
      <div class="row">
         <div class="col-md-12">
            <p class="text-muted">
               <strong>*</strong> These fields are required.
            </p>
         </div>
      </div>
   </div>
</form>

This is the contactus.js:

$(function () {

    window.verifyRecaptchaCallback = function (response) {
        $('input[data-recaptcha]').val(response).trigger('change');
    }

    window.expiredRecaptchaCallback = function () {
        $('input[data-recaptcha]').val("").trigger('change');
    }

    $('#contact-form').validator();

    $('#contact-form').on('submit', function (e) {
        if (!e.isDefaultPrevented()) {
            var url = "contact.php";

            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function (data) {
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;

                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                    if (messageAlert && messageText) {
                        $('#contact-form').find('.messages').html(alertBox);
                        $('#contact-form')[0].reset();
                        grecaptcha.reset();
                    }
                }
            });
            return false;
        }
    })
});

This is the contact.php form:

<?php
// require ReCaptcha class
require('recaptcha-master/src/autoload.php');

// configure
// an email address that will be in the From field of the email.
$from = 'Demo contact form <[email protected]>';

// an email address that will receive the email with the output of the form
$sendTo = 'Demo contact form <[email protected]>';

// subject of the email
$subject = 'New message from contact form';

// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message');

// message that will be displayed when everything is OK :)
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';

// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';

// ReCaptch Secret
$recaptchaSecret = '6LdX5uQUAAAAAEakfeeS4jlKkOjvSaqrawNp4gUD';

// let's do the sending

// if you are not debugging and don't need error reporting, turn this off by error_reporting(0);
error_reporting(E_ALL & ~E_NOTICE);

try {
    if (!empty($_POST)) {

        // validate the ReCaptcha, if something is wrong, we throw an Exception,
        // i.e. code stops executing and goes to catch() block

        if (!isset($_POST['g-recaptcha-response'])) {
            throw new \Exception('ReCaptcha is not set.');
        }

        // do not forget to enter your secret key from https://www.google.com/recaptcha/admin

        $recaptcha = new \ReCaptcha\ReCaptcha($recaptchaSecret, new \ReCaptcha\RequestMethod\CurlPost());

        // we validate the ReCaptcha field together with the user's IP address

        $response = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);

        if (!$response->isSuccess()) {
            throw new \Exception('ReCaptcha was not validated.');
        }

        // everything went well, we can compose the message, as usually

        $emailText = "You have a new message from your contact form\n=============================\n";

        foreach ($_POST as $key => $value) {
            // If the field exists in the $fields array, include it in the email
            if (isset($fields[$key])) {
                $emailText .= "$fields[$key]: $value\n";
            }
        }

        // All the neccessary headers for the email.
        $headers = array('Content-Type: text/plain; charset="UTF-8";',
            'From: ' . $from,
            'Reply-To: ' . $from,
            'Return-Path: ' . $from,
        );

        // Send email
        mail($sendTo, $subject, $emailText, implode("\n", $headers));

        $responseArray = array('type' => 'success', 'message' => $okMessage);
    }
} catch (\Exception $e) {
    $responseArray = array('type' => 'danger', 'message' => $e->getMessage());
}

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');

    echo $encoded;
} else {
    echo $responseArray['message'];
}
Bogdan Bibina

Your message is on the an another page because you use action="contact.php". Try to remove that part of code.Also remove the portion with form

<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<button type="submit" class="btn btn-success btn-send btn-danger-gradiant mt-3 mb-3 text-white border-0 py-2 px-3" onclick="addYourFunctionhere()" value="Send message"><span> SUBMIT NOW <i class="fa fa-paper-plane"></i></span></button> 
      <script>  
function addYourFunctionhere(){
  var getform_name= $("#form_name").val()

  //and here use ajax to send the var from top

      $.ajax({
            type: "POST",
            url: url,
            data: {"username":getform_name},
            success: function (data) {
                console.log(data);
            }
        });
 }
</script>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to get the success message in the same page after submitting the form?

How to add a success message after submitting Word form?

Showing success message on a redirected page

How to get the sucess message in the same page after submitting the contact form?

JavaScript success message after form submit/page re-load

redirect to different page with success message after payment - Vue JS

Form success msg disappearing after submitting

Showing error or success message on same page

jQuery modal not showing after submitting form

How to show success message below html form after form submit which is being handled by different php file

display error message after submitting a form

Display custom message after submitting a Google Form

How to display alert message after submitting form

React displaying message after submitting the form

How to show a success dialog box after submitting the form in html?

show success message after form submit

localStorage page does not display after submitting form

Blank Page After Submitting Form in Laravel

redirect to another page after submitting a form

form in php not redirecting to page after submitting

How to display success message in a form submit after sending a mail successfully using malsup form jquery without page refresh

Submit a HTML form without redirection and showing a success message

Success message is not showing in html page with ajax/jquery request

After submitting a POST form open a new window showing the result

CollectionType field showing empty after manually submitting Symfony Form

PHP variables not showing up after submitting form (closed)

Session loses its data or value after form submitting in php

Not able to display message after submitting form using ajax

Pop-up message after submitting a form with php