1

I have contact form with html, php, js and ajax as you see in codes. After form fill successfully and click submit, the email was sent successfully. But the success message can't seen on same page. It see another page. Here is the codes. Could you help me what I miss or do wrongly. Thank you for your help.

--- HTML CODE ---

<div class="container">
 <div class="row">
  <div class="col-xl-8 offset-xl-2">
   <h1>CONTACT FORM</h1><hr>
   <p class="lead">By filling out the contact form; You may have information about us and current news.</p>
   <form id="contact-form" method="post" action="contact.php" role="form" novalidate="true">
   <div class="messages"></div>
   <div class="controls">
    <div class="row">
     <div class="col-lg-6">
      <div class="form-group">
        <label for="form_name">Full Name *</label>
        <input id="form_name" type="text" name="name" class="form-control" placeholder="Please fill the name field *" required="required" data-error="You must fill the name field">
        <div class="help-block with-errors alert-danger"></div>
       </div>
      </div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
     <div class="col-lg-6">
      <div class="form-group">
       <label for="form_email">E-mail *</label>
       <input id="form_email" type="email" name="email" class="form-control" placeholder="Please fill the email field *" required="required" data-error="You must fill the email field">
        <div class="help-block with-errors alert-danger"></div>
       </div>
      </div>
      <div class="col-lg-6"></div>
    </div>
    <div class="row">
     <div class="col-lg-6">
      <div class="form-group">
       <label for="form_subject">Subject *</label>
       <input id="form_subject" type="text" name="subject" class="form-control" placeholder="Please fill the subject field *" required="required" data-error="You must fill the subject field">
        <div class="help-block with-errors alert-danger"></div>
       </div>
      </div>
      <div class="col-lg-6"></div>
     </div>
     <div class="form-group">
      <label for="form_message">Message *</label>
      <textarea id="form_message" name="message" class="form-control" placeholder="Please fill the message field *" rows="4" required="required" data-error="You must fill the message field"></textarea>
       <div class="help-block with-errors alert-danger"></div>
      </div>
      <input type="submit" class="btn btn-success btn-send" value="Submit">
      <p class="text-muted" style="padding-top: 5px;"><strong>*</strong>This field must be fill.</p>
      </div><!-- controls all end -->
     </form><!-- form all end -->
    </div><!-- col-xl-8 offset-xl-2 end -->
   </div><!-- row all end -->
 </div><!-- container all end -->

--- PHP CODE ---

$from = '';
$sendTo = '[email protected]';
$subject = 'New message from contact form';
$fields = array('name' => 'Name', 'email' => 'Email', 'subject' => 'Subject', 'message' => 'Message');

$okMessage = 'Thank you for your message. I will write back soon.';
$errorMessage = 'There is an error while sending message. Please try again later.';

try {if (!empty($_POST)) {
    $emailText = "You have a new message from your contact form\n=====\n";
    foreach ($_POST as $key => $value) {
       if (isset($fields[$key])) {
         $emailText .= "$fields[$key]: $value\n";
       }
    }
    $headers = array('Content-Type: text/plain; charset="UTF-8";',
     'From: ' . $from,
     'Reply-To: ' . $from,
     'Return-Path: ' . $from,
    );
    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'];
}

--- JS AND AJAX CODE ---

$(function () {
  $('#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();
      }
     }
    });
    return false;

   }
  })
});
10
  • Have you loaded in the javascript file, and if so can you show us where and how? Commented Aug 1, 2018 at 13:57
  • Please explain this -> "But the success message can't seen on same page. It see another page." Do you mean you go to a different page? If so, what page? Commented Aug 1, 2018 at 14:16
  • @Archer Yes, you are right. It's going to websitename.com/contact.php And on that page I see "Thank you for your message. I will write back soon."
    – ErkanKilic
    Commented Aug 1, 2018 at 14:37
  • I think @RickJelier is correct then - check that you've included the javascript correctly. If in doubt, just put an alert in it somewhere that should show when you go to the page. Commented Aug 1, 2018 at 14:39
  • @Archer JS file added correctly but the alert is seen to redirected page. I don't want to redirect to show alert. The alert must be on the same page with contact form.
    – ErkanKilic
    Commented Aug 1, 2018 at 14:56

2 Answers 2

0

If I understood your question correctly, when you submit the form, are you redirected ?! For that I will suggest you to remove the attribute of the action form. Then try this :

$ ('#contact-form'). On ('submit', function (e) {
e.preventDefault();
e.stopPropagation();
...

You must declare e.preventDefault(); before check if(!event.isDefaultPrevented())

11
  • Worth a try, but there's return false; at the end of the function, so it shouldn't be needed (and stopPropagation() isn't necessary). Commented Aug 1, 2018 at 14:05
  • If the javascript isn't loaded in at all, the html will redirect to contact.php If the javascript is loaded in, the html will not use the action attribute Commented Aug 1, 2018 at 14:16
  • 1
    @RickJelier You're right, but until we know that the OP hasn't included the js file then a downvote is a bit harsh. No upvote is more suitable when you just don't know. Commented Aug 1, 2018 at 14:19
  • 1
    @Archer you are exactly right, I shouldn't make assumptions. removed my downvote Commented Aug 1, 2018 at 14:22
  • 1
    @RickJelier I'm doing my bit to spread the niceness that Stack Overflow wants to convey! Thanks :D Commented Aug 1, 2018 at 14:24
0

Thank all of you to help and direction to solve problem.

Fist of all, I changed that line without action="contact.php"

-- OLD STYLE ---

<form id="contact-form" method="post" action="contact.php" role="form" novalidate="true">

-- NEW STYLE ---

<form id="contact-form" method="post" role="form" novalidate="true">

The second one, at the of the body I had jquery-3.3.1.slim.min.js library but this library hasn't AJAX so that I changed it jquery-3.3.1.min.js

Now, everything work fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.