It used to work fine, and I don't remember changing anything in these files, but now nothing happens when I click on submit form. What may cause the problem?
Snippet:
// And here's the ajax request file *auth_ajax.js*:
$(function() {
$('form').on('submit', function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'check_user.php',
dataType: 'json',
data: $('form').serialize(),
success: function(response) {
if (response['found'] === 'true') {
location.href = 'index.php';
} else {
alert('Incorrect username or password');
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
<!-- Here's my php file: -->
<h1 id="header">Enter your data here</h1>
<form>
<label for="login">Login</label>
<input type="text" id="login" name="login" placeholder="Enter your login here" required><br>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password here" required><br>
<input type="submit" value="Log in">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This route work?
url: 'check_user.php',
Try yourDomain/check_user.php, check your directory for a real path
Related
I want the following ajax request to process form data from form with "#next" id:
$(function () {
$("#next").on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'check_user.php',
dataType: 'json',
data: $('form').serialize(),
success: function (response) {
if(response['found'] === 'true') {
location.href = 'index.php';
} else {
alert('Incorrect username or password');
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
});
And here's the file that contains the form:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/auth_style.css">
<title>Authentication</title>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="js/authentication_ajax.js"></script>
<noscript>JS is disabled. Enable js to continue</noscript>
</head>
<body>
<h1 id="header">Enter your data here</h1>
<form id="#next">
<label for="login">Login</label>
<input type="text" id="login" name="login" placeholder="Enter your login here" required><br>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password here" required><br>
<input type="submit" value="Log in">
</form>
<form id="#log_out" action="log_out.php" method="post">
<button type="submit">Log out</button>
</form>
</body>
What's interesting is that when I used just $('form').on('submit', function (e) { it worked just fine.
You have two error the first one is how to use ids, in the id don't use # instead use just the name, and into the selector you can use $('#name').
The second problem is about selector of serialize(), in this case you can use directly e.target like:
$(function() {
$("#next").on('submit', function(e) {
e.preventDefault();
console.log($(e.target).serialize());
/*
$.ajax({
type: 'post',
url: 'check_user.php',
dataType: 'json',
data: $(e.target).serialize(),
success: function (response) {
if(response['found'] === 'true') {
location.href = 'index.php';
} else {
alert('Incorrect username or password');
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});
*/
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="header">Enter your data here</h1>
<form id="next">
<label for="login">Login</label>
<input type="text" id="login" name="login" placeholder="Enter your login here" required><br>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password here" required><br>
<input type="submit" value="Log in">
</form>
<form id="log_out" action="log_out.php" method="post">
<button type="submit">Log out</button>
</form>
I'm using Formsubmit to send contact us form to my email and so far it's working.
But I would like when user send the form it does not redirect it to the source thank you page instead I'd like to display just thank you text on the same page. I'd like to use my own.
So I followed the documentation and I came up with the following :
Unfortunately when I try validate the form button it does not work
<form id="contactForm" action="https://formsubmit.co/el/myemail" method="POST">
<input type="text" name="name">
<input type="phone" name="phone" inputmode="tel">
<input type="hidden" name="_subject" value="Partenaires">
<input type="email" name="email" >
<input type="text" name="message" >
<button class="btn btn-primary border rounded-0 shadow-lg d-lg-flex justify-content-lg-center"
type="submit" name="sendData">Send</button>
<!-- <input type="hidden" name="_next" value="thanks.html">-->
<script type="text/javascript">
var frm = $('#contactForm');
var msg_res ='';
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
method: "POST",
url: "https://formsubmit.co/el/vupawa",
dataType: 'html',
accepts: 'application/json',
data: frm.serialize(),
success: function (response) {
$("#message").html(response);
if(response != msg_res){
msg_res = response; //store new response
alert('New message received');
}
},
error: function (response) {
console.log('An error occurred.');
console.log(response);
}
complete: function(response){
setTimeout(ajax,1000);
}
});
});
});
</script>
Note : that uncommenting this line <input type="hidden" name="_next" value="thanks.html"> will take validate the form and go through another page which is not what I want here.
Any ideas ?
To Prevent Submission You should return false in
frm.submit(function (e) {
return false;
})
Or in form tag
<form onSubmit="return false">
var frm = $('#contactForm');
var msg_res ='';
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
method: "POST",
url: "https://formsubmit.co/el/vupawa",
dataType: 'html',
accepts: 'application/json',
data: frm.serialize(),
success: function (response) {
$("#message").html(response);
if(response != msg_res){
msg_res = response; //store new response
alert('New message received');
}
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
}
});
return false; // here a change
});
<form id="contactForm" action="https://formsubmit.co/el/myemail" method="POST">
<input type="text" name="name">
<input type="phone" name="phone" inputmode="tel">
<input type="hidden" name="_subject" value="Partenaires">
<input type="email" name="email" >
<input type="text" name="message" >
<button class="btn btn-primary border rounded-0 shadow-lg d-lg-flex justify-content-lg-center"
type="submit" name="sendData">Send</button>
<!-- <input type="hidden" name="_next" value="thanks.html">-->
Today I'm trying Web Api 2 Login and Register Actions. I'm using Standard Template from Visual Studio 2015. I created JavaScript Client on web side, but I do not see alerts and registration is not working.
Here is my code:
<div class="form-group">
<div class="input-group">
<input type="email" class="form-control" placeholder="Email" id="email">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="password" class="form-control" placeholder="password" id="password">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="password" class="form-control" placeholder="Password again" id="confirmpassword">
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="submit" id="submit" value="Register" class="btn btn-info">
</div>
#section scripts{
#Scripts.Render("~/bundles/jqueryval")
<script>
$(function () {
$('#submit').click(function (e) {
e.preventDefault();
var data = {
Email: $('#email').val(),
Password: $('#password').val(),
ConfirmPassword: $('#confirmpassword').val()
};
$.ajax({
type: 'POST',
url: '/api/Account/Register',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data)
}).success(function (data) {
alert("Registration success");
}).fail(function (data) {
alert("Error message");
});
});
})
</script>
}
Update:
Here is code for login process:
div class="userInfo" style="display:none;">
<p>You are loged in as: <span class="userName"></span></p>
<input type="button" value="Log out" id="logOut" />
</div>
<div class="loginForm">
<h3>Log in</h3>
<label>Enter email</label><br />
<input type="email" id="emailLogin" /> <br /><br />
<label>Password</label><br />
<input type="password" id="passwordLogin" /><br /><br />
<input type="submit" id="submitLogin" value="Log in" />
</div>
#section scripts{
<script type="text/javascript">
$(function () {
//...........................
var tokenKey = "tokenInfo";
$('#submitLogin').click(function (e) {
e.preventDefault();
var loginData = {
grant_type: 'password',
username: $('#emailLogin').val(),
password: $('#passwordLogin').val()
};
$.ajax({
type: 'POST',
url: '/Token',
data: loginData
}).success(function (data) {
$('.userName').text(data.userName);
$('.userInfo').css('display', 'block');
$('.loginForm').css('display', 'none');
// store sessionStorage auth token
sessionStorage.setItem(tokenKey, data.access_token);
console.log(data.access_token);
}).fail(function (data) {
alert('Error on login');
});
});
$('#logOut').click(function (e) {
e.preventDefault();
sessionStorage.removeItem(tokenKey);
});
})
</script>
}
Update 2
On registration here is F12 console code:
(index):88 Uncaught TypeError: $.ajax(...).success is not a function
at HTMLInputElement.<anonymous> ((index):88)
at HTMLInputElement.dispatch (jquery-3.1.1.js:5201)
at HTMLInputElement.elemData.handle (jquery-3.1.1.js:5009)
(anonymous) # (index):88
dispatch # jquery-3.1.1.js:5201
elemData.handle # jquery-3.1.1.js:5009
But registration passes and I have new record in database. Can anyone explain me what does it mean?
do it like this :
$.ajax({
type: 'POST',
url: '/api/Account/Register',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data)
success: function(html){
alert("Registration success");
}
});
Well, I found that I've used submit type button, it's first misstake - if I want operate request using jquery I've use type="button" instead submit.
Another moment is that json properties is not difined in right case:
var data = {
email: $('#email').val(),
password: $('#password').val(),
confirmPassword: $('#confirmpassword').val()
};
this will be correct
Now about error in console: correct is like #Mustapha answered
for example:
$.ajax({
type: "GET",
url: "/api/rooms",
success: function (rooms) {
}
});
Here is fixed ajax code:
$.ajax({
type: 'POST',
url: '/Token',
data: loginData
success: function(data) {
$('.userName').text(data.userName);
$('.userInfo').css('display', 'block');
$('.loginForm').css('display', 'none');
// store sessionStorage auth token
sessionStorage.setItem(tokenKey, data.access_token);
console.log(data.access_token);
},
error: function (data) {
alert('Error on login');
});
});
Here is, but I've done it using angular :)
Thanks.
This question already has answers here:
Get value of input in jQuery
(5 answers)
Closed 6 years ago.
<div id="divForm" class="fancybox" style="display:none;">
<form id="frm_step1" action="download1.php" method="post">
<label>Enter Email</label>
<input type="email" name="email" id="email" value="" required />
<input type="button" name="submit" id="submit" value="Submit" class="form-submit" target-form="frm_step1" onclick="test();" />
</form>
</div>
function test() {
var email = $('#email').text();
alert(email);
$.ajax({
type: "POST",
dataType: "json",
url: 'download1.php?email' + email,
data: { 'email': email },
success: function(data) {
window.location.href = 'download.php#file';
},
error: function(e) {
alert('Error: ' + e);
}
});
}
I am not able to get email from this. When I put alert it returns blank.
And I always use jQuery/AJAX like this but this time it does not alert email address.
Use .val() instead of .text(). The .val() method is primarily used to get the values of form elements such as input, select and textarea.
$('#email').val();
function test() {
var email = $('#email').val();
alert(email);
$.ajax({
type: "POST",
dataType: "json",
url: 'download1.php?email' + email,
data: { 'email': email },
success: function(data) {
window.location.href = 'download.php#file';
},
error: function(e) {
alert('Error: ' + e);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divForm" class="fancybox">
<form id="frm_step1" action="download1.php" method="post">
<label>Enter Email</label>
<input type="email" name="email" id="email" value="" required />
<input type="button" name="submit" id="submit" value="Submit" class="form-submit" target-form="frm_step1" onclick="test();" />
</form>
</div>
I want to simulate a mobile app. I have a login in page. Is it possible to validate the form and send the user to another page. I am using a single html page for my mobile app. I do not want to use PHP. What would be the best method to take ? getElementbyID ?
<form id="login" name="login" action="" method="">
<div data-role="fieldcontain">
<label for="username"></label>
<input type="email" name="username" id="username" value="" placeholder="Username" ``required="required"/><br />
</div>
<div data-role="fieldcontain">
<label for="password"></label>
<input type="password" name="password" id="password" value="" placeholder="Password"/><br />
</div>
<a data-role="button" type="submit" name="loginSubmit" id="loginSubmit" placeholder="Login" />Login</a>
</form>
try this one using javascript
formData = {
username: $("#username").val(),
password: $("#password").val()
}
if ($("#username").val() == '') {
alert("Enter your username");
} else if ($("#password").val() == '') {
alert("Enter your password");
} else {
$.ajax({
type: 'POST',
contentType: 'application/json',
url: "https://www.example.com/login.php",
dataType: "json",
data: formData,
success: function(data) {
//success handler
},
error: function(data) {
//error handler
}
});
}