www.webdeveloper.com
Results 1 to 3 of 3

Thread: Forms

  1. #1
    Join Date
    Jul 2012
    Posts
    1

    Forms

    I am new to the world of web development so my knowledge and skills are minimal.


    However, on my website I would like to create a form. This form is kind of like the forms you see on airline websites or pizza hut. Where you have options and varieties and base on what you choose, it will bring up a results.

    How would I even go about doing that?


    Thanks for all your help.

  2. #2
    Join Date
    Nov 2007
    Posts
    409
    Let's presume the user has to select 3 different things (style, size, and color).

    Your webpage has 3 <select> on it.
    The first <select> has all of the different styles a user can choose from.
    When the user selects a style, the second <select> populates with a list of sizes that are available.
    When the user selects a size, the third <select> populates with a list of colors that are available.

    How do you make that happen?
    1- in the first <select> add an "onchange" attribute, like this:
    Code:
    <select id="style" onchange="setSizes(this.value)">
    2- write the javascript function for "setSizes". It may resemble this:
    Code:
    function setSizes (style) {
      var sizes = document.getElementById("sizes");
    
      //depending on which style they chose, populate "sizes" with the available sizes
      switch (style){
            case 'SomeStyle':{
                sizes.options.length = 0;
                sizes.options[dropdown.options.length] = new Option('Select One','');
                sizes.options[dropdown.options.length] = new Option('S','Small');
                break;
            }
            case 'SomeStyle':{
                sizes.options.length = 0;
                sizes.options[dropdown.options.length] = new Option('Select One','');
                sizes.options[dropdown.options.length] = new Option('Small','S');
                sizes.options[dropdown.options.length] = new Option('Medium','M');
                break;
            }
            case 'SomeOtherStyle':{
                sizes.options.length = 0;
                sizes.options[dropdown.options.length] = new Option('Select One','');
                sizes.options[dropdown.options.length] = new Option('Large','L');
                sizes.options[dropdown.options.length] = new Option('Extra Large','XL');
                break;
            }
      }
    }
    Now do the same thing for the "Sizes" <select>
    Code:
    <select id="sizes" onchange="setColors(this.value)">
    Now write your function for "setColors".

  3. #3
    Join Date
    Mar 2012
    Posts
    913
    napOleon has given the Javascrpt approach, but this can be done in PHP instead. Which is preferable? Well, that depends:

    1. Javascript is easier to implement because it is client side. I.e. testing HTML plus Javascript is just like testing HTML. Whereas, you have to set up a localhost to test PHP, and to put it live your host must support PHP. AFAIK, all paid hosts support PHP but some free ones do not.

    2. Using PHP may be worth the additional up-front effort because:
    a) It hides much of your code from prying eyes.
    b) PHP acts as an interface to MySql.

    So if you intend to use a database back-end, e.g. to record client and order details, you need to use PHP. This is an example of a form that uses PHP rather than Javascript.
    Last edited by jedaisoul; 07-27-2012 at 03:19 AM.

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