Dynamic web forms: which web language is better, and why?

Posted on 2006-06-12
Last Modified: 2010-04-06
Now this is a hard question, I know, hence the big points bill.

As a user of Internet, I have seen many, well designed dynamic forms, while others are truly terrible.
As a programmer, I have wrote some of them myself, but these employed a quite simple mechanism: they use the "onchange" event to call JavaScript functions that cause the reload of the page with different GET parameters in the URL. This is indeed not the best solution, as it will cause an enervating pause while waiting the page to reload.

Many pages I've seen don't use this technique, even Experts Exchange has a better solution: when I click on the "+" near "Web Languages" the list of sub-topics will appear instantly, without reloading the page.

Now, given the fact that I want a code which will load only once, and that eventual, run-time modifications of the page will happen without further re-loads, which technology should I employ? Applets? JSP? Even, say, Flash forms?
I am very interested about your opinion and experience.
Question by:Emanuele_Ciriachi
  • 2
LVL 10

Accepted Solution

js_vaughan earned 300 total points
ID: 16888709
What you are talking about is handled by Javascript.  I personally recommend a book, "Javascript & DHTML Cookbook" by O'Reilly for this.  Once your form is passed, just use any server side language to pick it up.  Personally I like Coldfusion and PHP.  I have included below a sample script from the book I mentioned that is used to create a dynamic dropdown list for your forms.  In the real world, to prevent having to handcode all the options, you could have made a call to the database to loop the countries, and regions, to dynamically populate the "regiondb" array.  After that, the javascript function "setCities()" handles all the brute work.  Hope this example helps:


