Hi i'm trying to use ajax to send a simple username and password to a login.php which would return 2 result being false or true. Problem is, when i click #loginbutton, it seem to be loading but nothing appears after that (no alert or page reload).
here's my script
<script>
$(document).ready(function(){
$('#loginbutton').click(function() {
$('#loginform').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(result) { // on success..
if (result == 'false') {
alert("Login failed.\n\nThe username and password doesn't match or perhaps the username doesn't exist.\n\nMake sure you have checked your email and validate your account.");
}
else if (result == 'true') {
alert("Thank you, the registration was successful. \nWe have sent you an email, please validate your account. \nClick OK and we will redirect you to the homepage.");
window.location.replace("http://127.0.0.1/wordpress/");
}
}
});
return false; // cancel original event to prevent form submitting
});
});
});
</script>
and my login form (i'm trying to integrate this with wordpress)
<?php
$templateDirectory= get_bloginfo('template_directory');
echo'
<form id="loginform" action="'.$templateDirectory.'/login.php" method="post" class="login">
LOGIN
<div class="para"><input type="text" name="uname" placeholder="Username ..." onkeydown="if (event.keyCode == 13) document.getElementById(\'loginform\').submit()"> <br><input type="password" name="pass" placeholder="Password ..." onkeydown="if (event.keyCode == 13) document.getElementById(\'loginform\').submit()"></div>
</form>';
?>
anyone can tell me what's wrong :(
You are adding a form submit handler inside a click handler... it is not required... try
$(document).ready(function () {
$('#loginform').submit(function () { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function (result) { // on success..
if (result == 'false') {
alert("Login failed.\n\nThe username and password doesn't match or perhaps the username doesn't exist.\n\nMake sure you have checked your email and validate your account.");
} else if (result == 'true') {
alert("Thank you, the registration was successful. \nWe have sent you an email, please validate your account. \nClick OK and we will redirect you to the homepage.");
window.location.replace("http://127.0.0.1/wordpress/");
}
}
});
return false; // cancel original event to prevent form submitting
});
});
Related
I am trying to submit a form after validation and confirmation. But after the validation the form is not getting submitted. If I do not validate and confirm then the form is being submitted. What am I doing wrong here? Please tell me how to rectify it.
<div class="button secondary" id="contact_submit">
Create/Update <span class="icon-right icon-check"></span>
</div>
function validateFields() {
#some validation operations
if(validated){
if(operation == "Create"){
$("#contact-form")[0].setAttribute("action", "/contact/create_contact/");
$("#contact-form")[0].setAttribute("method", "POST");
}
else if(operation == "Update"){
$("#contact-form")[0].setAttribute("action", "/contact/" + object_id + "/update_contact/");
$("#contact-form")[0].setAttribute("method", "PATCH");
}
$('#contact-form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: '/oms/getIsPrimaryContact/',
type: 'GET',
data: { object_id: object_id },
success: function(data) {
if ($('.element-contact#is_primary_contact').prop("checked") && !data.is_primary_contact) {
var c = confirm('Are you sure you want to change the primary contact?');
if (c) {
return true;
} else {
return false;
}
}
},
error: function() {} });
});
$('#contact-form').submit();
}
}
$(document).ready(function(){
$("#contact_submit").click(function(e) {
validateFields()
});
});
It just shows the confirmation box and if I click on ok or cancel then also the ajax call is being initiated. If the checkbox is not checked then also the form is not being submitted.
On clicking either button in the confirmation box the form should be submitted or not submitted and if the checkbox is not checked then the form should just be submitted.
But instead ajax call is happening on clicking any button.
Good morning, I want to send to an external site to my two variables by post are username and password and the page I create a cache in the browser when I go to another url already be logged in code what I do is check for through PHP if the data is correct or not, if they are correct returned if, but returns no, if they are correct what I want to do is force the form to send the submit the url, the problem is that everything works fine to the point the submit the form no longer do anything, can you help me?
Thank You
My code:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#submit").click(function () {
var user = $("#user").val();
var pass = $("#pass").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'user=' + user + '&pass=' + pass;
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (result) {
if (result == 'si') {
$("form").attr('action', 'http://xzc.tv/login');
$("form").submit();
//window.open('http://xzc.tv');
alert('entro if');
return true;
} else {
alert('entro else');
}
}
});
return false;
});
});
</script>
</head>
<body>
<form action="" method="post" id="formoid">
<div><label>Usuario:</label><input name="user" placeholder="Usuario" type="text" id="user"></div>
<div><label>Contraseña:</label><input name="pass" placeholder="Contraseña" type="text" id="pass"></div>
<div><input name="enviar" type="submit" value="Enviar" id="submit"></div>
<div><input name="btnPass" type="submit" value="¿Olvidaste tu contraseña?"></div>
</form>
</body>
Just declare the event parameter in the click handler, and then do event.preventDefault(). Doing so, the default submit action is ignored and your code will be executed instead:
$(document).ready(function () {
$("#submit").click(function (e) {
e.preventDefault();
var user = $("#user").val();
var pass = $("#pass").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'user=' + user + '&pass=' + pass;
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "index.php",
data: dataString,
cache: false,
success: function (result) {
if (result == 'si') {
$("form").attr('action', 'http://xzc.tv/login');
$("form").submit();
//window.open('http://xzc.tv');
alert('entro if');
return true;
} else {
alert('entro else');
}
}
});
return false;
});
});
checkout the result whether its returning "si" if its correct
try
changing code
from
$("form").attr('action', 'http://xzc.tv/login');
$("form").submit();
to
$("#formoid").attr('action', 'http://xzc.tv/login');
$("#form").submit();
try using id of form
To submit try the following
$("form#formoid").submit();
$("form#formoid")[0].submit();
$("form#formoid").submit(function(e) {});
Hi I'am trying to make HTML form, and need to validate it before executing the form action. But the AJAX respond always returns a blank message?
$(function(){
$("#ajax-payment-form input[type='submit']").click(function(e) {
// Prevent form submission
e.preventDefault();
// Serialize data, make AJAX call
var str = $(this).serialize();
$.ajax({
type: "POST",
url: templateDir+"/payment_form/payment_process.php",
data: str,
context: this
}).done(function(msg) {
if(msg == 'OK') {
console.log('Validation passed, will submit form');
$(this).closest('form').submit();
} else {
console.log(msg);
}
}).fail(function() {
// Catch ajax errors here
console.log('AJAX error');
});
});
});
PHP:
$post = (!empty($_POST)) ? true : false;
if ($post) {
$orderid = stripslashes($_POST['orderid']);
$amount = stripslashes($_POST['amount']);
$betingelser = stripslashes($_POST['betingelser']);
$error = ''; // Check ordreid
if (!$orderid) {
$error. = 'Venligst indtast dit ordreid.<br />';
} // Check amount
if (!$amount) {
$error. = 'Venligst indtast et beløb.<br />';
}
if (!$error) {
echo 'OK';
} else {
echo '<div class="notification_error">'.$error.
'</div>';
}
}
Can anyone tell me what wrong?
You're in the click handler of a submit button. You're calling $(this).serialize(), where this is that submit button. Calling serialize on the submit button is going to return an empty string.
So, you're not passing any data to the server. The first thing you do server-side is check empty($_POST), which it will be, so if ($post) is false, and none of your server-side code is eve executed.
You need to serialize the form, not the submit button.
A simple solution would be to serialize the form itself....
str = $('"#ajax-payment-form').serialize()
but really, the larger problem is that you're binding to the click of the submit button, instead of to the submit event on the form itself.
Instead of this rather convoluted way of handling form submits...
$("#ajax-payment-form input[type='submit']").click(function(e) {
Just do this:
$("#ajax-payment-form").submit(function (e) {
try this in jquery:
$.ajax({
type: "POST",
url: templateDir+"/payment_form/payment_process.php",
data: str,
context: this,
success: function(msg){
if(msg == 'OK') {
console.log('Validation passed, will submit form');
$(this).closest('form').submit();
}
else {
console.log(msg);
}
}
error: function(msg){
// if call fails or any error occurs
}
});
Well, the problem is not new, as I saw (really surf a lot), but still can not find solution for myself.
Description of problem:
Have local Web server - XAMPP;
Firefox 29.0.1
And trying to send POST with $.ajax
function checkUser(){
$.ajax({
type: 'POST',
url: 'ajax/checkUser.php',
data: 'uname='+$("#username").val()+'&pword='+$("#password").val(),
success: function(){
someNewFunc();
},
});
};
This function I'm calling with:
$(document).ready(function(){
$(".button.postfix.login").on("click", function(){
if (($("#username").val() != "") && ($("#password").val() != "")) {
hide(); <-- hide pop ups about empty field
checkUser();
} else {$("#empty").show();} <-- pop ups
});
});
And here code of page with elements:
<input id="username" type="text" placeholder="Username" />
<input id="password" type="password" placeholder="Password" />
<a class="button postfix login" href="#"
onclick="event.preventDefault();">Sign in</a>
I guess that data are going out, but the page checkUser.php doesn't get anything.
What am I doing wrong?
P.S. checkUser.php:
<?php
print_r($_POST);
?>
Result - Array ( )
P.P.S. By the way, if POST change to GET it's working, but need to be POST
$(document).ready(function(){
$(".button.postfix.login").on("click", function() {
var username = $("#username").val();
var password = $("#password").val();
if ((username != "") && (password != "")) {
hide(); <-- hide pop ups about empty field
checkUser(username, password); // Pass the variables here as a parameter
} else {
$("#empty").show();} <-- pop ups
});
// Put the parameters here
function checkUser(username, password) {
$.ajax({
type: 'POST',
url: 'ajax/checkUser.php',
data: { username:username, password:password} //It would be best to put it like that, make it the same name so it wouldn't be confusing
success: function(data){
alert(data);
},
});
};
});
So when you're gonna call it on php
$username = $_POST['username'];
echo $username;
Does your someNewFunc callback fire? Do you see the HTTP AJAX request in the developer console in Firefox?
Try sending your post data as a dictionary to $.ajax:
$.ajax({
type: 'POST',
data: {
uname: $("#username").val(),
pword: $("#password").val()
}
});
I have a website with a footer in which there's a small form. There's only two things in this form: an input textbox for taking emails, and a submit button.
When user presses the Submit button, no redirection takes place, and instead an AJAX call is done to add the email to a Database table, and show the appropriate message using jQuery slideDown().
The problem is that even though no redirection to another page actually happens, still when I refresh the page sometimes, I get a browser alert that this may resubmit data. I doesn't always come, only sometimes. Don't know why.
How can I completely stop this error from coming ?
JSFiddle (See note below): http://jsfiddle.net/ahmadka/7cZZY/1/
Please note that because the footer_subscribe.php file is unaccessible from within JSFiddle, I don't get the form resubmission error here .. However the error does sometimes show up when you refresh the original actual page:
Actual page (Form is in footer section at the bottom of page): http://bit.ly/15eb2Cx
HTML Code:
<section class="subscribe">
<form class="form-wrapper cf" method="post">
<input name="email" placeholder="Enter your email here..." />
<button id="submitBtn" type="submit">Subscribe</button>
</form>
<p></p>
</section>
JavaScript Code:
$(function () {
$("#submitBtn").click(function (event) {
event.preventDefault();
event.returnValue = false;
var inputEmail = $(".subscribe input[name=email]").val();
var inputEmailTrimmed = $.trim(inputEmail);
if (inputEmail == "") {
$(".subscribe p").html("Please enter an email address.").slideDown();
} else if (inputEmailTrimmed == "" && inputEmail != inputEmailTrimmed) {
$(".subscribe p").html("Simply entering spaces won't cut it :)").slideDown();
} else {
$.ajax({
type: "POST",
url: "footer_subscribe.php",
data: {
email: inputEmail
},
success: function (data) {
if (data == "successful") {
$(".subscribe p").html("Thanks for your interest!").slideDown();
} else if (data == "already_subscribed") {
$(".subscribe p").html("This email is already subscribed.").slideDown();
} else if (data == "invalid_email") {
$(".subscribe p").html("This email is invalid.").slideDown();
} else {
$(".subscribe p").html("Something went wrong. Please try again later.").slideDown();
}
},
error: function () {
$(".subscribe p").html("Subscription is not available.").slideDown();
}
});
}
});
});