Hello,
I am having an issue with a page that works fine in IE and not FF. Bascially it is a <div> loaded with a basic coldfusion input form that posts back to parent of the div page. Problem I am having is a validation routine in javascript seems to not to want to find my form or it's elements when I fetch the page into the div (innerhtml via xmlhttprequest) , it works perfectly when I run the page by itself even in FF. The form has a unique id and name, getElementByID only works in FF when I run the page stand-alone, document.forms[formname] also only works stand-alone in FF. I will try to encapsulate the gist of the code here. There are multiple forms on the parent of the div. It's like the form object just disappears from the document. I thought it might be forms within tables, or some malformed html that FF just doesn't like, but it looks fine. I think there is just some difference when doing dhtml and scoping of the objects in FF ? Note, the form comes up alright in the parent div, but the javascript functions just can't access the form elements.. everything works fine in IE. btw, the HTMLElement.prototype.innerHTML has been contructor settered/gettered to work with FF like IE, that works fine too in both.
another odd thing, is that I do not see the form in the source when viewed by the client browser, is this just a fact of life for dhtml ? Anyway, any ideas on this would be apprecited, short of abandoning dhtml for FF. Oh yeah, and my Reset button will not focus properly in FF..
Javascript giving me the problem:
function validate_form() {
var has_error=0;
var empty_element=0;
var x=document.forms['add_form'];
// var x=document.forms[0]; work's stand alone (multiple form)on // var x=document.getElementById('add_form'); work's stand alone only
var div_handle = document.getElementById("form_message");
div_handle.innerHTML = "";
var error_message = "";
// here is x.length is undefined when dhtml'd in to the parents div ?? :(
for (var i=0;i<x.length;i++)
{
empty_element=0;
blah = x.elements[i].value;
// alert( x.elements[i].id + ":" + x.elements[i].length +" => Blah:"+ blah + " len:"+ blah.length);
if (blah.length == 0)
{ empty_element=1; }
switch (x.elements[i].id)
{
case "f_gr_title":
.. <snip code>
x.elements[i].focus();
}
break;
} // switch
} // for
if (has_error) {
div_handle.innerHTML = div_handle.innerHTML+"<br><br>";
}
else {
x.submit(); // submit the form if we have no errors..
}
} // validate_form
The form code:
<cfform id="add_form" action="index.cfm?act=add" method="POST" name="add_form" enctype="multipart/form-data" onreset="javascript:document.getElementBy('f_gr_title').focus();">
<TABLE border="1" cellpadding="1" cellspacing="0" bordercolor="##D2D2D2">
<!---------------- Title ----------------------->
<tr><td align="right">Title</td>
<td><input type="text" size="60" value="" id="f_gr_title" name="f_gr_title" maxlength="60" />
</td></tr>
<!---------------- Description ----------------------->
<tr><td align="right">Description</td>
<td>
<textarea name="f_gr_description" cols="60" id="f_gr_description" height="30">
</textarea>
</td></tr>
<!---------------- Type ----------------------->
<tr><td align="right">Type</td>
<td><cfselect enabled="yes" accesskey="g_tcode" query="qry_type" id="f_gr_type" name="f_gr_type" display="g_tcode" value="g_tvalue"
onChange="javascript:{if (document.getElementById('f_gr_type').value == 'Other') {
var d = document.createElement('div');
var zz = document.createElement('input');
zz.setAttribute('type', 'text');
zz.setAttribute('name', 'f_gr_type_other');
zz.setAttribute('id', 'f_gr_type_other');
zz.setAttribute('size', '60');
d.appendChild(zz);
document.getElementById('otherdiv').appendChild(d);
document.getElementById('f_gr_type_other').focus();
}
else {
// blank out the other_type text if they go to standard type..
var div_handle = document.getElementById('otherdiv');
div_handle.innerHTML = '';
// dynamic_content('otherdiv','');
}};">
</cfselect>
<div id="otherdiv">
</div>
</td>
</tr>
<!---------------- Status ----------------------->
<tr><td align="right">Status</td>
<td>
<input type="text" value="Pending" name="f_gr_status" id="f_gr_status" disabled="disabled">
</td></tr>
</TABLE>
<br>
<div id="form_message" name="form_message"></div>
<!---------------- Buttons ----------------------->
<input type="reset" onclick="javascript:document.forms['add_form'].elements['f_gr_title'].focus();"/>
<input type="button" onClick="javascript:cancel_add();" value="Cancel " id="cancel_button">
<input type="button" onClick="javascript:validate_form();" value="Add Request " id="add_button">
</cfform>
Thanks in Advance,
Bob
