Develop Reference

Wordpress Login Form - How to show error message without reload page

I'm building my own custom login page for wordress. The login form seems to work, however I would like to be able to customize the error message more specifically.
When the login credentials are incorrect and you log in, the error message appears only after the page has reloaded. What I would like to do is show the error message without reloading the page.
I searched on stackoverflow and wordpress reference but couldn't find a solution for my case. Anyone have a suggestion on how I might achieve my goal?
Thanks for any replies, I appreciate any help.
Update 2
I thank the users who helped me with their answers, they were very helpful and I really appreciate it. I literally spent all day on this problem, I finally achieved my goal. The ajax request works and the message is displayed as I wanted. I had to go through a lot of things several times. However I leave the updated code for anyone who needs help.
My custom_login_page.php file
This contains the html structure, the form and the script that executes the ajax requests. Put the file in your active child theme. In my case I called the custom_login_page.php file. For this to be read by wordpress you need to create a new page and select it as a template.
<?php
// Template Name: Custom Login Page
?>
<?php get_header(); ?>
<div class="container_main">
<?php if (is_user_logged_in()) {
?><span>Sei gia loggato</span><?php // If the user is logged in, it shows the message below
} else { // otherwise, if the user is not logged in, it shows the login form
?>
<form id="login" action="login" method="post">
<!-- Message error -->
<p class="status"></p>
<!-- Username -->
<label for="username">Username</label>
<input id="username" type="text" name="username">
<!-- Password -->
<label for="password">Password</label>
<input id="password" type="password" name="password">
<!-- Link Recover -->
<a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Lost your password?</a>
<!-- Submit Button -->
<input class="submit_button" type="submit" value="Login" name="submit">
<?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>
<?php
} ?>
</div>
<?php get_footer(); ?>
<script>
jQuery(document).ready(function($) {
// Perform AJAX login on form submit
$('form#login').on('submit', function(e){
$('form#login p.status').show().text(ajax_login_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_login_object.ajaxurl,
data: {
'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
'username': $('form#login #username').val(),
'password': $('form#login #password').val(),
'security': $('form#login #security').val() },
success: function(data){
$('form#login p.status').text(data.message);
if (data.loggedin == true){
document.location.href = ajax_login_object.redirecturl;
}
}
});
e.preventDefault();
});
});
</script>
My functions.php file
In functions.php I put the functions linked to the form and some redirects useful when doing logine logout.
/* Redirect Custom Login Page */
function redirect_custom_login_page() {
wp_redirect(site_url() . "/login");
exit();
}
add_action("wp_logout", "redirect_custom_login_page");
/* Redirect wp-admin & wp-login php */
add_action("init","fn_redirect_wp_admin");
function fn_redirect_wp_admin(){
global $pagenow;
if($pagenow=="wp-login.php" && $_GET['action'] !="logout"){
wp_redirect(site_url()."/login");
exit();
}
}
/* Ajax Form Login */
function ajax_login_init(){
wp_register_script('ajax-login-script', get_template_directory_uri() . '/ajax-login-script.js', array('jquery') );
wp_enqueue_script('ajax-login-script');
wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'redirecturl' => home_url(),
'loadingmessage' => __('Sending user info, please wait...')
));
// Enable the user with no privileges to run ajax_login() in AJAX
add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}
// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
add_action('init', 'ajax_login_init');
}
function ajax_login(){
// First check the nonce, if it fails the function will break
check_ajax_referer( 'ajax-login-nonce', 'security' );
// Nonce is checked, get the POST data and sign user on
$info = array();
$info['user_login'] = $_POST['username'];
$info['user_password'] = $_POST['password'];
$info['remember'] = true;
$user_signon = wp_signon( $info, false );
if ( is_wp_error($user_signon) ){
echo json_encode(array('loggedin'=>false, 'message'=>__('Wrong username or password.')));
} else {
echo json_encode(array('loggedin'=>true, 'message'=>__('Login successful, redirecting...')));
}
die();
}

