Nginx Ajax Post

Question

I am planning to migrate from Apache2+Varnish to Nginx, because one of the sites will run SSL and I don't want to install and run another service just for the SSL, when everything can be achieved with Nginx.

The problem I have is with one simple html site that have contact form which is making AJAX request to PHP file, and the response is shown on the form.

What is happening is that I am being redirected to the PHP script rather than the form to get the response from the script and show it.

Here is the contact form:

          <div class="feedback" id="contact">
            <div class="wrap">
              <h2>Get in Touch</h2>
                  <div class="line blue"><span> </span></div>
           <h4>Contact Us! We would love to answer any of your questions & give you a Free quote!</h4>
                      <form id="contactForm" action="form.php" method="POST">
                      <div class="text-box">
                       <label>
           <input type="text" name="name" class="textbox" value="Your Name:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Name:';}">
          </label>
          <label>
           <input type="text" name="email" class="textbox" value="Your Email:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Email:';}">
          </label>
          <div class="clear"></div>
          </div>
          <textarea name="message" placeholder="Message:"></textarea>
          <script>$('input,textarea').focus(function(){
                     $(this).data('placeholder',$(this).attr('placeholder'))
                     $(this).attr('placeholder','');
                  });
                  $('input,textarea').blur(function(){
                     $(this).attr('placeholder',$(this).data('placeholder'));
                  });
          </script>
          <div class="contactResponse"></div>
          <button type="submit">Send</button>
          </form>

             </div>
          </div>
 </div>
 </div>
<script>
 $("#contactForm").submit(function(event)
{
    /* stop form from submitting normally */
    event.preventDefault();

    /* get some values from elements on the page: */
    var $form = $( this ),
        $submit = $form.find( 'button[type="submit"]' ),
        name_value = $form.find( 'input[name="name"]' ).val(),
        email_value = $form.find( 'input[name="email"]' ).val(),
        message_value = $form.find( 'textarea[name="message"]' ).val(),
        url = $form.attr('action');

    /* Send the data using post */
    var posting = $.post( url, {
                      name: name_value,
                      email: email_value,
                      message: message_value
                  });
    posting.done(function( data )
    {
        /* Put the results in a div */
        $( ".contactResponse" ).html(data);

        if ($('.contactResponse:contains("Thank you")').length > 0) {

          /* Disable the button. */
          $submit.attr("disabled", true);

          /* Change the button text. */
          $submit.text('Message Sent');

         }
         else{
           /* Change the button text. */
           $submit.text('Message NOT Sent');
         }
    });

This is the PHP file where I am posting to:

$to      = "[e-mail]";
$subject = "Contact Form";
$message = "$message";
$headers = "From: $email
";
$headers .= "Bcc: [e-mail]
";
$headers .= "Reply-To: $email
";
$headers .= "Date: " . date("r") ."
";
$headers .= "MIME-Version: 1.0
";
$headers .= "Content-type: text/plain; charset=iso-8859-1
";

if (strpos($ref,'example') !== false) {
    $spam = 1;
}
else{
    $spam = 0;
}

if(empty($name) || empty($email) || empty($message) || $spam === 0) {
  echo "<h2>Please fill all the fields.</h2>";
}

else{ $sent = mail($to,$subject,$message,$headers);
    if($sent){
    echo "<h2>Thank you for contacting us!</h2>";
}
  }
?>

And this is my Nginx server block:

server {
listen 443;
#server_name example.com;

root /var/www/example.com/public_html;
index index.html index.htm;

ssl on;
ssl_certificate /etc/nginx/ssl/certificate.crt;
ssl_certificate_key /etc/nginx/ssl/ssl.key;

ssl_session_timeout 5m;

ssl_protocols SSLv3 TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers "HIGH:!aNULL:!MD5 or HIGH:!aNULL:!MD5:!3DES";
ssl_prefer_server_ciphers on;

location / {
    error_page 404  /404.html;

    #To allow POST on static pages
    error_page 405  =200 $uri;

    add_header 'Access-Control-Allow-Origin' 'http://example.com';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'POST';
}

 # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

    location ~ \.php$ {
           fastcgi_split_path_info ^(.+\.php)(/.+)$;
           # NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
           fastcgi_pass unix:/var/run/php5-fpm.sock;
           fastcgi_index index.php;
           include fastcgi_params;
    }
}

Also I have some gallery problems with jQuery, I am getting "Uncaught ReferenceError: $ is not defined" error in the browser console.

$(function () {
    var filterList = {
        init: function () {
            // MixItUp plugin
            // https://mixitup.io
            $('#portfoliolist').mixitup({
                targetSelector: '.portfolio',
                filterSelector: '.filter',
                effects: ['fade'],
                easing: 'snap'
            });
        },
    };
    // Run the show!
    filterList.init();
});

This is running without problems on Apache2+Varnish.

Thanks!

Answer 1

In the end the problem got fixed by updating the jQuery version.

I really have no idea why that would be a problem since JS/jQuery is not a server side language, it makes no sense, but it works properly now.