Search jQuery

jQuery Forum

Ajax with php only working in console

in Using jQuery • 7 years ago

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.

$(document).ready(function () {
var form = $('form');
var input = form.find('input[name="email"]');
var action = form.attr("action");
var msg = $('.message');
var msgError404 = "Service is not available at the moment. Please check your internet connection or try again later."
var msgError503 = "Oops. Looks like something went wrong. Please try again later."
var msgErrorValidation = "This email address looks fake or invalid. Please enter a real email address."
var msgErrorFormat = "Your e-mail address is incorrect. Please check it and try again."
var msgSuccess = "Congrats! You are on list. We will inform you as soon as we finish."
var note = form.find(".note");
var icon = $("i.fa fa-paper-plane");
var iconProcess = "fa fa-spinner fa-spin";
var email = input.val();
var iconSuccess = "fa fa-check-circle";
var iconError = "fa fa-exclamation-circle";
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,}))$/;
function sendMail(){
// Test if the value of input is actually an email
if(re.test(email)) {
icon.removeClass();
icon.addClass(iconProcess);
form.removeClass("error success");
note.show();
$.ajax({
type: "POST",
url: action,
data: email,
dataType: "json",
error: function(data){
// Add error class to form
form.addClass("error");
note.hide();
// Change the icon to error
icon.removeClass();
icon.addClass(iconError);
// Determine the status of response and display the message
if(data.status == 404) {
msg.text(msgError404);
$(this).notifyMe(
'bottom',
'error',
'Error 404',
'Service is not available at the moment. Please check your internet connection or try again later.',
200,
3500
);
} else {
msg.text(msgError503);
$(this).notifyMe(
'bottom',
'error',
'Validation Error',
'This email address looks fake or invalid. Please enter a real email address.',
200,
3500
);
}
},
}).done(function(data){
// Hide note
note.hide();
if(data.status == "success") {
// Add success class to form
$(this).notifyMe(
'left',
'success',
'Got It!',
"You'll be the First to know.",
400,
3500
);
form.addClass("success");
//Change the icon to success
icon.removeClass();
icon.addClass(iconSuccess);
msg.text(msgSuccess);
} else {
// Add error class to form
if (data.type == "ValidationError") {
$(this).notifyMe(
'bottom',
'error',
'Validation Error',
'This email address looks fake or invalid. Please enter a real email address.',
200,
3500
);
} else {
$(this).notifyMe(
'bottom',
'error',
'503 Error',
'Oops. Looks like something went wrong. Please try again later.',
200,
3500
);
}
form.addClass("error");
// Change the icon to error
icon.removeClass();
icon.addClass(iconError);
}
});
} else {
$(this).notifyMe(
'bottom',
'error',
'Check Your E-mail Address',
'Your e-mail address is incorrect. Please check it and try again.',
200,
3500
);
//Add error class to form
form.addClass("error");
// Hide note
note.hide();
// Change the icon to error
icon.removeClass();
icon.addClass(iconError);
// Display the message
msg.text(msgErrorFormat);
}
}
form.on('submit', function(e){
e.preventDefault();
sendMail();
});
});

Replies(11)

jakecigar

Re: Ajax with php only working in console

7 years ago

It could be many different things, but it’s probably something wrong on your server.

Open up the developer tools in Chrome. Go to the console log. Check for errors.

If you are having problems with the dev tools, share a link to your page or a demo that fails similarly.

JΛ̊KE

jpjansa

Re: Ajax with php only working in console

7 years ago

Hi Jake!

I've been using the developers tools the whole time. I even installed an extension so I called view ajax request and responses because Chrome doesn't have built in support for that in the developers tools. When I submit the form nothing happens. To ensure it's not my server, or my local machine I monitored the ajax request from another one of my sites and they work just fine.

Please, take a look. This is the site with the problem dezineshop.co

Conversely, on the same site these ajax calls work with no problem...dezineshop.co/ArtSite.

jakecigar

Re: Ajax with php only working in console

7 years ago

dezineshop.co is a count down page?

JΛ̊KE

jakecigar

Re: Ajax with php only working in console

7 years ago

When I enter an email address, I don’t see any ajax.

JΛ̊KE

jpjansa

Re: Ajax with php only working in console

7 years ago

Yeah, that's what there at the moment.....

And, yes, the ajax function is not running. That's my problem. As you can see from the code I shared with you there is an ajax command.

If I run the code from the console it will work, as seen here:

But, clicking on the button to run the script from the file....ajax doesn't run.

Can you offer some guidance?

Thank you.

jakecigar

Re: Ajax with php only working in console

7 years ago

You are on a different page, I see the url is localhost.

JΛ̊KE

jakecigar

Re: Ajax with php only working in console

7 years ago

When I look at the source, I don’t see that script or anything like it. Where is it hidden?

JΛ̊KE

jpjansa

Re: Ajax with php only working in console

7 years ago

Ah, yeah, that's the only way to test the script. You can't run a server sided script (mail.php) outside of the server where the script is housed.

You asked for a site where the script is in use so you can recreate the the problem.

The script doesn't run from file no matter if on localhost or hosting server.

This is on local host just clicking the send button without running the script from the console.....

This is what happens if I run the script from the console then submit the form....

jpjansa

Re: Ajax with php only working in console

7 years ago

It's not hidden. it's in my js files, which are at the bottom of the page, notification.js.

jakecigar

Re: Ajax with php only working in console

7 years ago

var form = $('form');

var input = form.find('input[name="email"]');

var action = form.attr("action");

var msg = $('.message');

var msgError404 = "Service is not available at the moment. Please check your internet connection or try again later."

var msgError503 = "Oops. Looks like something went wrong. Please try again later."

var msgErrorValidation = "This email address looks fake or invalid. Please enter a real email address."

var msgErrorFormat = "Your e-mail address is incorrect. Please check it and try again."

var msgSuccess = "Congrats! You are on list. We will inform you as soon as we finish."

var note = form.find(".note");

var icon = $("i.fa fa-paper-plane");

var iconProcess = "fa fa-spinner fa-spin";

var email = input.val();

var iconSuccess = "fa fa-check-circle";

var iconError = "fa fa-exclamation-circle";

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,}))$/;

has to be INSIDE the function.

var email = input.val(); is getting the original HTML value, not the value that I type in.

JΛ̊KE

jpjansa

Re: Ajax with php only working in console

7 years ago

Alright!

I moved my variables inside the function and changed

var input = form.find('input[name="email"]');

var input = $('input[name="email"]');

and then defined

$('form')

for the submit function.

That has solved the problem!!

Thank you very much Jake.

Top Reply

Response title

Attachments

jQuery Forum

Ajax with php only working in console

Replies(11)

Re: Ajax with php only working in console

Re: Ajax with php only working in console

Re: Ajax with php only working in console

Re: Ajax with php only working in console

Re: Ajax with php only working in console

Re: Ajax with php only working in console

Re: Ajax with php only working in console

Re: Ajax with php only working in console

Re: Ajax with php only working in console

Re: Ajax with php only working in console

Re: Ajax with php only working in console

Statistics

Tags

Actions