Introduction
I will briefly describe how HTML forms work, why your page is reloading and how you can communicate with the server without reloading your page, finally, how you can update your page based on this communication.
How HTML forms work
When you create a form tag and a structure into it, with a button of submit type inside of it, specifying an action (or using the default), then, upon clicking on the button mentioned earlier, your form is submitted. On submitting your form, all elements inside the form, having a name attribute (i.e. name="somename") is picked up and a request will be sent to the specified action (defaulting to the same page), where the form data will be represented as key-value pairs, the keys being the names of your form elements and the values being the values of the elements.
Upon form submit, your browser will send a request to the target of the form. The action of the form (if valid) will pick up the request, handle it and respond to your browser.
When the browser receives this response, it will display it as the content of the page. The users experience this behavior as a page reload. You are bothered with this behavior, as you described in your question and you would prefer to have a less obtrusive, smoother behavior. This is possible with AJAX requests.
AJAX
AJAX requests are well-documented, so, if you are unfamiliar with them - which surely is the case -, then I advise to read the content of the link I have given you above and gain some experience with AJAX. If you get stuck with it, let me know your blocker, but, for now, I will assume that the tutorials clarify the matter for you and in a reasonable amount of time you will successfully learn how to tackle them.
You can also communicate with your server (without page reload) with push notifications or websockets, but since this is a request-response use-case, I strongly advise the use of AJAX. Since AJAX stands for Asynchronous Javascript and XML, the asynchronous part suggests that you are calling an asynchronous function that you do not wait for, that is, your request is being sent to the server and there is an event to handle the server response, upon which you can specify function(s) to be executed, known as the callback(s).
If you are going to have an AJAX request, then you do not necessarily need the form and the submit button is definitely not needed, instead, you could use an input type="button" with a click event handler that will pick up the data and send the request.
How to handle server responses
The simplest way to handle the requests is to just take the (HTML) response and refresh your page content for the regions you want to update (without page reload, of course). But this is not necessarily ideal.
If your structure does not change, but your content does, then it makes much more sense to change your server code to just send the content as JSON (Javascript Object Notation) and update only the content of your page. This approach ensures that your server does not have to send very large, superfluous responses to your browser if it's unnecessary. Instead, it just sends the data, reducing the load of your server's networking and, as a result, making your server more scalable. But this means that your browser will have to update the content itself, which is no longer automatic and you need to code the behavior in a client-side language, such as Javascript.
How you should proceed
Since all this is obviously new to you, I advise you to start with the simplest approach, to have some success that will boost your morale, that is, at first stage, send the request as AJAX, the server should only respond with the inner HTML of the body tag, rather than the whole HTML and you could do a
document.body.innerHTML = response;
in your callback.
The reasonable expectation is that your page is not reloaded by the browser, but it is refreshed. If you reach this stage, then you might decide that it is good-enough for you, or you can decide to improve it, change the server-side to respond to the AJAX request with a JSON and implement some client-side functions to handle the request and refresh the content.
I of course advise the latter, but you of course have the liberty of choice here.
Now, let's understand what a request method is.
A GET request is a request defined by a URL (Unified Resource Locator) and the parameters are passed as GET parameters, that is, inside the URL, after the ? mark, like
https://www.yourpage.com?yourparameter=yourvalue&yoursecondparameter=yoursecondvalue
A POST request is a request where POST parameters can also be defined. In PHP you have neat ways to determine the request type, see this excellent page: Detecting request type in PHP (GET, POST, PUT or DELETE)
Now, when you load the page for the first time, a GET request is being send. Once the form is submitted (via AJAX), you need to specify that you are sending a POST request and then the server will know that it will need to send only the data (rather than the HTML) as a response.

What you want isn't achievable using PHP. As quick explanation, PHP is a server side scriptiong language, which means that only the server can execute your code. So whenever you press Login is has to go to the server (doing a request) and then you'll get back the new HTML from your server.
How to do this
Is quite an investment but if you really want to learn or build this you should look into Javascript AJAX requests. In a nutshell, AJAX is how you communicate with your server without any page reload.
Alternative
You could also try to use some plugins that try to do this. I have no experience with them but here's one that claims to do exactly what you want: https://nl.wordpress.org/plugins/login-with-ajax/
If that one doesn't fit your needs, you can at least continue searching using the term AJAX.
I hope this helps :)
TLDR
With PHP, you can't. Use an AJAX WordPress plugin or build a custom solution using Javascript and AJAX.

