Forms from AJAX call not being seen by Javascript?

[MDWeezer]

I have a drop down populated with values, upon selection of a value a AJAX call is made which brings up another form list of values.  When I select a value from that list I would to make another AJAX call but my function can't seem to find the form item.  Here is my code:

[code]
// This one is called first and works fine
function getRacks(){
var w = document.planeForm.planeNumber.selectedIndex;
    var selected_value = document.planeForm.planeNumber.options[w].value;
// alert("Selected");
var url = 'getracks.cfm';
var pars = 'planenumber='+selected_value;
var target = 'rackSpace';
var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
}

// This gets called but I get a JavaScript error saying
// "document.rackForm.rackNumber is NULL or not an Object"
function getLRUs(){
var x = document.rackForm.rackNumber.selectedIndex;
            var selected_value = document.rackForm.rackNumber.options[x].value;
alert("Selected");
var url = 'getlrus.cfm';
var pars = 'id='+selected_value;
var target = 'LRU';
var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
}
[/code]

Here is the form HTML
[code]
// First form item that is on my index page and works fine:
<FORM id="planeForm" name="planeForm">
<select name="planeNumber" onchange="getRacks()">
<OPTION VALUE="">Select a Plane...</option>
<cfoutput query="aircrafts">
<OPTION value="#ACIM_AC_NBR_CD#">#ACIM_MODEL# #ACIM_AC_NBR_CD#</OPTION>
</cfoutput>
</select>
</FORM>

// Form item placed in a div on the index page after the AJAX call from the above form
<FORM id="rackForm" name="rackForm">
<select name="rackNumber" onChange="getLRUs()">
<cfoutput query="racks">
<option value="#RACO_OBJECT_ID#">#RACO_RACK_NAME#
</cfoutput>
</select>
</form>
[/code]

Any thoughts why my second function, getLRUs() cannot see the form item rackNumber?  My thought is that they don't become part of the document.  I'm not too familiar with DOM or anything so any help would be appreciated!!!

[akitchin]

i imagine you may be right about the second form and select not becoming part of the document.  without being too familiar myself, i might suggest a few things to see if they help:

1.  use the IDs of the form elements (or the form itself) in conjunction with getElementById(), rather than specifying the name.

2.  get the forms that are to be populated by a previous selection into the document BEFORE running the functions, but put them into a hidden DIV.  that way they will be part of the document, having only had their values changed and made visible.

i'm not too sure of whether number 2 would work though, since i haven't used coldfusion and am not sure how the cfoutput element works.

hope this helps.

[MDWeezer]

[quote author=akitchin link=topic=110610.msg447394#msg447394 date=1160072540]
i imagine you may be right about the second form and select not becoming part of the document.  without being too familiar myself, i might suggest a few things to see if they help:

1.  use the IDs of the form elements (or the form itself) in conjunction with getElementById(), rather than specifying the name.

2.  get the forms that are to be populated by a previous selection into the document BEFORE running the functions, but put them into a hidden DIV.  that way they will be part of the document, having only had their values changed and made visible.

i'm not too sure of whether number 2 would work though, since i haven't used coldfusion and am not sure how the cfoutput element works.

hope this helps.
[/quote]

Hmmm after reading your post, I'm going to try passing the value of the currently selected index of the form as a argument in my Javascript function.  Need to find a good resource on how to do that now!  ex: onChange(getLRUs(form.value)) <- I'm guessing something like this is possible.

Thanks for the ideas, I appreciate it.

[MDWeezer]

Got it!

[code]
onChange="testFunction
  (window.document.rackForm.rackNumber.
  options[selectedIndex].value);"
[/code]

Thanks a lot!

[akitchin]

i can't tell where you're running that from, but a much easier way of passing the currently selected value of a select from itself is:

[code]<select name="rackNumber" onChange="testFunction(this.value);">[/code]

the select element's value is automatically the currently selected item, if memory serves.  regardless, good to see you got it working.

[fenway]

akitchin is correct; actually, I don't see how it was "working", since to get the selected index, you'd need window.document.rackForm.rackNumber.selectedIndex.