Solved

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

Posted on 2006-06-12
3
229 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
  • 2
3 Comments
 
LVL 10

Accepted Solution

by:
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:


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

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 Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
Preface This article introduces an authentication and authorization system for a website.  It is understood by the author and the project contributors that there is no such thing as a "one size fits all" system.  That being said, there is a certa…
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
The viewer will learn how to dynamically set the form action using jQuery.

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now