Converting a button that executes PHP to jQuery/Ajax

I'm trying to write a feature for my Fantasy Football league that allows players to trade with each other. Functionally it all works fine, but as I've coded it all in PHP I have an annoying problem where any time a button is pressed the page is effectively refreshed twice. I've read that I can get around this with jQuery and Ajax but sadly I don't really have any experience with either.
Here's a small section of the code that allows logged in users to withdraw a trade offer they have made:
echo "<input type='submit' id='btn-danger' name='withdraw".$trade_id."' value='Withdraw'>";
if($_POST && isset($_POST['withdraw'.$trade_id])) {
$withdraw = $link->prepare("DELETE FROM trade_id_offers_out WHERE trade_id_offer_id = ".$trade_id);
$withdraw->execute();
}
This creates a "Withdraw" button for each trade offer they have sent out and has a unique name of "withdraw" plus whatever number the offer is in the SQL table.
As I say functionally it works perfectly fine. But it refreshes the page twice and I'm wondering how I can take this code and turn it into something a little more practical?
Many thanks for your time.

First you should make sure you have included jQuery into your page html before any other jQuery (there are plenty of tutorials out there).
Second you need to give the submit button a class so you can select it using a jQuery selector. Change the php code of the button to this:
echo "<input type='submit' id='btn-danger' class='withdrawTradeBtn' name='withdraw".$trade_id."' value='Withdraw'>";
Finally you would make a ajax post request to your url (same url as your page in this case). The js would look something like this and would need to be placed before the end of the html body tag or after all your buttons are rendered:
(Note: I have not tested this but it should be pretty close to what you are after)
<script>
//we need to wait for the page to be loaded in the users browser
$(document).ready(function(){
//we are selecting all the buttons with the class withdrawTradeBtn
//we are binding to the click event so whenever any of the buttons are pressed the code will be ran.
$('.withdrawTradeBtn').on('click', function(e){
//we need to prevent the button from actually reloading the page
e.preventDefault();
//now we need to make a ajax post request to the url
$.post(
'/your/url', //the url to make the post
{$(this).attr('name'):'Withdraw'}, //the submitted data
function(data, status, jqXHR) {// success callback
//here is were you would delete the button or whatever
}
);
});
});
</script>
Most likely you would want to delete the trade entry from the html. You would do that in the success callback of the ajax post. I cant really add anything here because I don't know what your html structure looks like.
Hope this helps, let me know if you need any more help!

PHP Private Chat Long polling integration

i've got a simple question here,
Ive got this form thats inside my chat html:
<form action="../addchat.php" method="POST" enctype="multipart/form-data">
<textarea id="textarea" style="border-radius:0px; border:none; background-color:rgb(243,243,243); min-height:100px;"name="comment" rows="4" cols="50"></textarea><br>
<input height="25px" width="20px" style="float:right;" type="image" src="../arrow.png" name="submit" value="Comment">
</form>
This form is for users to submit their chat messages. and after which, form post will direct the information to addchat.php, which contains the following code:
<?php
ob_start();
session_start();
include_once("config.php");
$reply=mysqli_real_escape_string($mysqli,$_POST['comment']);
$cid=mysqli_real_escape_string($mysqli,$_SESSION['cid']);
$uid=mysqli_real_escape_string($mysqli,$_SESSION['userid']);
$time=time();
$ip=$_SERVER['REMOTE_ADDR'];
$q= mysqli_query($mysqli,"INSERT INTO conversation_reply (user_id_fk,reply,ip,time,c_id_fk) VALUES ('$uid','$reply','$ip','$time','$cid')") or die(mysqli_error($mysqli));
?>
This script obviously adds the data into the tables and after which another script on the chat html page will display out the chat messages.
However, the current issue is that firstly, after user click submit, page will redirect to another blank page and show success message. Secondly, user need to refresh to see the new chat messages.
This chat application is a private chat (similar to Facebook), so not very sure how to do it? Would appreciate some help:)

