HTML Help - Web Hosting UK Forums | Linux Windows Dedicated Server and cPanel VPS Hosting Forum

karimali831 · #1 (**permalink**) 08-27-2007, 01:16 AM

I know it's not php.. there's no html board so I'm hoping its ok.
Anyway, I have created a simple contact form but wondering how to do something to it which I'm not sure about.

Created the drop down, if you select the specified option another option is added below or where ever you want it.

Anyone know the coding for this?
It should be simular too

<select name="value" id="value" onChange="checkLoc();">

Have no clue what this is, don't know how to do it at all.

Thanks for any help

**Dan** · #2 (**permalink**) 08-27-2007, 01:39 AM

This is JavaScript i'm guessing. Try checking out some websites which specialise in Javascript as thats not an aspect of coding i am familiar with.

karimali831 · #3 (**permalink**) 08-27-2007, 12:29 PM

Quote:

Originally Posted by Dan

This is JavaScript i'm guessing. Try checking out some websites which specialise in Javascript as thats not an aspect of coding i am familiar with.

I can't fine no javascript onchange.. well they don't work :S
I'll have to keep looking.

jon123 · #4 (**permalink**) 08-27-2007, 02:27 PM

Only javascript can do what you need.
search for something like 'javascript dropdown population' or words to that effect.

karimali831 · #5 (**permalink**) 08-27-2007, 06:25 PM

Yeah well what I mean is I find the javascript dropdown onchange code, place it onto my site but never functions...

I thought it would be that simple but it's simply not.
I found one here:

http://javascript.internet.com/forms...opulation.html

Code:

<!-- TWO STEPS TO INSTALL DROPDOWN BOX POPULATION:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Revised by: DeWayne Whitaker :: http://www.aecdfw.com
Original by: Andrew Berry */

var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[3] = "Truck";
arrItemsGrp1[3] = 1;
arrItems1[4] = "Train";
arrItemsGrp1[4] = 1;
arrItems1[5] = "Car";
arrItemsGrp1[5] = 1;

arrItems1[6] = "Boat";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Submarine";
arrItemsGrp1[7] = 2;

arrItems1[0] = "Planes";
arrItemsGrp1[0] = 3;
arrItems1[1] = "Ultralight";
arrItemsGrp1[1] = 3;
arrItems1[2] = "Glider";
arrItemsGrp1[2] = 3;

var arrItems2 = new Array();
var arrItemsGrp2 = new Array();

arrItems2[21] = "747";
arrItemsGrp2[21] = 0
arrItems2[22] = "Cessna";
arrItemsGrp2[22] = 0

arrItems2[31] = "Kolb Flyer";
arrItemsGrp2[31] = 1
arrItems2[34] = "Kitfox";
arrItemsGrp2[34] = 1

arrItems2[35] = "Schwietzer Glider";
arrItemsGrp2[35] = 2

arrItems2[99] = "Chevy Malibu";
arrItemsGrp2[99] = 5
arrItems2[100] = "Lincoln LS";
arrItemsGrp2[100] = 5
arrItems2[57] = "BMW Z3";
arrItemsGrp2[57] = 5

arrItems2[101] = "F-150";
arrItemsGrp2[101] = 3
arrItems2[102] = "Tahoe";
arrItemsGrp2[102] = 3

arrItems2[103] = "Freight Train";
arrItemsGrp2[103] = 4
arrItems2[104] = "Passenger Train";
arrItemsGrp2[104] = 4

arrItems2[105] = "Oil Tanker";
arrItemsGrp2[105] = 6
arrItems2[106] = "Fishing Boat";
arrItemsGrp2[106] = 6

arrItems2[200] = "Los Angelas Class";
arrItemsGrp2[200] = 7
arrItems2[201] = "Kilo Class";
arrItemsGrp2[201] = 7
arrItems2[203] = "Seawolf Class";
arrItemsGrp2[203] = 7

function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
  var myEle ;
  var x ;
  // Empty the second drop down box of any choices
  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
  if (control.name == "firstChoice") {
    // Empty the third drop down box of any choices
    for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
 }
  // ADD Default Choice - in case there are no values
  myEle = document.createElement("option") ;
  myEle.value = 0 ;
  myEle.text = "[SELECT]" ;
  // controlToPopulate.add(myEle) ;
  controlToPopulate.appendChild(myEle)
  // Now loop through the array of individual items
  // Any containing the same child id are added to
  // the second dropdown box
  for ( x = 0 ; x < ItemArray.length  ; x++ ) {
    if ( GroupArray[x] == control.value ) {
      myEle = document.createElement("option") ;
      //myEle.value = x ;
      myEle.setAttribute('value',x);
      // myEle.text = ItemArray[x] ;
      var txt = document.createTextNode(ItemArray[x]);
      myEle.appendChild(txt)
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
    }
  }
}

function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
  var myEle ;
  var x ;
  // Empty the second drop down box of any choices
  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
  if (control.name == "firstChoice") {
    // Empty the third drop down box of any choices
    for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
  }
  // ADD Default Choice - in case there are no values
  myEle=document.createElement("option");
  theText=document.createTextNode("[SELECT]");
  myEle.appendChild(theText);
  myEle.setAttribute("value","0");
  controlToPopulate.appendChild(myEle);
  // Now loop through the array of individual items
  // Any containing the same child id are added to
  // the second dropdown box
  for ( x = 0 ; x < ItemArray.length  ; x++ ) {
    if ( GroupArray[x] == control.value ) {
      myEle = document.createElement("option") ;
      //myEle.value = x ;
      myEle.setAttribute("value",x);
      // myEle.text = ItemArray[x] ;
      var txt = document.createTextNode(ItemArray[x]);
      myEle.appendChild(txt)
      // controlToPopulate.add(myEle) ;
      controlToPopulate.appendChild(myEle)
    }
  }
}
// -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<form name=form>
<table align="center">
  <tr>
    <td>
      <select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);">
        <option value="0" selected>[SELECT]</option>
        <option value="1">Land</option>
        <option value="2">Sea</option>
        <option value="3">Air</option>
      </select>
    </td><td>
      <select id="secondChoice" name="secondChoice" onchange="selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);">
      </select>
      <select id="thirdChoice" name="thirdChoice">
      </select>
    </td>
  </tr>
</table>
</form>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  5.38 KB -->

Copy and pasted the whole code onto a html page (Just to test)
And no.. doesn't function right :S

karimali831 · #6 (**permalink**) 08-27-2007, 06:27 PM

The steps are simple:





================================================== =======



================================================== =======

Exackly what I have done :S
I'm a newbie at this stuff and not sure how it works..

Thanks for your help.

jon123 · #7 (**permalink**) 08-27-2007, 06:39 PM

Hi mate,
I have just tested that code and it does work. The problem is that most of it is obscured from view as it overlaps...is that what you mean?

The table needs to be wider and another cell needs to be added.

Change the body part to this and see if it works for you.

Code:

 
<form name=form>
<table width="400" align="center">
  <tr>
    <td width="132">
      <select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);">
        <option value="0" selected>[SELECT]</option>
        <option value="1">Land</option>
        <option value="2">Sea</option>
        <option value="3">Air</option>
      </select>
    </td><td width="115">
      <select id="secondChoice" name="secondChoice" onchange="selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);">
      </select>
      </td><td width="137">
      <select id="thirdChoice" name="thirdChoice">
      </select>
    </td>
  </tr>
</table>
</form>

karimali831 · #8 (**permalink**) 08-27-2007, 06:48 PM

Play around with the code see what I can do and nothing. Becoming a really crap night for me

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

User Name		Remember Me?
Password