Ajax with php only working in console

Ajax with php only working in console

It's just email, why so difficult??? I have a really simple form, only the email address as an input. The form action is mail.php. I'm using a plugin script notifyme.js for some nice visuals and an ajax call to handle everything. I fire ajax on form 'submit'.  Problem is I can't get ajax to run! My code runs in the console when using xammp on my local machine. I can see the response and the status is 200. But when I refresh and just click the button to submit the form all I can get are my error messages, and only the default message for when somethings wrong but I don't know why. When running from my hosting server I get the same thing. Any ideas???

My code is wraped in a document.ready(function) I'm think it has something to do with they way jQuery is defined $ vs JQuery, but I'm really not sure. Would love some help!

Thanks.


  2. $(document).ready(function () {

  4. var form = $('form');
  5. var input = form.find('input[name="email"]');
  6. var action = form.attr("action");
  7. var msg = $('.message');
  8. var msgError404 = "Service is not available at the moment. Please check your internet connection or try again later."
  9. var msgError503 = "Oops. Looks like something went wrong. Please try again later."
  10. var msgErrorValidation = "This email address looks fake or invalid. Please enter a real email address."
  11. var msgErrorFormat = "Your e-mail address is incorrect. Please check it and try again."
  12. var msgSuccess = "Congrats! You are on list. We will inform you as soon as we finish."
  13. var note = form.find(".note");
  14. var icon = $("i.fa fa-paper-plane");
  15. var iconProcess = "fa fa-spinner fa-spin";
  16. var email = input.val();
  17. var iconSuccess = "fa fa-check-circle";
  18. var iconError = "fa fa-exclamation-circle"; 
  19. var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  21. function sendMail(){
  22. // Test if the value of input is actually an email
  23. if(re.test(email)) {
  24. icon.removeClass();
  25. icon.addClass(iconProcess);
  26. form.removeClass("error success");
  27. note.show();
  28. $.ajax({
  29. type: "POST",
  30. url: action,
  31. data: email,
  32. dataType: "json",
  33. error: function(data){
  34. // Add error class to form
  35. form.addClass("error");
  36. note.hide();
  37. // Change the icon to error
  38. icon.removeClass();
  39. icon.addClass(iconError);
  40. // Determine the status of response and display the message
  41. if(data.status == 404) {
  42. msg.text(msgError404);
  43. $(this).notifyMe(
  44. 'bottom',
  45. 'error',
  46. 'Error 404',
  47. 'Service is not available at the moment. Please check your internet connection or try again later.',
  48. 200,
  49. 3500
  50. );
  51. } else {
  52. msg.text(msgError503);
  53. $(this).notifyMe(
  54. 'bottom',
  55. 'error',
  56. 'Validation Error',
  57. 'This email address looks fake or invalid. Please enter a real email address.',
  58. 200,
  59. 3500
  60. );
  61. }
  62. },
  64. }).done(function(data){
  65. // Hide note
  66. note.hide();
  68. if(data.status == "success") {
  69. // Add success class to form
  70. $(this).notifyMe(
  71. 'left',
  72. 'success',
  73. 'Got It!',
  74. "You'll be the First to know.",
  75. 400,
  76. 3500
  77. );
  78. form.addClass("success");
  79. //Change the icon to success
  80. icon.removeClass();
  81. icon.addClass(iconSuccess);
  82. msg.text(msgSuccess);
  83. } else {
  84. // Add error class to form
  85. if (data.type == "ValidationError") {
  86. $(this).notifyMe(
  87. 'bottom',
  88. 'error',
  89. 'Validation Error',
  90. 'This email address looks fake or invalid. Please enter a real email address.',
  91. 200,
  92. 3500
  93. );
  94. } else {
  95. $(this).notifyMe(
  96. 'bottom',
  97. 'error',
  98. '503 Error',
  99. 'Oops. Looks like something went wrong. Please try again later.',
  100. 200,
  101. 3500
  102. );
  103. }
  104. form.addClass("error");
  105. // Change the icon to error
  106. icon.removeClass();
  107. icon.addClass(iconError);
  108. }
  109. });
  111. } else {
  112. $(this).notifyMe(
  113. 'bottom',
  114. 'error',
  115. 'Check Your E-mail Address',
  116. 'Your e-mail address is incorrect. Please check it and try again.',
  117. 200,
  118. 3500
  119. );
  120. //Add error class to form
  121. form.addClass("error");
  122. // Hide note
  123. note.hide();
  124. // Change the icon to error
  125. icon.removeClass();
  126. icon.addClass(iconError);
  127. // Display the message
  128. msg.text(msgErrorFormat);
  129. }
  131. }
  133. form.on('submit', function(e){
  134. e.preventDefault();
  135. sendMail();
  136. });
  138. });