/    Sign up×
Community /Pin to ProfileBookmark

Trouble building an online application form

As the title suggests, I am trying to build an online application form. My knowledge of PHP and Javascript is quite limited. Basically what I need is:

1) HTML fields laid out either on 3 pages or in DIVs that change in visibility providing the illusion of pages

2) 4-5 fields allowing attachments to be uploaded

3) Validation to make sure that required fields are filled out (without leaving the page, without waiting until end of all the pages)

4) A method by which to email the form results to a specified address

5) An autoresponder

I started with [URL=”http://www.dtheatre.com/scripts/formmail.php”]Jack’s Formmail[/URL] which provided a way to email the form results, and it also included validation, an autoresponder, and attachments.
Problems: The script didn’t have a way of incorporating multi-page forms (which led me to finding the technique of hiding/showing DIVs with ‘next’/’prev’ buttons instead) Also, the validation happens when a user clicks ‘submit’, and it loads another page telling you there are errors, making the user click the back button to get back to the form- not what I want, and it doesn’t work with multi-page forms.

So at first I tried unsuccessfully to find a free form-mailer that supported multi-pages… then I followed a tutorial (can’t find it again) that basically made use of changing the display property on each section’s DIV from ‘none’ to ‘block’ all the way down so that it seems like multiple pages.

Then I came across [URL=”http://www.javascript-coder.com/html-form/form-validation.phtml#onpage”]this script[/URL], which validates and then displays the errors on the page itself.
Problem: It validates when the user clicks ‘submit’, so if I were to use the technique of hiding/showing DIVs, then the user wouldn’t be told there was a problem until the end- and then would have to click back like 4 times… (I don’t know how to change the script so that it validates with the ‘next’ button)

So as it stands right now, I could make everything work if I left it on one long page, or I could have it work with the multiple pages, but then it wouldn’t validate until the end- neither option is quite what I want.

You can [URL=”http://teaganmckay.110mb.com/example/java-form-full.html”]click here[/URL] to see an example form I made to test it all out that shows the DIV switching, but it doesn’t validate until the last section. (I only made First and Last names required fields)

I think my problems would be solved if I could make the script validate when a user clicks ‘next’ OR ‘submit’ rather than only ‘submit’ if you get what I’m saying… is that relatively possible?

Any help is a appreciated.

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@KorOct 01.2008 — Could be (simplified) something like this:
<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;style type="text/css"&gt;
.visible {
display:block;
}
.hidden{
display:none;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
/*&lt;![CDATA[*/

function valid(w){
var cases={
'one':function(){goDiv('one','two')},
'two':function(){goDiv('two','three')},
'three':function(){document.getElementById('myForm').submit()}
}
var div=w.parentNode;
var txt=div.getElementsByTagName('input'), i=0, t;
while(t=txt[i++]){
if(t.type=='text'&amp;&amp;t.value.length&lt;1){alert('Please, fill the fields!');return}
}
cases[div.id]();
}
function goDiv(from,to){
document.getElementById(from).className='hidden';
document.getElementById(to).className='visible';
}
/*]]&gt;*/
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id="myForm" action=""&gt;
&lt;div id="one" class="visible"&gt;
Name: &lt;input type="text" name="name" id="name" /&gt;
&lt;br /&gt;
&lt;input type="button" value="Next" onclick="valid(this)" /&gt;
&lt;/div&gt;

&lt;div id="two" class="hidden"&gt;
Address: &lt;input type="text" name="address" id="address" /&gt;
&lt;br /&gt;
&lt;input type="button" value="Next" onclick="valid(this)" /&gt;
&lt;/div&gt;

&lt;div id="three" class="hidden"&gt;
Contact: &lt;input type="text" name="contact" id="contact" /&gt;
&lt;br /&gt;
&lt;input type="button" value="Submit" onclick="valid(this)"/&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@rustyrOct 01.2008 — Hi,


So at first I tried unsuccessfully to find a free form-mailer that supported multi-pages
[/quote]


Tectite FormMail is free, anti-spam, and supports multi-page forms.

The problem with using JavaScript is that a percentage of your visitors do not have JavaScript enabled, and will not be able to use your forms.

cheers,

RR
Copy linkTweet thisAlerts:
@KorOct 02.2008 — 
The problem with using JavaScript is that a percentage of your visitors do not have JavaScript enabled, and will not be able to use your forms.
[/QUOTE]

Anyway, this kind of project needs javascript for the other requirements as well, thus the objection is not quite sustainable.

Usually, people disable javascript when visiting untrusted sites. Untrusted sites (except maybe the porno ones ?) have low SEO ranks. But for a e-commerce site, for instance, the rank is vital, thus the trust should be high.

Now here's a logical conclusion: users do enable javascript when visiting trusted sites so that there is no reason for avoiding javascript in development.

Statistics say the same: general percentage of javascript disabled users may be around 5-6%, but on the known and trusted sites disabled javascript users are far below 2%, which is an acceptable loss. Anyway, that shows the dual behavior: the same user might opt for disabling javascript in certain situations and enable it in others.

As a conclusion: the javascript accessibility problem is not a vital problem anymore.
Copy linkTweet thisAlerts:
@memphisauthorOct 03.2008 — Thanks a lot for the replies.

I see what you mean Kor, but I just don't think I would be able to make the necessary edits to the Javascript in order to suit my needs, the example that I put up was based on the script, my understanding of it all is pretty limited...

I saw Tectite when I was looking around, but I misread it and thought I needed to purchase a license; I didn't realise that was only if I wanted to encode the information, which since I'm not dealing with credit cards,etc- I don't, so that may very well work.

And yeah, I'm not too concerned with the Javascript 'issue' for the reasons Kor mentioned, and also there's a section where users can apply offline if it doesn't work for them anyway, so no big deal...

Thanks again, I hope it all works!
Copy linkTweet thisAlerts:
@opifexOct 04.2008 — phpFomGenerator provides an online open source solution. the forms created [B]do[/B] contain a couple of html errors, but they are easy to spot and fix. the javascript validation included works and you can easily modify the code to suit your needs.

http://phpformgen.sourceforge.net

...and it's free!
×

Success!

Help @memphis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...