Forms

[locher]

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.

[nap0leon]

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:

<select id="style" onchange="setSizes(this.value)">

2- write the javascript function for "setSizes". It may resemble this:

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>

<select id="sizes" onchange="setColors(this.value)">

Now write your function for "setColors".

[jedaisoul]

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.