success in my AJAX call doesn't trigger at all, and I can't figure out why. None of the alerts specified in the AJAX file are popping up.
The form:
<form onsubmit="check_reg();return false;" method="post" name="reg_form" id="reg">
<label class="error" id="reg_error"></label>
<label for="login_reg">Login</label>
<input type="text" name="login" id="login_reg" placeholder="Login">
<label for="email_reg">Email</label>
<input type="text" name="email" id="email_reg" placeholder="Email">
<label for="haslo_reg">Password</label>
<input type="password" name="password" id="pass_reg" placeholder="Password">
<button type="submit">Register</button>
</form>
reg_script.php:
if (!empty($_POST['login']) && !empty($_POST['password']) && !empty($_POST['email'])) {
$login = $mysqli->real_escape_string($_POST['login']);
$password = $mysqli->real_escape_string($_POST['password']);
$email = $mysqli->real_escape_string($_POST['email']);
if ($mysqli->query("INSERT INTO users (login, password, email) VALUES('$login', '$password', '$email')")) {
echo "ok";
}
else {
echo "error";
}
}
else {
echo "empty";
}
AJAX
function check_reg() {
$.ajax({
url: 'reg_script.php',
type: "POST",
data: "login=" + $('#login_reg').val() + "&password=" + $('#pass_reg').val() + "&email=" + $('#email_reg').val(),
success: function(result) {
if (result == 'ok') {
alert('ok');
}
else if (result == 'error') {
alert('error');
}
else if (result == 'empty') {
alert('empty');
}
},
});
}
Any ideas what the problem might be?
EDIT: I should've added that I used this tutorial: http://developertips.net/post/display/web/3/dynamic-login-form-with-ajax-php/ and managed to get the login form working just fine, it's just the registration form that's acting up.
Change
<form onsubmit="check_reg();return false;" method="post" name="reg_form" id="reg">
<label class="error" id="reg_error"></label>
<label for="login_reg">Login</label>
<input type="text" name="login" id="login_reg" placeholder="Login">
<label for="email_reg">Email</label>
<input type="text" name="email" id="email_reg" placeholder="Email">
<label for="haslo_reg">Password</label>
<input type="password" name="password" id="pass_reg" placeholder="Password">
<button type="submit">Register</button>
</form>
to:
<form>
<label class="error" id="reg_error"></label>
<label for="login_reg">Login</label>
<input type="text" name="login" id="login_reg" placeholder="Login">
<label for="email_reg">Email</label>
<input type="text" name="email" id="email_reg" placeholder="Email">
<label for="haslo_reg">Password</label>
<input type="password" name="password" id="pass_reg" placeholder="Password">
<input type="button" onclick="check_reg()">Register</button>
</form>
That way, your HTML file will call your check_reg() which then calls your php-file. You don't need method=post and so on in HTML-file. All this information is already in your function.
Btw, your data-attribute in check_reg() function, I recommend that you change that to serializeArray() instead.
One more thing I just realized:
success: function(result) {
The result-variable contains the error-messages form the serverside (php). so all you have to do is:
success: function(result) {
alert(result);
Here you are using POST request, but sending data as querystring as used for GET request.
Use data in form of object:
data: {'login': $('#login_reg').val() ,'password':$('#pass_reg').val() ,'email':$('#email_reg').val()}
You can also check with print_r($_POST) in your php file, so that you can see, whether data is posted or not.
So use follwing code in ajax:
function check_reg() {
$.ajax({
url: 'reg_script.php',
type: "POST",
data: {'login': $('#login_reg').val() ,'password':$('#pass_reg').val() ,'email':$('#email_reg').val()},
success: function(result) {
if (result == 'ok') {
alert('ok');
}
else if (result == 'error') {
alert('error');
}
else if (result == 'empty') {
alert('empty');
}
},
});
}
Related
Could you, please, help me with one task. I need to make a ajax request for several forms. But I have always gotten an error 405
jquery.min.js:4 POST http://127.0.0.1:5500/formx.php 405 (Method Not
Allowed)
<form method="post" class="x_order_form validate">
<input value="" name="client" placeholder="Your name" required="" type="text" class="-metrika-nokeys">
<input value="" name="tel" id="phone" placeholder="Your phone number" required="" type="text" class="-metrika-nokeys">
<input value="" name="address" placeholder="Your address" required="" type="text" class="-metrika-nokeys">
<button>ORDER NOW</button>
</form>
JS
$(document).ready(function() {
$('form').submit(function (event) {
event.preventDefault();
var form = $(this);
$.ajax({
url: 'formx.php',
type: 'POST',
dataType: "html",
data: form.serialize(),
success: function(response) {
alert("success");
},
error: function(response) {
alert("failure");
}
});
return false;
})
});
PHP
<?php
if (isset($_POST["client"]) && isset($_POST["tel"]) && isset($_POST["address"])) {
$result = array(
'client' => $_POST["client"],
'tel' => $_POST["tel"],
'address' => $_POST["address"]
);
echo json_encode($result);
}
Html input:
<input type="text" id="email" name="email" class="inputbox" placeholder="Email" required="required" />
<input type="password" id="pass" name="pass" class="inputbox" placeholder="Password" required="required" />
<button class="btn btn-red" onclick="logincheck();">LOG IN</button>
Javascripts:
function logincheck(){
var e = document.getElementById("email").value;
p = $("#pass").val();
console.log(e);
if($("#email").val()==""||$("#pass").val()=="")
alert("Email and password can't be empty");
else {
$.ajax({
url : "http://localhost/dsbd/loginprocess.php",
type: "POST",
data : {
email : e,
password: p
},
dataType: 'text',
success: function (data) {
alert(data);
}
});
}
}
e and p variables are returning empty string (while printing on console).
Added the code on jsfiddle
Please help me to find out the problem.
In my opionion you just have to change your script (that is half javascript and half jquery with also some errors) in order to have a more clear code...
Here you have a working fiddle for jquery:
$(document).ready(function(){
$('#my-login-button').click(function() {
if($('#email').val().length == 0 || $("#pass").val().length == 0) {
alert("Email and password can't be empty");
} else {
$.ajax({
url : "http://localhost/dsbd/loginprocess.php",
type: "POST",
data : {
email : $('#email').val(),
password: $("#pass").val()
},
dataType: 'text',
success: function (data) {
alert(data);
}
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="email" name="email" class="inputbox" placeholder="Email" required="required" />
<input type="password" id="pass" name="pass" class="inputbox" placeholder="Password" required="required" />
<button id="my-login-button" class="btn btn-red">LOG IN</button>
And here you have a javascript solution:
function logincheck() {
var e = document.getElementById("email").value;
var p = document.getElementById("pass").value;
console.log(e);
if(e.length == 0 && p.length == 0) {
alert("Email and password can't be empty");
} else {
$.ajax({
url : "http://localhost/dsbd/loginprocess.php",
type: "POST",
data : {
email : e,
password: p
},
dataType: 'text',
success: function (data) {
alert(data);
}
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="email" name="email" class="inputbox" placeholder="Email" required="required" />
<input type="password" id="pass" name="pass" class="inputbox" placeholder="Password" required="required" />
<button id="my-login-button" onclick="logincheck()" class="btn btn-red">LOG IN</button>
Explanation :
Here's the situation goes . I'm searching a way to call another Ajax function when the data is success but I'm unable to do due to unknown circumstances.
Code:
---HTML Form :
<form accept-charset="utf-8" id="contactForm1" style="margin-top:;" action="" method="post">
<input class="wf-input wf-req wf-valid__email" type="text" name="email"
data-placeholder="yes" id="email" value="Enter Your Email Here" onfocus="
if (this.value == 'Enter Your Email Here')
{ this.value = ''; }" onblur="if (this.value == '')
{ this.value='Enter Your Email Here';} " style="margin-top:;">
</input>
<br />
<input type="submit" class="wf-button" name="submit1" value=" " style="display: inline !important; margin-top:-10px !important;"></input>
</form>
----Ajax Code :
$(function() {
$('.wf-button').click(function (e) {
e.preventDefault();
var email = $('#email').val();
var frm = this;
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'check.php',
data: {
email: email
},
success: function (data) {
if (data.status == 'success') {
// Need to place it here
frm.submit();
} else {
alert('The e-mail address entered is not valid.');
}
}
});
});
---Another form with HTML in the same page:-
<form method="post" id ="aweber" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="947846900" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist3599001" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou.htm?m=default" id="redirect_37ecf313df3b6f27b92c34c2c00ef203" />
<input type="hidden" name="meta_adtracking" value="ibb_test" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-947846900" class="af-form"><div id="af-body-947846900" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-66127140">Email: </label>
<div class="af-textWrap"><input class="text" id="awf_field-66127140" type="text" name="email" value="" />
</div><div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<<input name="submitaw" id="submitaw" class="wf-button" type="submit" value="Submit" tabindex="501" />
<div class="af-clear"></div>
</div>
</div>
</div>
<div style="display: none;"><img src="http://forms.aweber.com/form/displays.htm?id=nCzsHCxsnAwM" alt="" /></div>
</form>
Scenarion :
I would when the Ajax trigger when the user click the submit button for the ID ContactForm1.
Before submitting the form , I want the Ajax to send the same value to the other form in the same page and click submit .
How?
try this:
$('#aweber').submit(function (e) {
e.preventDefault();
var email = $('#email').val();
var frm = this;
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'check.php',
data: {
email: email
},
success: function (data) {alert('first form submitted');
if (data.status == 'success') {
frm.submit();
} else {
alert('The e-mail address entered is not valid.');
}
}
});
});
submit form if success always reload page.
Using ajax post to server.
You can try it:
$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).then( myFunc, myFailure );
http://api.jquery.com/jquery.when/
When I hit the submit button at the first time these codes works. But when I hit the second time to the button even if email and password values were true nothing happens and the user can not login. But if I write the true values at the first time, it works and user can login. So I figured the cause of this problem is about the "return false;" phrase. But if I remove return false; phrase, the form posts and ajax codes become useless. I must avoid the posting without ajax.
jQuery:
<script>
$(document).ready(function(){
$('#submit-btn').click(function(){
var email = $('#email').val();
email = $.trim(email);
var password = $('#password').val();
password = $.trim(password);
if(email == "") {
$('#email').css({
"background-color": "#FF7070"
});
$('#box1').css({
"visibility": "visible"
});
return false;
}else if(password == "") {
$('#password').css({
"background-color": "#FF7070"
});
$('#box2').css({
"visibility": "visible"
});
return false;
}else{
$.ajax({
type: "POST",
url: "ajax.php",
data: $('#loginform').serialize(),
timeout: 5000,
success: function(c) {
if(c == "no") {
$('#box3').css({
"visibility": "visible"
});
return false;
} else if (c == "ok") {
window.location.href = "homepage.php";
}
},
error: function(a, b) {
if (b == "timeout") {
alert("Error: #101");
}
},
statusCode: {
404: function(){
alert("Error: #102")
}
}
});
}
return false;
})
});
</script>
Html:
<form name="loginform" id="loginform" method="post" action="">
<div class="field">
<input type="text" maxlength="40" id="email" name="email" placeholder="E-mail">
</div>
<div class="field">
<input type="password" id="password" name="password" placeholder="Password" autocomplete="off">
</div>
<div class="field">
<input type="submit" id="submit-btn" value="Log in">
</div>
<div class="keep-login">
<label for="remember">
<input type="checkbox" name="remember" id="remember" checked="checked">Remember me
</label>
<span>Forgot password?</span>
</div>
</form>
PHP:
if(Input::exists()) {
if(Token::check(Input::get('token'))) {
$validate = new Validate();
$validation = $validate->check($_POST, array(
'email' => array('required' => true),
'password' => array('required' => true)
));
if($validation->passed()) {
$user = new User();
$remember = (Input::get('remember') === 'on') ? true : false;
$login = $user->login(Input::get('email'), Input::get('password'), $remember);
if($login) {
echo "ok";
} else {
echo "no";
}
} else {
echo "no";
}
}
}
First, remove the method and action attributes of the form element. You can remove the form tag altogether but if you want to support non-javascript submissions, you'll need the form tag (however, the original question did not ask for this). You're 'submitting' the form via jQuery, so you don't need a method and an action on a form tag.
Input type="password" never autocompletes, so you don't need that attribute.
I also added an error div. Here is your new html:
<div id="error" style="display: none;">Login failed.</div>
<form>
<div class="field">
<input type="text" maxlength="40" id="email" name="email" placeholder="E-mail">
</div>
<div class="field">
<input type="password" id="password" name="password" placeholder="Password">
</div>
<div class="field">
<input type="submit" id="submit-btn" value="Log in">
</div>
<div class="keep-login">
<label for="remember">
<input type="checkbox" name="remember" id="remember" checked="checked">Remember me
</label>
<span>Forgot password?</span>
</div>
</form>
Replace your $.ajax statement with a $.post statement, and simply your logic.
$.post("ajax.php", { e: email, p: password }, function (data) {
if (data == "ok") window.location.href = "homepage.php";
else $("#error").slideDown().delay(3000).slideUp(); // I added div#error with "Failed to Login" message in the html above
});
This code will now redirect if the returned data is "ok"; otherwise, it will show div#error (again, this is in the html above), delay for 3 seconds, and then hide the message.
The return false; is unnecessary in each instance in your code above because after each conditional, the code ends - there is no other code to prevent from executing (which is why you would use return false; in this context).
You can do the $.trim on the same line as when you assign the variables, like I did with the slideUp, delay, and slideDown.
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
}
});
}