Every web 2.0 site has AJAX (Asynchronous JavaScript and XML) and coders need to know how to implement it. Well, while building up my portfolio at Nomad Thinking I decided to add a small web form for possible clients to contact me. This would allow me to easily push my website and get referrals for my website without someone having to open up their email client or launch Gmail and send an email. So before I start any project I like to take a look at the competition. I ran a quick Google Search and took a look at what popped up.
What did I find?
Dustin Diaz a web guru created a simple Ajax Web Form that is very straight forward and has plenty of positive comments. I have also been to his website due to the fact that almost every website needs a min-height hack. (A MUST KNOW CSS HACK!)
So rather then reinventing the wheel I decided to take a look at his code and see how he implemented it. Well the first thing I notice was he’s using alert boxes to tell the “user” (person filling out form) that theirs and error. Oh, how web 0.1? I know its a simple example, but ugh, how I HATE alert boxes!
Anyway, I started to break apart the code and add some innerhtml fun along with some more validation. I emailed Dustin who gladly let me post this review as well as modify/use his code.
So here are some simple changes I made with MY example of the Ajax Form.
Changed in contact.js
if ( posText.value == ” || whiteSpace.test(posText.value)) {
document.getElementById(’errors’).style.display = ‘block’
document.getElementById(’errors’).innerHTML
= “You’re trying to send an Empty Email. Please type a message and
then get on your way.”;
}
else if (posName.value == ”){
document.getElementById(’errors’).style.display = ‘block’
document.getElementById(’errors’).innerHTML
=”Please fill in your name.”;
}
else if (posEmail.value == ”){
document.getElementById(’errors’).style.display = ‘block’
document.getElementById(’errors’).innerHTML
=”Please put a valid email so I can contact you.”;
}
else if (posRegard.value == ”){
document.getElementById(’errors’).style.display = ‘block’
document.getElementById(’errors’).innerHTML
= “Please put a phone number so I can contact you.”;
}
else if ( posEmail.value == ” && strCC.checked == true ) {
document.getElementById(’errors’).style.display = ‘block’
document.getElementById(’errors’).innerHTML
=”Why are you trying to CC yourself without an email?”;
}
else if (posEmail.value.indexOf(”.”) > 2) && (posEmail.value.indexOf(”@”) > 0)){
document.getElementById(’errors’).style.display = ‘block’
document.getElementById(’errors’).innerHTML
=”Please put a VALID email so I can contact you.”;
}
else {
document.getElementById(’errors’).style.display = ‘none’
sendPosEmail();
}
So what does this code do, how how does it differ? Basically, instead of a ugly annoying alert box, a div box appears and displays a error message using Ajax. Dustin did a great job on posting this code, but lacks a bit documentation for a “newbie” coder. (Should I add documentation?)
I also made some changes to another file.
Changed index.php
#errors{
background:#EF2C2C;
color:#fff;padding:10px;
margin-bottom:10px;
}
<div id=”errors” style=”display:none”></div>
I know Ajax is the new pink, so why not have some fun creating (recoding) a simple web form. Hopefully you have enjoyed this and it will help show you how to create a simple and fun Ajax form.
Popularity: 8% [?]
Be The First To Comment
Related Post
Please Leave Your Comments Below