CODEWITHSUNDEEP
javascriptphphtmlforms
user3208239
user3208239

Reputation: 761

How to clear field after sending in an AJAX contact form?

First, the code:

CONTACT_FORM.HTML

<html>
 <head>
  <title>Contact Form</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <link rel="stylesheet" href="contact_form.css" />
  <script src="contact_form.js"></script>
 </head>
 <body>
  <div id="mainform">
   <form id="form" name="form" action="contact_form.html">
    <h3>Contact Form</h3>
    <p id="returnmessage"></p>
    <label>Name: <span>*</span></label>
    <input type="text" id="name" placeholder="Name"/>
    <label>Email: <span>*</span></label>
    <input type="text" id="email" placeholder="Email"/>
    <label>Contact No: <span>*</span></label>
    <input type="text" id="contact" placeholder="10 digit Mobile no."/>
    <label>Message:</label>
    <textarea id="message" placeholder="Message......."></textarea>
    <input type="button" id="submit" value="Send Message"/>
   </form>
  </div>
 </body>
</html>

CONTACT_FORM.PHP

<?php
 $name = $_POST['name1'];
 $email = $_POST['email1'];
 $message = $_POST['message1'];
 $contact = $_POST['contact1'];
 $email = filter_var($email, FILTER_SANITIZE_EMAIL);
 if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
  if (!preg_match("/^[0-9]{10}$/", $contact)) {
   echo "<span>* Please Fill Valid Contact No. *</span>";
  } else {
   $subject = "Message from website...";
   $headers = 'MIME-Version: 1.0' . "\r\n";
   $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
   $headers .= 'From:' . $email. "\r\n";
   $headers .= 'Cc:' . $email. "\r\n";
   $template = '<div style="padding:50px; color:white;">Hello ' . $name . ',<br/>'
   . '<br/>Thank you for contacting us.<br/><br/>'
   . 'Name:  ' . $name . '<br/>'
   . 'Email:  ' . $email . '<br/>'
   . 'Contact No:  ' . $contact . '<br/>'
   . 'Message:  ' . $message . '<br/><br/>'
   . 'This is a contact confirmation email.'
   . '<br/>'
   . 'We will keep you posted with our goings on.</div>';
   $sendmessage = "<div style=\"background-color:#7E7E7E; color:white;\">" . $template . "</div>";
   $sendmessage = wordwrap($sendmessage, 70);
   mail("[email protected]", $subject, $sendmessage, $headers);
   echo "Thank you, your query has been received.";
  }
 } else {
  echo "<span>* invalid email *</span>";
 }
?>

CONTACT_FORM.JS

$(document).ready(function() {
 $("#submit").click(function() {
  var name = $("#name").val();
  var email = $("#email").val();
  var message = $("#message").val();
  var contact = $("#contact").val();
  $("#returnmessage").empty();
  if (name == '' || email == '' || contact == '') {
   alert("Please Fill Required Fields");
  } else {
   $.post("contact_form.php", {
    name1: name,
    email1: email,
    message1: message,
    contact1: contact
   }, function(data) {
    $("#returnmessage").append(data);
    if (data == "Your Query has been received, We will contact you soon.") {
     // $("#form")[0].reset();
     $('#form').find('form')[0].reset();
    }
   });
  }
 });
});

My questions are these...

  1. How can I clear the form following submission?
  2. Why is the CC back to the sender not functioning?

Thanks in advance.

Upvotes: 2

Views: 1759

Answers (4)

user937284
user937284

Reputation: 2634

You can clear all text input elements.

$( "#form input:text" ).attr({value: ""});

Or to reset each field to the placeholder value:

$( "#form input:text" ).each(function(){
    var placeholder_value = $(this).attr('placeholder');
    $(this).attr('value', placeholder_value});
});

Upvotes: 0

user3208239
user3208239

Reputation: 761

Thanks to charlietfl for pointing out the difference the text for the IF logic. Everything is working fine and dandy now.

As per charlietfl's suggestion, I changed the following line in my JS file:

OLD CODE: $('#form').find('form')[0].reset();

NEW CODE: $('#form')[0].reset();

Also, I modified the message text to be the same in the PHP and the JS so the IF statement would validate.

Thanks again!

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

As for the reset your code is trying to look inside one form to find another form ... that doesn't exist

Change 

 $('#form').find('form')[0].reset();

To

 $('#form')[0].reset();

Upvotes: 3

Afaan Bilal
Afaan Bilal

Reputation: 333

Here's a way to clear the form from the top of my head:

In your HTML, add

<input type="reset" style="display:none;" id="reset-button" />

Then, in your JS:

if (data == "Your Query has been received, We will contact you soon.") {
 $('#reset-button').click();
}

About the CC part, why don't you use PHPMailer, it'll reduce your effort and be a lot easier to send to many recipients.

Upvotes: 0

Related Questions