www.webdeveloper.com
Results 1 to 6 of 6

Thread: Trouble building an online application form

  1. #1
    Join Date
    Sep 2008
    Posts
    2

    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 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 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.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Could be (simplified) something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .visible {
    display:block;
    }
    .hidden{
    display:none;
    }
    </style>
    <script type="text/javascript">
    /*<![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'&&t.value.length<1){alert('Please, fill the fields!');return}
    }
    cases[div.id]();
    }
    function goDiv(from,to){
    document.getElementById(from).className='hidden';
    document.getElementById(to).className='visible';
    }
    /*]]>*/
    </script>
    </head>
    <body>
    <form id="myForm" action="">
    <div id="one" class="visible">
    Name: <input type="text" name="name" id="name" />
    <br />
    <input type="button" value="Next" onclick="valid(this)" />
    </div>
    
    <div id="two" class="hidden">
    Address: <input type="text" name="address" id="address" />
    <br />
    <input type="button" value="Next" onclick="valid(this)" />
    </div>
    
    <div id="three" class="hidden">
    Contact: <input type="text" name="contact" id="contact" />
    <br />
    <input type="button" value="Submit" onclick="valid(this)"/>
    </div>
    </form>
    </body>
    </html>

  3. #3
    Join Date
    Oct 2008
    Location
    Melbourne, Australia
    Posts
    4

    Thumbs up

    Hi,

    So at first I tried unsuccessfully to find a free form-mailer that supported multi-pages
    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

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by rustyr View Post
    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.
    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.

  5. #5
    Join Date
    Sep 2008
    Posts
    2
    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!

  6. #6
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    phpFomGenerator provides an online open source solution. the forms created do 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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles