Trouble building an online application form

programming web dev
1

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 Jack’s Formmail 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 this script, 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 click here 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 just make the script validate when a user clicks ‘next’ OR ‘submit’ rather than just ‘submit’ if you get what I mean…

    Anyone know how I could do that?