?
Solved

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

Posted on 2006-06-12
3
Medium Priority
?
249 Views
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.
0
Comment
Question by:Emanuele_Ciriachi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 10

Accepted Solution

by:
js_vaughan earned 1200 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:


<html>
<head>
<title>Experts-Exchange</title>

<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);
            }
        }
    }

// -->
</script>

</head>

<body>

<form name="your_form" action="your_page.xyz">

    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>&nbsp;
    <select name="city">
        <option value="" selected>Choose a City:</option>
    </select>

</form>

</body>
</html>
0
 
LVL 10

Expert Comment

by:js_vaughan
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.
0
 
LVL 10

Assisted Solution

by:jagadeesh_motamarri
jagadeesh_motamarri earned 800 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.

CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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 (a.name == "m")
          {
               if (a.parentNode.parentNode.id == "menu")
               {
                    a.style.color = "red";
                    a.style.textDecoration = "underline";
               } else
               {
                    a.style.color = "black";
                    a.style.textDecoration = "none";
               }
               a.onclick = function()
               {
                    onLoadFunction(); // this resets everything
                    var cur = this;
                    var counter = 0;
                    while (cur.parentNode.parentNode.id != "menu")
                    {
                         cur = cur.parentNode;
                         counter = counter + 1;
                    }
                    cur = this;
                    while (cur)
                    {
                         if (cur.nextSibling && cur.nextSibling.style)
                         {
                              cur.nextSibling.style.display = "block";

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

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

ul     {
     list-style:none;
     margin-left:0.5em
}

a     {
color:#F00;
}

a:hover     {
color:#000;
  }

li li a {
color:#000;
      text-decoration: none;
}

li li a:hover {
color:#F00;
}

ul li a:active{
color:#FF0000;}


-->
</style>
</head>

<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>
</ul>
</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>
</ul></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>
</ul>
</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>

</ul></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>
</ul></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>
</ul></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>
</ul></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>

</ul></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>
</ul></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>
</ul></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>

</ul></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>  
</ul>
<p>&nbsp; </p>
</body></html>

NOTE: The credit for the code should go to kalifi who answered my post - http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21793831.html.

_____Jags.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to count occurrences of each item in an array.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

771 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