Solved

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

Posted on 2006-06-12
3
241 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 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
IndexedDB how to clear the DB when returning but not refreshing? 1 165
File names with & character 6 90
CSS HELP 6 94
Problem to Popup 2 93
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

730 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