<script type="text/javascript">

    var regiondb = new Object();
    regiondb["africa"] = [{value:"102", text:"Cairo"},
                                                {value:"88", text:"Lagos"},
                                                {value:"80", text:"Nairobi"},
                                                {value:"55", text:"Pretoria"}];
    regiondb["asia"] = [{value:"30", text:"Ankara"},
                                            {value:"21", text:"Bangkok"},
                                            {value:"49", text:"Beijing"},
                                            {value:"76", text:"New Delhi"},
                                            {value:"14", text:"Tokyo"}];
    regiondb["australia"] = [{value:"64", text:"Suva"},
                                                     {value:"12", text:"Sydney"}];
    regiondb["europe"] = [{value:"11", text:"Athens"},
                                                {value:"35", text:"Frankfurt"},
                                                {value:"3", text:"London"},
                                                {value:"15", text:"Madrid"},
                                                {value:"1", text:"Paris"},
                                                {value:"10", text:"Rome"},
                                                {value:"6", text:"Stockholm"},
                                                {value:"97", text:"St. Petersburg"}];
    regiondb["noamer"] = [{value:"73", text:"Dallas"},
                                                {value:"71", text:"Los Angeles"},
                                                {value:"5", text:"New York"},
                                                {value:"37", text:"Toronto"}];
    regiondb["soamer"] = [{value:"65", text:"Buenos Aires"},
                                                {value:"31", text:"Caracas"},
                                                {value:"66", text:"Rio di Janeiro"}];
    function setCities(chooser){
        var cityChooser = chooser.form.elements["city"];
        // empty previous settings
        cityChooser.options.length = 0;
        // get chosen value to act as index to regiondb hash table
        var choice = chooser.options[chooser.selectedIndex].value;
        var db = regiondb[choice];
        // insert default first item
        cityChooser.options[0] = new Option("Choose a City:", "", true, false);
        if (choice != ""){
            // loop through array of the hash table entry, and populate options
            for (var i = 0; i < db.length; i++){
                cityChooser.options[i+1] = new Option(db[i].text, db[i].value);

// -->



<form name="your_form" action="">

    Submit Request to: <select name="continent" onchange="setCities(this)">
        <option value="" selected>Choose a Region:</option>
        <option value="africa">Africa</option>
        <option value="asia">Asia</option>
        <option value="australia">Australia</option>
        <option value="europe">Europe</option>
        <option value="noamer">North America</option>
        <option value="soamer">South America</option>
    <select name="city">
        <option value="" selected>Choose a City:</option>


LVL 10

Expert Comment

ID: 16888831
Sorry, i forgot to finish answering your question.  As for the server side language, you'll probably want to stick with PHP.  It's very powerful and has a support community larger than you'd ever need.  Not to mention, its free.  Coldfusion is excellent in my opinion, but expect to shell out some good money for it.  The standard edition is $1,300, with the enterprise version up to $6,000.
LVL 10

Assisted Solution

jagadeesh_motamarri earned 200 total points
ID: 16890431
Hi Emanuele_Ciriachi ,

As js_vaughan mentioned .....javascript is one the best options that does your work.

>> Many pages I've seen don't use this technique, even Experts Exchange has a better solution: when I click on the "+" near "Web Languages" the list of sub-topics will appear instantly, without reloading the page.

Such type of effect is either generated using enterily with javascript or can even be achieved with a combination of javascript and css.

And coming to the server side techonology -

>>Now, given the fact that I want a code which will load only once, and that eventual, run-time modifications of the page will happen without further re-loads, which technology should I employ? Applets? JSP? Even, say, Flash forms?

The effects you are talking about are those that occur at the client side for saving the server resources. That is the reason we employ javascript for validation, some calulations , some special effect etc. i believe it has nothing to do with the server technology. I can say its your convenience. Personally i prefer java servlets.

Here is a similar example of what you see in experts-exchange.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Collapsible Menus</title>

     <script type="text/javascript">
function onLoadFunction()
     var a;
     for (var i = 0; (a = document.getElementsByTagName("A")[i]); ++i)
          if ( == "m")
               if ( == "menu")
           = "red";
           = "underline";
               } else
           = "black";
           = "none";
               a.onclick = function()
                    onLoadFunction(); // this resets everything
                    var cur = this;
                    var counter = 0;
                    while ( != "menu")
                         cur = cur.parentNode;
                         counter = counter + 1;
                    cur = this;
                    while (cur)
                         if (cur.nextSibling &&
                     = "block";

                         if (!cur.parentNode || !cur.parentNode.parentNode)
                         cur = cur.parentNode.parentNode.previousSibling;
                    cur = this;
                    if (counter == 0)
                = "black";    
                = "underline";
                    } else if (counter == 2)
                = "black";          
                = "underline";
                = "black";
                = "underline";
                    } else
                = "red";    
                = "none";
                = "black";
                = "underline";
                = "black";
                = "underline";

               if (a.nextSibling &&
           = "none";
}</script><style type="text/css">
     font-size: 12pt;

ul     {

a     {

a:hover     {

li li a {
      text-decoration: none;

li li a:hover {

ul li a:active{


<body onload="onLoadFunction()">

<ul id="menu">
<li><a name="m" href="#">Degreee Programs</a>
<li><a name="m" href="#" id="noline">Undergraduate Admission</a><ul>
<li>- <a name="m" href="#" >Prospective Students</a><ul>
<li><a name="m" href="#" class="noline red">-&nbsp;  Freshman</a></li>
<li><a name="m" href="#" class="noline red">-&nbsp;  Transfer</a></li>
<li><a name="m" href="#" class="noline red">-&nbsp;  International</a></li>
<li><a name="m" href="#" class="noline red">-&nbsp;  Readmit</a></li>

<li>- <a name="m" href="#">Campus Visits</a></li>
<li>- <a name="m" href="#">Information Requests</a></li>
<li>- <a name="m" href="#">Apply for Admission</a></li>
<li>- <a name="m" href="#">Online Application Status</a>
<li>- <a name="m" href="#">Advanced Placement</a></li>
<li>- <a name="m" href="#">International Baccalaureate (IB) Program</a></li>
<li>- <a name="m" href="#">Special Programs</a></li>
<li>- <a name="m" href="#">Tuition & Fees</a></li>
<li>- <a name="m" href="#">Parents Information</a></li>
<li>- <a name="m" href="#">Guidance Counselors</a>
<li>- <a name="m" href="#">Cooperative Education</a></li>

<li><a name="m" href="#">Graduate Admission</a><ul>
<li>- <a name="m" href="#">Application Information</a><ul>
<li>- <a name="m" href="#" class="nolinedecoration">Masters</a></li>
<li>- <a name="m" href="#" >PhD</a></li>
<li>- <a name="m" href="#" >Collaborative PhD</a></li>
<li>- <a name="m" href="#" >International</a></li>
<li>- <a name="m" href="#" >Non-Degree</a></li>
<li>- <a name="m" href="#" >Graduate Certificates</a></li>
<li>- <a name="m" href="#">Information Request</a>
<li>- <a name="m" href="#">Application Deadlines</a></li>
<li>- <a name="m" href="#">Apply for Admission</a></li>
<li>- <a name="m" href="#">Online Application Status</a></li>
<li>- <a name="m" href="#">Admitted Students</a></li>
<li>- <a name="m" href="#">Financial Support</a></li>
<li>- <a name="m" href="#">Frequently Asked Questions</a></li>
<li>- <a name="m" href="#">Other Resources</a></li>
<li>- <a name="m" href="#">Tution & Fees</a></li>


<li><a name="m" href="#">Financial Aid</a><ul>
<li>- <a name="m" href="#">Financial Aid Programs</a><ul>
<li>- <a name="m" href="#">Merit-Based Scholarships</a></li>
<li>- <a name="m" href="#">Need_Based Grants</a></li>
<li>- <a name="m" href="#">Loan Programs</a></li>
<li>- <a name="m" href="#">Student Employment</a></li>

<li>- <a name="m" href="#">How to Apply</a><ul>
<li>- <a name="m" href="#">Scholarship Applications</a></li>
<li>- <a name="m" href="#">Summer Session Aid</a></li>
<li>- <a name="m" href="#">International Students</a></li>
<li>- <a name="m" href="#">Deadlines</a></li>

<li>- <a name="m" href="#">Determining Eligibility</a><ul>
<li>- <a name="m" href="#">Cost per Year</a></li>
<li>- <a name="m" href="#">Special Circumstances</a></li>
<li>- <a name="m" href="#">Dependency Status</a></li>
<li>- <a name="m" href="#">Verification</a></li>
<li>- <a name="m" href="#">Enrollment Status</a></li>

<li>- <a name="m" href="#">Eligibility Policies and Procedures</a><ul>
<li>- <a name="m" href="#">Implications of Withdrawal</a></li>
<li>- <a name="m" href="#">Satisfactory Acedamic Progress</a></li>

<li>- <a name="m" href="#">Forms</a></li>
<li>- <a name="m" href="#">Key Contacts</a></li>
<li>- <a name="m" href="#">Newsletter</a></li>

<li><a name="m" href="#">Campus Life</a><ul>
<li>- <a name="m" href="#">Athletics</a></li>
<li>- <a name="m" href="#">Career Services</a>
<li>- <a name="m" href="#">Child Care</a></li>
<li>- <a name="m" href="#">Clubs & Organizations</a></li>
<li>- <a name="m" href="#">Murray Center</a></li>
<li>- <a name="m" href="#">James N Wise Theater</a></li>
<li>- <a name="m" href="#">The Vector</a></li>

<li><a name="m" href="#">On-Campus Housing</a>
<li><a name="m" href="#">Learning Alternatives</a><ul>
<li>- <a name="m" href="#">Non-Degree</a></li>
<li>- <a name="m" href="#">Online Learning</a>
<li>- <a name="m" href="#">Extension Sites</a></li>
<li>- <a name="m" href="#">Continuing Professional Education</a></li>
<li>- <a name="m" href="#">Programs for High School Students</a></li>
<li>- <a name="m" href="#">Co-op Programs</a></li>


<li><a name="m" href="#">Student Resources</a>
<li><a name="m" href="#">Public Safety</a>  
<li><a name="m" href="#">Online Tour</a>
<li><a name="m" href="#">Contact Us</a>  
<p>&nbsp; </p>

NOTE: The credit for the code should go to kalifi who answered my post -


Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
XSL Grouping 7 42
Tool to email me when a website changes 29 133
Getting attribute Values using xslt 4 54
Download a website to hdd 2 80
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question