Ajax and Forms

[charlesh]

All,

One thing I totally dislike is doing form validation, so I thought I would spice it up a bit by doing some Ajax and instant feedback type of form. Specifically, when you enter a username, I have a function that will check to see if that username exists in the database via a XMLHTTP request in the background. Try typing in "admin" to see a return on an existing username. Really, Ajax is not so difficult. What is difficult is troubleshooting Javascript!

The other neat thing is that when you choose a state, the database is queried and only the universities for that state will appear in the next select box down. So, choose a state first and then the universities will appear for that state. I'm thinking of writing a tutorial on how I did this, if any one is interested - let me know.

For those of you who wouldn't mind giving me some constructive feedback about the form in progress, I would sincerely appreciate it, especially since it is my first attempt at Ajax.

What I'm having trouble with figuring out is how to (in Javascript) only return true with the order form when all the required fields are either correct and filled out. There must be some way to have all of those functions that I have for checking the database and returning the universities list feed into an array I can check on a submit. Any ideas? Right now the required fields validate individually, but not as a complete form.

The simple way with one function is a bunch of chained if statements (see below)...

  else if(document.contact.state.value=='abc') {
         document.getElementById('state_help').innerHTML = '<img src="http://glowhost.com/forums/images/info.jpg" alt="" width="25" height="24" /><br/>&nbsp;&nbsp;Please Choose a state.';
                return false;
        }
               
        else {
                return true;
        }

and when all the conditions are met, then the form returns true and the post executes to the php script. Problem is, I have several different "separate" functions for the ajax-specific field, so how do I evaluate everything together for a post?

Here's the link:
Campus Mic

Any help is warmly appreciated,

[jmarcv]

All,
... What is difficult is troubleshooting Javascript!

I develop in Firefox with the Firebug plugin. It really doesnt get much better.

What I'm having trouble with figuring out is how to (in Javascript) only return true with the order form when all the required fields are either correct and filled out.

What about something like this?

 function verOrderForm(){
 anyerrors=false;
 ok=getUserName(document.getElementById('username').value);
 anyerrors=(!ok ? true : anyerrors);
 ok=uidComplete(document.getElementById('uid').value);
 anyerrors=(!ok ? true : anyerrors);
 // ... do the same for all validation
 if (anyerrors){
  alert('No go Jack!')
  return false;
 } else {
  return true;
 }
 
}

You would need to mod this, as so, though

 
function uidComplete(uid)
{
 var obj = document.getElementById('username_help');
 eval(uid.response); // Executing the response from Ajax as Javascript code
 if (uid.response != '1'){
   document.getElementById("username_help").innerHTML = '<img src="images/check.jpg" alt="" /><br />';
   return true;
 } else
 {
  document.getElementById("username_help").innerHTML = '<img src="images/info.jpg" alt="" width="25" height="24" /><br />&nbsp;&nbsp;That username already exists. Please choose another.';
   return false;
 }
}

Arrays passed to the function? Sure. More complicated, and would benefit by better naming conventions. IE:

<input type="text" id="validate_username" name="username" class="form" style="margin-left:12px;" onblur="ver_username(this.id);" />
<input type="text" id="validate_firstname" name="firstname" class="form" style="margin-left:12px; " onblur="return ver_firstname(this.id);"><br /><br /></td>

With that, each routine would strip the validate_ off the id, get value with getElementById, check, and write to help_firstname, or help_username, which I think you are already naming.
you could then on submit loop through all the form elements, check those that start with validate, and run the corresponding subroutine by replacing the validate_ with ver_ and running it.
Did I lose you?

If that is of interest, I can elaborate, but I thing the scheme I have above is pretty simple and will do what you want.


FYI: Be aware that this does not work on all browsers.
document.contact.state.value
This is the "safe" syntax:
document.contact.state.options[document.contact.state.selectedIndex].value

[charlesh]

Jmarcv,

Thanks for the detailed reply. I have read it about 10 times already. I think I understand what you are getting at, so I'm going to try to implement it. I like the simple part.

What do you think about the state and university listing? I have the university select box set to invisible during onload, then it appears on selecting the state. Do you think there may be a better way, from a visual / usability perspective?

I develop in Firefox with the Firebug plugin. It really doesnt get much better.

I use it too, it has helped me debug this entire thing, but sometimes I can't really "read" or yet understand what the debug messages are really telling me. Javascript is entirely silent about its errors. Ie just does nothing. I would like to learn more about the DOM tab and inspecting the DOM to use the debugging feature more effectively.

BTW, thanks for the new conventions. I need to get a good book on Javascript.

I'll keep you posted and return back with what you suggest once I implement it. Thanks again for the help,

[jmarcv]

Charles H
The state and university thing? What do I think? Ajax is awesome, isnt it.
Any way that works and looks good, IMO. I did my own brand of AJAX back in 1999 for a client. Enter a zipcode, it looks up in a postal DB and prefills state and zip. Glowhost programmer "D" did that for the new orderform. I did the glow login using a form of AJAX I call AJMX.

Its the way it should be.v Finally. And like you say, it aint that hard after all!

Take a look at the Yahoo YUI by the way. I am starting to use that instead of rolling my own. Good docs, good examples. In fact, it is the basis of the new cPael GUI.

Feel free to PM me any time you need help.

[jmarcv]

What do you think about the state and university listing? I have the university select box set to invisible during onload...

Actually, now that you mention it, I personally would hide the prompt also. I just hate displaying any ifo that has no revelance to what is going on at the time. Nothing I haye more than having a selection of options, choosing it, and then being told there are no options.

IF THERE ARE NO OPTIONS, DONT PUT IT IN MY FACE!!!
I did this in early 2000's when I was a HACK web programmer! Wht cant people still not do it almost a decade later?

So in that sense, you are RIGHT-ON in that concept in my book. More work for us, but we cant dazzle them with ani-gifs anymore, can we?

And I am really sorry for offending the whites in my previous comments a few months back. Being Afro-American has its problems LOL!

[jmarcv]

PPS -
Download details: Script Debugger for Windows NT 4.0 and Later

There is your IE solution. Sucks, but better than nothing, or the godawful internal debugger:
Error at linr 105. Good luck guessing what the line number refers to.
Error: object undefined. Oh, we are not going to bother telling you what object we are refering to. Look at line 105 to figure it out. Sponsored by BigBill.com

[charlesh]

John-Marc,

Thanks for the replies, I'm downloading the script debugger now. As far as the university list, dependent upon the state first being selected, I was thinking about graying it out until selected, but right now, not so high on the priority list. Lot's more dev to do - Still have to create a forgot password script and an edit my account script for users.

Funny thing is that this form validation stuff has taken twice as long to develop as it did for me to implement the entire user authentication system.

Thanks again,

[charlesh]

I did this in early 2000's when I was a HACK web programmer! Wht cant people still not do it almost a decade later?

I'm still a hack web programmer, but I'm getting there....
Nothing seems to dazzle - I wish that I would find a client that would actually appreciate some of these things, the "extra mile" kind of stuff. Most just don't seem to care.

[jmarcv]

I'm still a hack web programmer, but I'm getting there....

Yes you are, and thats my point. A perception of what is possible and going for it. Willingness to make the site more appealing with stuff people take for granted on desktop systems. And.... not using a button that says "Submit" LOL!

I just did an overhaul of a large site, and the Javascript is a bear, but the CSS has got to be the worst. You are absolutely right, the frills take 10 times longer than the core.
And thats where Firebug shows its colors (literaly?) because you can 'right-click' inspect an element and change the css and html RIGHT THERE to see what the changes will do.

[charlesh]

Thanks for the compliment, John-Marc!

CSS is a bear, but I remember tables and how if you had one </tr> missing or out of place, the whole thing would come crashing down and troubleshooting it was very painful! Lemme guess, the site you just redid was tables and you're converting them to CSS?

Firebug is cool for CSS, for sure. Also, the inspect tab lets you see what your divs are doing, including padding, etc.

...Almost finished with the mods. I've actually decided to try an array for error elements. The problem i'm having with using one 'anyerror' var is that when an element is correct, it changes the anyerror back to true. So, what I've decided to do is either create separate vars for each evaluation, then run a check on form submit to make sure nothing returns from the variables, or put all of them in an "anyerror" array...

All this and when I'm finished with the Javascript, beef up the php validation in case of <noscript>. Damn. I should have charged more!