• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 791
  • Last Modified:

login using ajax or jquery

I often in somewebsite where the login system is quite nicely build! clicking on a link opens a DIV Box in front of the user machine and user enters his/her credentials, after submit is clicked, it shows shows a loading icon below the DIV after the Password field and if it is wrong, it shows error there and if it is right, it just reloads the page and moves to the members Page!

for me i tried the DIV stuff and its working, but how that jquery of cf inbuild ajax stuff is done, is new, can anyone guide me how that can be achieved

Gurpreet Singh Randhawa
Gurpreet Singh Randhawa
  • 2
2 Solutions
I started writing this up, then saw that the link leakim971 provided, the first of the Ray Camden articles, does exactly what you need.  The only thing you would need to do is a proper user validation in the processLogin function.  I provide my answer anyway for completeness.

Firstly, build yourself a normal .cfm file that would process a normal form submission.  e.g. something like:

<cfparam name="form.username" default="">
<cfparam name="form.password" default="">

<cfquery name="login" datasource="dsn">
WHERE USERNAME = <cfqueryparam value="#form.username#" type="string">
AND PASSWORD = <cfqueryparam value="#Hash(form.password)#" type="string">

<cfif NOT login.recordCount>
  Sorry, this username and/or password not found
  <cflocation url="members.cfm">  <!--- actually probably not use this, let the calling page do a javascript redirect instead? --->

Plus whatever you want to do maybe with regards putting the user ID into the session or whatever.

Then in your original page, you want to make an AJAX submission to the login page using jQuery.  Two ways to do it, either using .ajax() or .post().  Something like this perhaps:

$(document).ready(function() {
  $('#yourForm').submit(function() {
     $.post("login.cfm", {username: $('#usernameFormField').val(), password: $('#passwordFormField').val()});

The second Ray Camden article shows another good way of doing this.  The only thing I think I'm missing here is what you do with the results of the post, but both those links show ways of doing that.
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
I was trying to allocate 50/50 points to both but it closed the question! moderators please make it open again to give 250 points to both

Thanks for the points!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now