If you do not want it to redirect. Move the PHP code to the same file as the form. You could use include for this.
Then make the form action="".
Then around the PHP, you need to check that the POST exists so it only runs when the form submits:
e.g.
if (!empty($_POST))
As for the refresh problem. You may want to look into AJAX or even socket.io.

It is not simple to answer this question, as it belongs to how hard/complex you want in your chat application.
If you don't want to get redirect when submitting, you can use AJAX to post the form Submit a form using jQuery
If you don't want to refresh the page to load new chat messages, you can use AJAX call to get new messages in interval of time http://www.w3schools.com/jsref/met_win_setinterval.asp.
If you want to receive new chat messages at the time they are sent from sender (who is chatting with current user), you might consider about using push server like NodeJS (http://nodejs.org) or Socket.io (http://socket.io/)

I wouldn't use PHP for that purpose if I were you, or if you do, you'll need lot of ajax to make this chat working.
ajax request to send... ajax request every n milliseconds to fetch new messages. you should also use an api instead of a webpage to interact with your server-side app. Your server will need to be highy available and respond really fast.
You should choose a language that support websockets (take a look at python with django, for example, or java, or whatever...) if you want this chat to be really efficient.
While writing these lines I found something (Ratchet library)to use websocket in php (I don't know how it works but maybe you'll get problems with the max_execution_time of your server if it works with a "while true" loop)
Edit: as Tuan Duong suggests, nodejs is another good alternative

standard html form submissions always will submit (and redirect) to the page defined in the action attribute of the form. with jquery you can prevent this default behavior plus send the form-data with ajax:
$("form").on("submit", function(event){
event.preventDefault();
$.ajax({
url: "../addchat.php",
type: "POST",
cache: false,
data: {
comment: $("#textarea").text()
},
success: function(data){
//something you could do on success of your ajax call.
//you might not need it in this case.
}
});
});
secondly, you'll need some procedure that refreshes your output-area automatically. create a div in your html to show the chat-output:
<div id="chat_content_div"></div>
then you'll have to do something like this in your javascript to refresh it automatically:
var refresh_time = 500; // chat refresh time in ms
setInterval(function(){
$.ajax({
url: "chat_output.php",
type: "GET",
dataType: "html",
cache: false,
success: function(data){
$("#chat_content_div").html(data);
}
});
}, refresh_time);
in the "chat_output.php" you only display (html) data from the database to be displayed in this div.

php echo javascript function after an ajax call doesnt work?

So I ran into a problem and I couldn't really find a good solution anywhere. And I'm sure more people run into this problem.
I tried to have an Ajax script call to a php-script which echoes a JavaScript function again but this function wont run or activate. It however does show up in the code if you do inspect element.
So the html and Ajax is as follows. Its dummy code since my own is a bit more complicated. so any syntax errors I made here are not the solution since this works for other parts of my code.
<html><headbodyetc>
<div id='change'>
//is supposed to alert or call another js function after
//verifying something with a database for instance.
<button type='button' onclick='ajaxbelow();'>alert</button>
</div>
<script type='text/javascript'>
function ajaxbelow(){
//AJAX code as found on w3schools.com/php/php_ajax_php.asp
//calls the change.php
</script>
</etc></html>
The php code that gets called is very simple.
//This shows up in the html-code after clicking the button but doesnt run.
echo"<script type='text/javascript'>alert('doenst work?')</script>";
So I am looking for a solution which makes me able to run a JavaScript or jquery function after an Ajax call, or the main reason why this doesn't work. Since I couldn't find it.
Inb4 why call the alert via php? Because I need to verify something first with the db on the server-side in my actual code.

So after combining and testing some of the comments I figured out my own answer.
You cant create new javascript within the php echo. You can however echo an onload that calls an existing function. Onload only works for the following tags:
"body", "frame", "frameset", "iframe", "img", "input type="image", "link", "script", "style".
However in this case after testing some of them like "script" and "img" it still didn't work with all tags, but it did with the "style" tag. I didnt test all other tags though.
So that changed my code to:
<html><headbodyetc>
<div id='change'>
//is supposed to alert or call another js function after
//verifying something with a database for instance.
<button type='button' onclick='ajaxbelow();'>alert</button>
</div>
<script type='text/javascript'>
//function to be called
function test(){
alert("now it works");
}
function ajaxbelow(){
//AJAX code as found on w3schools.com/php/php_ajax_php.asp
//calls the change.php
</script>
</etc></html>
and the php-code will then become
echo"<style onload='test();'></style>";
and now it does run the function.
edit this doesn't seem to work for IE, looking for a solution right now.
^
EDIT: By default, IE Browsers "DENY" the ability of scripts to throw prompts. So to enable this functionality, you must go to [Tools/ Internet Options/ Security / Custom Level / "Allow websites to prompt for information using scripted windows"] and enable that... Once you refresh, you will see your alert in IE :)

Just add slashes before single quote as given below
<?php echo '<script type="text/javascript">alert(\'doenst work?\')</script>'; ?>

You could use eval() to evaluate the returned javascript. The script tags wont be required if this method is used.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

Try this:
http://www.webdeveloper.com/forum/showthread.php?184830-Ajax-echo-script-problem
Basically the reason why nothing happens is because you are just sticking content in the DOM. Javascript is an event driven language and since nothing is telling the javascript to run at this point, its just sitting there doing nothing. If that code were there when the browser loaded the page, then the browser parsing the code is what would tell it to run. So, what you need to do is evaluate any scripts that come back

Reloading a Page (or part of a page) using JavaScript

The client I am working for is trying to make it so that his page never has to reload. Instead he just wants to use AJAX. Now I realize that the way im doing it is not a very efficient way to do it but it is the easiest and you would understand why if you would see his site..
I'm trying to get it to work so that AJAX will refresh only parts of the page or the whole page.
My code is:
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script>
function refresh (update) {
$.get(location.href, function (data) {
console.log(data);
var EL = $(data).find(update);
var HTML = $('<div>').append(EL.clone()).html()
alert(HTML);
$(update).replaceWith(HTML);
});
}
</script>
</head>
<body>
<div style="font-size: 64px;">The current timestamp is <b class="time"><?php echo rand(999, 9999999); ?></b></div>
<br><br>
<button onclick="refresh('.time')">Refresh Time</button>
</body>
</html>
When you first load the page PHP generates a random number. Hitting the refresh button is suppose to refresh this number. However, the same number stays there. The request returns the exact same page instead of return a page with a new number.
And again, people note that I know this is not a very efficient way to do this, but its the way i'm trying to get it to work
Am I doing something wrong? (besides requesting the whole page when only actually using part)
EDIT
You can try it out here: http://methods.x10.mx/projects/refreshPageParts.php

Change your call to this, to break the caching:
function refresh (update) {
$.ajax({
type: "get",
cache: false,
url: location.href,
success: function (data) {
$(update).replaceWith($(data).find(update));
}
});
}
See the notes on caching in the documentation: http://api.jquery.com/jQuery.ajax/
By default, requests are always issued, but the browser may serve results out of its cache. To disallow use of the cached results, set cache to false. To cause the request to report failure if the asset has not been modified since the last request, set ifModified to true.

I tested your example on my local wamp stack and it is working fine!
btw: you forgot semicolon after the following line (It is not necessary though)
var HTML = $('<div>').append(EL.clone()).html();
EDIT: your code is working... also on the url you provided. The strange thing is you have to wait a few minutes before it is working. So when you visit the page and press the button, the time won't be updated... however if you wait few minutes it will... only once then you have to wait again. I bet your server is caching the page. So your problem is server side... disable the cache and it will work!!
EDIT:
you also could try to make the get url dynamic with a dummy parameter like so
http://methods.x10.mx/projects/refreshPageParts.php?v=dummy
maybe you don't have to make dummy dynamic, it might work with a static variable also. i'm curious, let me know ;-)