Javascript and dynamic forms... (again!) 1

[LTeeple]

Hello all,
I'm sure you're getting used to my dynamic form questions by now. Again, I am banging my head against the wall .

On this form, when the user changes a value from one select-one box, the next one down populates. When a user selects a value from the second select-one box, the third box populates. The data comes from a database.

Relevant HTML code

<form id="add" method="post" action="save.php?tableid=18">
  <select name="time1" onChange="populateNext(this.form,this.value,'time2');">
    <option value="xx" selected>Select Time</option>
    <option value="2">10:00am</option>
    <option value="1">12:15pm (lunch served)</option>
    <option value="4">5:30pm</option><option value="3">7:00pm</option>
  </select>
  <select name="time2" onChange="populateNext(this.form,this.value,'time3');">
  </select>
  <select name="time3"></select>
</form>

Relevant Javascript code

function populateNext(myform,mytime,myfield) {
  var field_name = myfield;
  if (mytime==1){
    myform.field_name.options[0] = new Option("Choose a time:");
    myform.field_name.options[1] = new Option("10:00am",2);
    myform.field_name.options[2] = new Option("7:00pm",3);
    myform.field_name.options[3] = new Option("5:30pm",4);
  }
  if (mytime==2){
    myform.field_name.options[0] = new Option("Choose a time:");
    myform.field_name.options[1] = new Option("12:15pm (lunch served)",1);
    myform.field_name.options[2] = new Option("7:00pm",3);
    myform.field_name.options[3] = new Option("5:30pm",4);
  }
  if (mytime==3){
    myform.field_name.options[0] = new Option("Choose a time:");
    myform.field_name.options[1] = new Option("12:15pm (lunch served)",1);
    myform.field_name.options[2] = new Option("10:00am",2);
    myform.field_name.options[3] = new Option("5:30pm",4);
  }
  if (mytime==4){
    myform.field_name.options[0] = new Option("Choose a time:");
    myform.field_name.options[1] = new Option("12:15pm (lunch served)",1);
    myform.field_name.options[2] = new Option("10:00am",2);
    myform.field_name.options[3] = new Option("7:00pm",3);
  }
}

Javascript Error

Error: myform.field_name has no properties

I know I must be referencing the form objects improperly - my problem is I don't understand completely how to properly access form objects using javascript.

I thank you in advance for your help.


Cheers!
Laura

 

[kaht]

change all instances of this:

myform.field_name

to this:

myform.elements[field_name]

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[LTeeple]

kaht,
Thank you once again

Can you point me to any online resources where I might read up on document.form.elements[name], and possibly any javascript tutorials where my skills can be strengthened?

I'd greatly appreciate it.


Cheers!
Laura

 

[kaht]

http://www.w3schools.com

is a great site that I use often, but normally what I learn I get from searching google or I read here. When I first joined tek-tips 2 years ago I knew pretty much nothing about javascript, but I had just gotten a job where I was required to learn it. I just started reading every thread here in the javascript forum and that taught me a lot.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.