checking if username exists in real-time for account sign up

[ACS LLC]

Does anybody know where I might find some code that would easily integrate with CF7/SQL that would allow me to do a real-time check on a user name without the user having to submit the form?

I did a little research and AJAX appeared to be suggested, but I could not find any example code that I could use in CF.

This is a for an account sign up form where the user enters a username, I want a "Check Availabilty" button that they can hit which queries our SQL dbase to see if the username is taken or not

Thanks

Mark

[ilssac]

Ajax is the ONLY way to do this without a full form submit request, page refresh response in the browser.

Unless you would like to replace the HTTP request/response browser application with something like Flash/Flex/Air user interface or similar technology.

But the normal way to do what you would like to do is to use AJAX which is not as complex as many make it sound.  With CF7 there are several comunity grown AJAX frame works, CFAJAX http://www.indiankey.com/cfajax/ and ajaxCFC http://ajaxcfc.riaforge.org/ are two of the best known.

Or you can simply role your own using the xmlhttprequest javascript object http://www.w3schools.com/dom/dom_http.asp and simple DHTML javascript to modify the DOM document object model.

[ACS LLC]

Hi Ian

That's what I was afraid of 😉

I'll take a look around those links thats you sent to me, but it looks like this might be a little too complex if I can't find something off the shelf that I can more or less cut and paste... version 2.0 😉

Thanks

Mark

[Dan_Bracuk]

Another approach is to provide another button for checking the availabilty.  Then you can do the work in and iframe or pop up.

[ACS LLC]

check avail button is how I was hoping to make it function

[Dan_Bracuk]

Make it part of a different form.  Use javascript to pick up the string from the first form and put it in a hidden field.  Then submit to an iframe.

[ACS LLC]

that's in interesting concept, although my javascript is not great, at best I can integrate off the shelf code from others. I'm thinking i could use a session variable to allow me to read through both 'pages'.

I would have to test, I wonder if the session can be read on the main page AND on the Iframe, and subsequently the receiving page which puts it all together.. I guess so, I'll soon find out

Mark

[ilssac]

When you think about "reading" the session varaible and the main page and the sub page, you have to keep clear in your mind what code is running where.

The session variable and any CFML to access it are running on the server.  The browser and any JavaScript is running on the client.  These two systems do NOT share memory.  The only way to get data from one to the other is through some type of HTTP request and respone.

Whether this request/response cycle is done by clicking a link, submitting a form or uses a JavaScript xmlhttprequest object is all the same.  If the requst involves the entire page, a sub-frame of the page or is done in the memory of the client it is all the same.  But a request has to be made and a respone will be sent.  Then it is up to the server to define what happens when it receives the request and the client to define what it does when it recieves the response.

HTH

[ACS LLC]

understood. Basically I'm running two browsers due to the IFRAME.

So I'll have form fields in both 'browsers'. When the final page is submitted, I'll just need to check that the session variable for the username exists.

I've never tested this, but I THINK that the first 'browser' can read sessions written by the 2nd 'browser - inside the iframe) it as long as the session is active

Right?

Mark

[ilssac]

Yes.  All frames of a browser will belong to the same session state on the server as long as they send the same cfid and cftoken (or jsessionid) cookies to the server with each request they make.  I beleive that is the default behavior of an inline frame.

But the parent frame will not now what that session is, unless the date is returened in the response that results from the inline frame's request.  I.E.  The form in the inline frame is submitted as a request.  A response is generated and returned.  Then if you want to parent frame to do something with this data, it will have to access the inline frames information.  If you just want to display the respone to the user in the frame, then nothing more is required.

[ACS LLC]

that is true, it's not ideal, the parent will just sit there being a little dumb about the whole thing, not knowing if they submitted a username or not, so I'll have to check on the last page. I'd like it to be a little more interactive and not have to have the main page submit then check if the username exists, but I don't want to spend a week trying to figure it out.

I'll try it with the iframe and a submit inside the iframe which reposts the same page and writes a session variable upon success, and then when they submit the parent I will have to check to see if that session.username actually exists and if not, kick them back. Not super clean but should work

[ilssac]

It would only be a tiny bit more JavaScript to have the inline frame pass the data to the parent frame so the parent frame could act on it.

But it is going to be JavaScript not CFML, because all of this has to happen on the client end of things.

[ACS LLC]

got it, unfortunately my javascript skills are not up to that which is why I probably misunderstood what you were telling me.

My sessions approach was a bit of a work around, I'm sure it will work, albeit not as slick as the javascript approach

[ilssac]

That is fine, but you still seem to be missing the idea that the JavaScript solution and the session solution can work together.

I.E. the session data is on the server, the request from the inline frame can access this data.

Then it can just display the data retuned in the response, which would require no client side scripting.  Or client side scripting could take the data from the session on the server that was returned in the response and do something with it in the user interface.

Do this request in an xmlhttprequest object rather then an inline frame and you have what is commonly called AJAX.  Just to bring the conversation full circle.

[ACS LLC]

unfortunately both of you are working at a higher level than I am, apart from a recent integration of an AJAX script which required little to no tweaking I have no knowledge of this

I'll try and knock it out tonight and send you a URL to look at to see if it's just a case of adding a couple of lines that perhaps you can help me with 😉

Thanks

Mark

[ACS LLC]

I believe I have it working using sessions

Feel free to check it out, I would like to hear your comments.

(I have some text I need to move around on the order page so it's close to the email account section, so just look at function)

http://www.secrettoolbox.com , click BUY at the top

It's hooked up to the PayPal Sandbox right now, so you can try it out using one of the their test/bogus credit cards

type: Visa

card: 4658408223567027

expires: 01/2010

CVV2: 962

Thanks

Mark

[Dan_Bracuk]

What happens when you do this?

check availability of username abc?

submit username xyz?

[ACS LLC]

what is does is upon submit it goes back to the same page and because of the presence of the form_username variable it does a query to the dbase to see if it exists or is available. It then reports the appropriate message.

if it is available it writes it to a session. They can then either try another and the process repeats or continue on the main page to complete the main form

Once the main form is submitted it will check for the existance of the session.username, if not available it just kicks back to the form with an error message.

The only problem is if they type a name and don't submit it, just needed an error trap for this. If they manage to submit an empty form name then a session won't be written, but the previous one from might be there from the last name they successfully checked, so I just destroy the session upon that event. I'm going to add a little javascript that I have to stop them submitting an empty field

Over all it does seem to work. I was thinking of changing the color of the button upon success just to highlight it a little more.. red for fail, green for go

Mark

[Dan_Bracuk]

What I had in mind was to have two forms on the parent page.  The first form has all the form fields and submits wherever.  The second form has just a hidden form field and a submit button, and submits to the iframe  The iframe simply displays information.

I don't see where session variables come into play.  You do need javascript however, to transfer the username being checked to the hidden form field of the 2nd form.