Note that there are some explanatory texts on larger screens.

plurals
  1. POcannot display successful or error message after submitting the form without refreshing the page
    text
    copied!<p>I want to create a email contact form without refreshing the page. so i used jquery for that. Now after submitting the form i want to send successful or error message to the user. Here is my code:</p> <p>index.html</p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;HTML5 Contact Form&lt;/title&gt; &lt;link rel="stylesheet" media="screen" href="styles.css" &gt; &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function(){ $('#mycontactform').submit(function(e){ e.preventDefault(); $.post("contact.php", $(this).serialize(), function(response) { $('#success').html(response); //$('#success').hide('slow'); }); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form id="mycontactform" class="contact_form" action="" method="post" name="contact_form"&gt; &lt;ul&gt; &lt;li&gt; &lt;h2&gt;Contact Us&lt;/h2&gt; &lt;span class="required_notification"&gt;* Denotes Required Field&lt;/span&gt; &lt;/li&gt; &lt;li&gt; &lt;label for="name"&gt;Name:&lt;/label&gt; &lt;input type="text" id="name" name="name" placeholder="John Doe" required /&gt; &lt;/li&gt; &lt;li&gt; &lt;label for="email"&gt;Email:&lt;/label&gt; &lt;input type="email" name="email" id="email" placeholder="john_doe@example.com" required /&gt; &lt;span class="form_hint"&gt;Proper format "name@something.com"&lt;/span&gt; &lt;/li&gt; &lt;li&gt; &lt;label for="message"&gt;Message:&lt;/label&gt; &lt;textarea name="message" id="message" cols="40" rows="6" required &gt;&lt;/textarea&gt; &lt;/li&gt; &lt;li&gt; &lt;button class="submit" id="submit" style="cursor:pointer" type="submit"&gt;Submit Form&lt;/button&gt; &lt;div id="success" style="color:red;"&gt;&lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>contact.php</p> <pre><code>&lt;?php $field_name = $_POST['name']; $field_email = $_POST['email']; $field_message = $_POST['message']; $mail_to = 'babloopuneeth@gmail.com'; $subject = 'Message from a site visitor '.$field_name; $body_message = 'From: '.$field_name."\n"; $body_message .= 'E-mail: '.$field_email."\n"; $body_message .= 'Message: '.$field_message; $headers = 'From: '.$field_email."\r\n"; $headers .= 'Reply-To: '.$field_email."\r\n"; $mail_status = mail($mail_to, $subject, $body_message, $headers); if ($mail_status) { echo "Your email was sent!"; } else { echo "Your email was not sent!"; } ?&gt; </code></pre> <p>Now after submitting the form, if the mail was sent successfully i want if statement of php to be displayed if mail was not sent i wand else statment to be executed. But Im not getting successful or error messages after submitting the form nor im recieving any mail? Where am i going wrong? And is my jquery code correct to submit the form without refreshing the page? Plz someone help me</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload