Console states the following errors when I hit the submit button on my page:
process.js:19 Uncaught ReferenceError: data is not defined
at HTMLButtonElement.<anonymous> (process.js:19)
at HTMLButtonElement.dispatch (jquery-3.3.1.min.js:2)
at HTMLButtonElement.y.handle (jquery-3.3.1.min.js:2)
This is my jQuery AJAX code that executes when you hit the submit button. This is my first time playing with AJAX/jQuery - not sure what is happening so if someone could help me, that'd be greatly appreciated!
$(document).ready(function() {
$('#login_button').click(function()
{
event.preventDefault();
var formData = {
'email' : $('input[email=email').val(),
'password' : $('input[password=password').val()
};
$.ajax({
type : 'POST',
url : 'ajax/proclogin.php',
data : formData,
dataType : 'json'
});
// using the done promise callback
if (data.success == false)
{
if(data.errors.email)
{
//toastr.error(''+data.errors.email+'', 'Oops!');
alert('Email error');
}
else if(data.errors.password)
{
//toastr.error(''+data.errors.password+'', 'Oops!');
alert('Password Error');
}
}
else
{
//toastr.success('Works!', 'WooHoo!');
alert('Works.');
}
});
});
The response or data is available in the success callback of $.ajax
call.
$.ajax({
type : 'POST',
url : 'ajax/proclogin.php',
data : formData,
dataType : 'json'
}).done(resp => {
// You IF statements go here.
}).fail(error => {
});
Look at the docs at: jQuery
Model ajax function looks like this
$.ajax({
url : 'wopiEditor',
data : {
data : data,
reqType : "initEditFile",
access_token : "DEADBEEFDEADBEEFDEADBEEF"
},
type : 'POST',
dataType : 'text',
success : function(response) {
},
error : function(request, textStatus, errorThrown) {
console.log(request, textStatus, errorThrown);
}
});
In your code, the data is defined anywhere. So it is giving error.
Add success handler like this...
$.ajax({
type : 'POST',
url : 'ajax/proclogin.php',
data : formData,
dataType : 'json',
success: function (response) {
console.log(response);
}
});
data
object that you are using is not defined. As suggested by 'Rory McCrossan', use the ajax in below mentioned way. For detailed info, go to this link - http://api.jquery.com/jquery.ajax/
Example:
$(document).ready(function() {
$('#login_button').click(function()
{
event.preventDefault();
var formData = {
'email' : $('input[email=email]').val(),
'password' : $('input[password=password]').val()
};
$.ajax({
type : 'POST',
url : 'ajax/proclogin.php',
data : formData,
dataType : 'json',
success : function(data){
if (data.success == false)
{
if(data.errors.email)
{
//toastr.error(''+data.errors.email+'', 'Oops!');
alert('Email error');
}
else if(data.errors.password)
{
//toastr.error(''+data.errors.password+'', 'Oops!');
alert('Password Error');
}
}
else
{
//toastr.success('Works!', 'WooHoo!');
alert('Works.');
}
});
}
});
});
concerning your issue now with validation of email and password
'email' : $('input[email=email]').val(),
'password' : $('input[password=password]').val()
this -> input[email=email] is targeting an input element with an "email" attribute which isnt a valid input attribute, your looking for name/type ect.
'email' : $('input[name=email]').val(),
'password' : $('input[name=password]').val()
so you are targeting all input elements that have the name attribute of email or password. then make sure you have name=email on your input element
<input type="email" name="email">
<input type="text" name="password">
hopefully this solution helps you