title: pop up form ajax request not working
body: <p>i want to add pop up contact form in my site and i take one example from internet and made some changes for it's sending mail and i made it for inserting data into database. so here my first file index.php</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
      &lt;title&gt;A Slick Ajax Contact Form with jQuery and PHP&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
          var messageDelay = 2000; // How long to display status messages (in milliseconds)
  
          // Init the form once the document is ready
          $(init);
  
          // Initialize the form
          function init() {
  
              // Hide the form initially.
              // Make submitForm() the form's submit handler.
              // Position the form so it sits in the centre of the browser window.
              $('#contactForm').hide().submit(submitForm).addClass('positioned');
  
              // When the "Send us an email" link is clicked:
              // 1. Fade the content out
              // 2. Display the form
              // 3. Move focus to the first field
              // 4. Prevent the link being followed
  
              $('a[href="#contactForm"]').click(function() {
                  $('#content').fadeTo('slow', .2);
                  $('#contactForm').fadeIn('slow', function() {
                      $('#senderName').focus();
                  })
  
                  return false;
              });
  
              // When the "Cancel" button is clicked, close the form
              $('#cancel').click(function() {
                  $('#contactForm').fadeOut();
                  $('#content').fadeTo('slow', 1);
              });
  
              // When the "Escape" key is pressed, close the form
              $('#contactForm').keydown(function(event) {
                  if (event.which == 27) {
                      $('#contactForm').fadeOut();
                      $('#content').fadeTo('slow', 1);
                  }
              });
  
          }
  
          // Submit the form via Ajax
          function submitForm() {
  
              var contactForm = $(this);
  
              // Are all the fields filled in?
              if (!$('#senderName').val() || !$('#senderEmail').val() || !$('#ContactNo').val() || !$('#message').val()) {
  
                  // No; display a warning message and return to the form
                  $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
                  contactForm.fadeOut().delay(messageDelay).fadeIn();
  
              } else {
  
                  // Yes; submit the form to the PHP script via Ajax
                  $('#sendingMessage').fadeIn();
                  contactForm.fadeOut();
  
                  $.ajax({
                      url: contactForm.attr('action') + "?ajax=true",
                      type: contactForm.attr('method'),
                      data: contactForm.serialize(),
                      success: submitFinished
                  });
  
              }
  
              // Prevent the default form submission occurring
              return false;
          }
  
          // Handle the Ajax response
          function submitFinished(response) {
              response = $.trim(response);
              $('#sendingMessage').fadeOut();
  
              if (response == "success") {
  
                  // Form submitted successfully:
                  // 1. Display the success message
                  // 2. Clear the form fields
                  // 3. Fade the content back in
  
                  $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
                  $('#senderName').val("");
                  $('#senderEmail').val("");
                  $('#ContactNo').val("");
                  $('#message').val("");
  
                  $('#content').delay(messageDelay + 500).fadeTo('slow', 1);
  
              } else {
  
                  // Form submission failed: Display the failure message,
                  // then redisplay the form
                  $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
                  $('#contactForm').delay(messageDelay + 500).fadeIn();
  
              }
  
          }
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="content"&gt;
          &lt;p style="padding-bottom: 50px; font-weight: bold; text-align: center;"&gt;&lt;a href="#contactForm"&gt;~ Send us an email ~&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;form id="contactForm" action="processForm.php" method="post"&gt;
          &lt;h2&gt;Send us an email...&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;label for="senderName"&gt;Full Name&lt;/label&gt;
                  &lt;input type="text" name="senderName" id="senderName" placeholder="Please type your name" required="required" maxlength="40" /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="senderEmail"&gt;Email&lt;/label&gt;
                  &lt;input type="email" name="senderEmail" id="senderEmail" placeholder="Please type your email address" required="required" maxlength="50" /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="ContactNo"&gt;Contact No&lt;/label&gt;
                  &lt;input type="text" name="ContactNo" id="ContactNo" placeholder="Please type your contact no" required="required" maxlength="50" /&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="message" style="padding-top: .5em;"&gt;Your Message&lt;/label&gt;
                  &lt;textarea name="message" id="message" placeholder="Please type your message" required="required" cols="80" rows="10" maxlength="10000"&gt;&lt;/textarea&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="formButtons"&gt;
              &lt;input type="submit" id="sendMessage" name="sendMessage" value="Send Email" /&gt;
              &lt;input type="button" id="cancel" name="cancel" value="Cancel" /&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;div id="sendingMessage" class="statusMessage"&gt;
          &lt;p&gt;Sending your message. Please wait...&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="successMessage" class="statusMessage"&gt;
          &lt;p&gt;Thanks for sending your message! We'll get back to you shortly.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="failureMessage" class="statusMessage"&gt;
          &lt;p&gt;There was a problem sending your message. Please try again.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="incompleteMessage" class="statusMessage"&gt;
          &lt;p&gt;Please complete all the fields in the form before sending.&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and other one is processForm.php is.</p>
  
  <pre><code>&lt;?php
  
  // Read the form values
  $success     = false;
  $senderName  = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";
  $senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
  $ContactNo   = isset( $_POST['ContactNo'] ) ? preg_replace( "/[^\ 0-9]/", "", $_POST['ContactNo'] ) : "";
  $message     = $_POST['message'];
  
  // If all values exist, send the email
  if ( $senderName &amp;&amp; $senderEmail &amp;&amp; $contactNo &amp;&amp; $message ) {
  
      include("config.php");
      $success = mysql_query("INSERT INTO `inquiry` (`name`, `contact`, `email`, `query`) VALUES ('$senderName', '$ContactNo', '$senderEmail', '$message')");
  
  }
  
  // Return an appropriate response to the browser
  if ( isset($_GET["ajax"]) ) {
  
      echo $success ? "success" : "error";
  
  } else { ?&gt;
  
      &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Thanks!&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;?php if ( $success ) echo "&lt;p&gt;Thanks for sending your message! We'll get back to you shortly.&lt;/p&gt;" ?&gt;
          &lt;?php if ( !$success ) echo "&lt;p&gt;There was a problem sending your message. Please try again.&lt;/p&gt;" ?&gt;
          &lt;p&gt;Click your browser's Back button to return to the page.&lt;/p&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  
  &lt;?php } ?&gt;
  </code></pre>
  
  <p>problem is when i submit right for it display message "There was a problem sending your message. Please try again." please help me.</p>