Question

I’ve created a jquery dialog modal box for logging into my website:

$('#login').dialog({
  modal: true,
  position: 'center',
  autoOpen: false,
  title: 'Login',
  height: '750px',
  width: '300px',
  zIndex: 9999,
  closeOnEscape: false,
  buttons: {
    'Login': function() {
      $(this).dialog('close');
      $('#mask').hide();
      Login();
    },
    'Cancel': function() {
      $(this).dialog('close');
      $('#mask').hide();
    }
  }
});

I’ve created a php function called Login() in a separate php file, is it possible for me to call that php function when they click on the Login button? If not, how can I get that dialog’s Login box to use php to attempt logging in.

Answer 1

Update: Do this over an SSL connection for true security

You simply need to make a behind-the-scenes request using AJAX. For example, $.post in jQuery.

1. Click Login
2. Get username/password from dialog.
3. $.post() it to the /login.php file that contains the login code
4. Process this request in PHP.
5. Output one thing if the login is succesful, or another if it fails.
6. Recieve this output in the callback function of $.post
7. Either call window.location = '/nextpage.php' or display an error message.

As per http://docs.jquery.com/Ajax/jQuery.post, you have 4 arguments to $.post:

$.post( url, [data], [callback], [type] )

so that

function onLogin(data)
{
    if(data['success'])
        window.location = 'nextpage.php';
    else
        alert(data['error']);
}

var u = get_username_from_form();
var p = get_password_from_form();

$.post(
   '/login.php', 
   {username: u, password: p}, 
   onLogin, 
   'json' 
)

and in the file login.php, you would:

<?php

$username = (isset($_POST['username']) ? $_POST['username'] : '');
$password = (isset($_POST['password']) ? $_POST['password'] : '');

//Assuming you wrote the authenticate() function
if(authenticate($username, password))
{
   echo json_encode(array('success' => true));
   exit;
}
else
{
   echo json_encode(array('success' => false, 'message' => 'Login Failed!'));
   exit;
}