Search jQuery

jQuery Forum

Screen name:
jpjansa

jpjansa's Profile

2 Posts

6 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Ajax with php only working in console
[11Replies]
- 20-Sep-2015 02:36 AM
- Forum: Using jQuery
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. });

Getting animation to work on page load
[4Replies]
- 24-Oct-2012 12:26 PM
- Forum: Getting Started
I have very little knowledge of Jquery or javascript but I thought I would be smart enough to take a snippet of code and do a little modification so that instead of using onclick (in the html) it would begin on page load. But I've tried several ways and nothing is working. I know it must be something small that I just don't have a clue about but I really need help. Maybe just a point in the right direction....here's the code

<!DOCTYPE html>
<head>
<title>Web site experiment</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body >
<script>
window.onload = (function fx(o) {
var $o = $(o);

$o.html($o.text().replace(/([\S])/g, "<span>$1</span>"));
$o.css("position", "absolute");
$("span", $o).each(function(i) {
var newTop = Math.floor(Math.random()*500)*((i%2)?1:-1);
var newLeft = Math.floor(Math.random()*500)*((i%2)?1:-1);

$(this).css({position: "relative",
opacity: 1,
fontSize: 248,
top: newTop,
left: newLeft
}).animate({
opacity: 1,
fontSize: 248,
top: 0,
left: 0
},3000);

});

});
</script>
<div id="name" >
<span id="letter">Some Words
</span>
</div>

</body>

</html>

Before I tried changing it was like....

<div id="name" >
<span id="letter" onclick="fx(o)">Some Words
</span>
</div>

<script>
(function fx(o) {
var $o = $(o);

$o.html($o.text().replace(/([\S])/g, "<span>$1</span>"));
$o.css("position", "absolute");
$("span", $o).each(function(i) {
var newTop = Math.floor(Math.random()*500)*((i%2)?1:-1);
var newLeft = Math.floor(Math.random()*500)*((i%2)?1:-1);

$(this).css({position: "relative",
opacity: 1,
fontSize: 248,
  top: newTop,
left: newLeft
}).animate({
opacity: 1,
fontSize: 248,
   top: 0,
left: 0
  },3000);

});
</script>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend