Works in I.E, no others: document.forms['form1']['param' + iIndex + 'Criteria'].value

[Draxus]

Hello everyone. I inherited some code from a previous employee. In short this code allows a member of the sales team to search records of companies from the website.

It functions fine in Internet explorer. But will fail at the same spot on any other browser upon form submit.

Error on submit
Element param0Criteria is undefined in a Java object of type class coldfusion.filter.FormScope


In addition to that error, when another search criteria is is pressed to be added, I get this error from the Java console.


Uncaught TypeError: Cannot read property 'value' of undefined


In short: Firefox and the like, can't see the form element param#Criteria. function paramCode writes the option.

This thing is massive, so I cut it down and put it into sections as best as I could.


Thank you for any help you can give. I am very appreciative.

MAIN CODE BELOW:

------------------------



<script language="JavaScript">

.....

function addNewParam()
{
var oNewParam;

recacheParams();

oNewParam = new Object();
oNewParam.criteria = 'company_name';
oNewParam.type = 'starts_with';
oNewParam.string = '';

oParam[iParamCount] = oNewParam;

iParamCount++;

refreshParams();
}

function refreshParams()
{
var iCounter;
var sOutput = '';

sOutput += '<table cellspacing="0" cellpadding="0" border="0" width="100%">';

//document.form1.paramCount.value = iParamCount;
document.forms['form1']['paramCount'].value = iParamCount;

for(iCounter = 0; iCounter < iParamCount; iCounter++)
sOutput += rowCode(iCounter, oParam[iCounter]);

sOutput += '</table>';


obj('searchTable').innerHTML = sOutput;
}

function recacheParams()
{
var iCounter;

//iParamCount = document.form1.paramCount.value;
iParamCount = document.forms['form1']['paramCount'].value;

for(iCounter = 0; iCounter < iParamCount; iCounter++)
oParam[iCounter] = getParam(iCounter);
}

function getParam(iIndex)
{

var oParam = new Object();
//oParam.criteria = document.form1['param' + iIndex + 'Criteria'].value;
oParam.criteria = document.forms['form1']['param' + iIndex + 'Criteria'].value;
alert(document.forms['form1']['logic'].value);

switch(oParam.criteria)
{
case 'company_name':
case 'street':
case 'city':
case 'zip':
case 'email':
case 'phone_number':
oParam.type = document.form1['param' + iIndex + 'Type'].value;

if(oParam.type == 'contains' || oParam.type == 'starts_with')
oParam.string = document.form1['param' + iIndex + 'String'].value;
else if(oParam.type == 'is_duplicated')
oParam.characters = document.form1['param' + iIndex + 'Characters'].value;

break;
case 'location':
oParam.type = document.form1['param' + iIndex + 'Type'].value;
oParam.string = document.form1['param' + iIndex + 'String'].value;
oParam.blanks = document.form1['param' + iIndex + 'Blanks'].value;
break;
case 'dealer_status':

case 'distributor_status':
case 'manufacturer_status':
case 'rep_status':
case 'vendor_status':
case 'user_count':
oParam.status = document.form1['param' + iIndex + 'Status'].options[document.form1['param' + iIndex + 'Status'].selectedIndex].value;
break;
case 'company_type':
oParam.metric = document.form1['param' + iIndex + 'Metric'].options[document.form1['param' + iIndex + 'Metric'].selectedIndex].value;
oParam.type = document.form1['param' + iIndex + 'Type'].options[document.form1['param' + iIndex + 'Type'].selectedIndex].value;
break;
case 'rep_territory':
oParam.repFirmID = document.form1['param' + iIndex + 'RepFirmID'].options[document.form1['param' + iIndex + 'RepFirmID'].selectedIndex].value;
break;
case 'salesperson':
oParam.metric = document.form1['param' + iIndex + 'Metric'].options[document.form1['param' + iIndex + 'Metric'].selectedIndex].value;
oParam.salespersonID = document.form1['param' + iIndex + 'SalespersonID'].options[document.form1['param' + iIndex + 'SalespersonID'].selectedIndex].value;
break;
case 'marketingcampaign':
oParam.campaignID = document.form1['param' + iIndex + 'campaignID'].options[document.form1['param' + iIndex + 'campaignID'].selectedIndex].value;
break;
case 'isnewcontact':
oParam.newContact = document.form1['param' + iIndex + 'newContact'].options[document.form1['param' + iIndex + 'newContact'].selectedIndex].value;
break;
case 'totalbusiness':
oParam.metric = document.form1['param' + iIndex + 'Metric'].options[document.form1['param' + iIndex + 'Metric'].selectedIndex].value;
oParam.totalB = document.form1['param' + iIndex + 'Total'].value;
break;
case 'latestnote':
oParam.metric = document.form1['param' + iIndex + 'Metric'].options[document.form1['param' + iIndex + 'Metric'].selectedIndex].value;
oParam.latestID = document.form1['param' + iIndex + 'LatestID'].options[document.form1['param' + iIndex + 'LatestID'].selectedIndex].value;
break;
}
return oParam;
}

function optionCode(sValue, sText, sVariable)
{
return '<option value="' + sValue + '"' + (sVariable == sValue ? ' selected' : '') + '>' + sText + '</option>';
}


....

[Draxus]

...

function paramCode(iIndex, oParam)
{
var sOutput = '';

switch(oParam.criteria)
{
case 'company_name':
case 'street':
case 'city':
case 'zip':
case 'email':
case 'phone_number':
sOutput += '<select name="param' + iIndex + 'Type" class="form_textbox1" onClick="updateStringParameter(' + iIndex + ')" style="margin-left: 5px;">';
sOutput += optionCode('starts_with', 'starts with', oParam.type);
sOutput += optionCode('contains', 'contains', oParam.type);
sOutput += optionCode('is_blank', 'is blank', oParam.type);
sOutput += optionCode('is_duplicated', 'is duplicated', oParam.type);
sOutput += '</select>';
sOutput += '<span><input type="text" name="param' + iIndex + 'String" value="' + makeCertain(oParam.string) + '" class="form_textbox1" style="margin-left: 5px;"';
if(oParam.type != 'starts_with' && oParam.type != 'contains' && oParam.type != null) sOutput += ' style="display: none; margin-left: 5px;"';
sOutput += '> </span> ';
sOutput += '<span id="param' + iIndex + 'Duplication"';
if(oParam.type != 'is_duplicated') sOutput += ' style="display: none; margin-left: 5px;"';
sOutput += '>within the first ';
sOutput += '<input type="text" name="param' + iIndex + 'Characters" style="width: 20px; margin-left: 5px;" class="form_textbox1" value="' + makeCertain(oParam.characters) + '">&nbsp;characters</span>';
break;
case 'location':
sOutput += '<select name="param' + iIndex + 'Type" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('is', 'is', oParam.type);
sOutput += optionCode('is_not', 'is not', oParam.type);
sOutput += '</select> ';
sOutput += '<input type="text" name="param' + iIndex + 'String" value="' + makeCertain(oParam.string) + '" class="form_textbox1" onKeyUp="autoCompleteLocation(this)" style="margin-left: 5px;"> (';
sOutput += '<select name="param' + iIndex + 'Blanks" class="form_textbox1">';
sOutput += optionCode('no_blanks', 'no blanks allowed', oParam.blanks);
sOutput += optionCode('blanks', 'blanks allowed', oParam.blanks);
sOutput += '</select> ) ';
break;
case 'dealer_status':
sOutput += '<select name="param' + iIndex + 'Metric" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('is', 'is', oParam.metric);
sOutput += optionCode('is_not', 'is not', oParam.metric);
sOutput += '</select> ';
sOutput += '<select name="param' + iIndex + 'Status" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('current', 'current dealer', oParam.status);
sOutput += optionCode('new', 'new dealer', oParam.status);
sOutput += optionCode('current_recert', 'recertified dealer', oParam.status);
sOutput += optionCode('former', 'former dealer', oParam.status);
sOutput += optionCode('current_or_former', 'current or former dealer', oParam.status);
sOutput += optionCode('unverified', 'unverified dealer', oParam.status);
sOutput += optionCode('requesting', 'requesting', oParam.status);
sOutput += '</select>';
break;
case 'distributor_status':
sOutput += '<span style="margin-left: 5px;">is</span><select name="param' + iIndex + 'Status" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('current', 'current distributor', oParam.status);
sOutput += optionCode('cert', 'certified distributor', oParam.status);
sOutput += optionCode('uncert', 'uncertified distributor', oParam.status);
sOutput += optionCode('not', 'not a distributor', oParam.status);
sOutput += '</select>';
break;
case 'manufacturer_status':
sOutput += '<span style="margin-left: 5px;">is</span><select name="param' + iIndex + 'Status" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('current', 'current manufacturer', oParam.status);
sOutput += optionCode('cert', 'certified manufacturer', oParam.status);
sOutput += optionCode('uncert', 'uncertified manufacturer', oParam.status);
sOutput += optionCode('not', 'not a manufacturer', oParam.status);
sOutput += '</select>';
break;
case 'rep_status':
sOutput += '<span style="margin-left: 5px;">is</span><select name="param' + iIndex + 'Status" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('current', 'current rep firm', oParam.status);
sOutput += optionCode('cert', 'certified rep firm', oParam.status);
sOutput += optionCode('uncert', 'uncertified rep firm', oParam.status);
sOutput += optionCode('not', 'not a rep firm', oParam.status);
sOutput += '</select>';
break;
case 'vendor_status':
sOutput += '<span style="margin-left: 5px;">is</span><select name="param' + iIndex + 'Status" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('current', 'current vendor', oParam.status);
sOutput += optionCode('cert', 'certified vendor', oParam.status);
sOutput += optionCode('uncert', 'uncertified vendor', oParam.status);
sOutput += optionCode('not', 'not a vendor', oParam.status);
sOutput += '</select>';
break;
case 'user_count':
sOutput += '<span style="margin-left: 5px;">is</span><select name="param' + iIndex + 'Status" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('zero', 'zero', oParam.status);
sOutput += optionCode('not_zero', 'at least one', oParam.status);
sOutput += '</select>';
break;
case 'company_type':
sOutput += '<select name="param' + iIndex + 'Metric" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('is', 'is', oParam.metric);
sOutput += optionCode('is_not', 'is not', oParam.metric);
sOutput += '</select> <select name="param' + iIndex + 'Type" class="form_textbox1" style="margin-left: 5px;">';
<cfloop query="qryTypes">
sOutput += optionCode('#qryTypes.ID#', '#JSStringFormat(qryTypes.Name)#', oParam.type);
</cfloop>
sOutput += optionCode('null','Blank',oParam.type);
sOutput += '</select>';
break;
case 'rep_territory':
sOutput += '<select name="param' + iIndex + 'RepFirmID" class="form_textbox1" style="margin-left: 5px;">';
<cfloop query="qryRepFirms">
sOutput += optionCode('#qryRepFirms.ID#', '#JSStringFormat(qryRepFirms.Name)#\'s territory', oParam.repFirmID);
</cfloop>
sOutput += '</select>';
break;
case 'salesperson':
sOutput += '<select name="param' + iIndex + 'Metric" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('is', 'is', oParam.metric);
sOutput += optionCode('is_not', 'is not', oParam.metric);
sOutput += '</select><select name="param' + iIndex + 'SalespersonID" class="form_textbox1" style="margin-left: 5px;">';
<cfloop query="qrySalespeople">
sOutput += optionCode('#qrySalespeople.ID#', '#JSStringFormat(qrySalespeople.Name)#', oParam.salespersonID);
</cfloop>
sOutput += optionCode('null', '(unassigned)', oParam.salespersonID);
sOutput += '</select>';
break;
case 'marketingcampaign':
sOutput += '<span style="margin-left: 5px;">is</span><select name="param' + iIndex + 'campaignID" class="form_textbox1" style="margin-left: 5px;">';
<cfloop query="qryMarketingCampaigns">
sOutput += optionCode('#qryMarketingCampaigns.ID#', '#JSStringFormat(qryMarketingCampaigns.Name)#', oParam.campaignID);
</cfloop>
sOutput += optionCode('null', '(any campaign)', oParam.campaignID);
sOutput += '</select>';
break;
case 'isnewcontact':
sOutput += '<span style="margin-left: 5px;">is</span><select name="param' + iIndex + 'newContact" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('1', 'Yes', oParam.newContact);
sOutput += optionCode('0', 'No', oParam.newContact);
sOutput += '</select>';
break;
case 'totalbusiness':
sOutput += '<select name="param' + iIndex + 'Metric" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('GT', 'is greater than', oParam.metric);
sOutput += optionCode('LT', 'is less than', oParam.metric);
sOutput += '</select> ';
sOutput += '$<input type="text" value="' + makeCertain(oParam.totalB) + '" size="10" name="param' + iIndex + 'Total" class="form_textbox1" style="margin-left: 5px;"> (no commas or periods)';
break;
case 'latestnote':
sOutput += '<select name="param' + iIndex + 'Metric" class="form_textbox1" style="margin-left: 5px;">';
sOutput += optionCode('by', 'by', oParam.metric);
sOutput += optionCode('not by', 'not by', oParam.metric);
sOutput += '</select><select name="param' + iIndex + 'LatestID" class="form_textbox1" style="margin-left: 5px;">';
<cfloop query="qrySalespeople">
sOutput += optionCode('#qrySalespeople.ID#', '#JSStringFormat(qrySalespeople.Name)#', oParam.latestID);
</cfloop>
sOutput += '</select>';
break;
}

return sOutput;
}

...

[Draxus]

...

function rowCode(iIndex, oParam)
{
var sOutput = '';
sOutput += '<tr style="vertical-align: middle; background-color: #Client.SubModuleColor3#;" class="text_small_color1"><td style="padding: 5px;" nowrap><strong>CONDITION ## ' + (iIndex + 1) + '</strong></td>';
sOutput += '<td nowrap style="padding: 5px;"><select name="param' + iIndex + 'Criteria" class="form_textbox1" onChange="refreshRow(' + iIndex + ')">';
sOutput += optionCode('company_name', 'Company name', oParam.criteria);
sOutput += optionCode('dealer_status', 'Dealer status', oParam.criteria);
sOutput += optionCode('distributor_status', 'Distributor status', oParam.criteria);
sOutput += optionCode('manufacturer_status', 'Manufacturer status', oParam.criteria);
sOutput += optionCode('rep_status', 'Rep status', oParam.criteria);
sOutput += optionCode('vendor_status', 'Vendor status', oParam.criteria);
sOutput += optionCode('user_count', 'User count', oParam.criteria);
sOutput += optionCode('street', 'Street address', oParam.criteria);
sOutput += optionCode('city', 'City', oParam.criteria);
sOutput += optionCode('location', 'State or country', oParam.criteria);
sOutput += optionCode('zip', 'Zip or postal code', oParam.criteria);
sOutput += optionCode('email', 'Email address', oParam.criteria);
sOutput += optionCode('phone_number', 'Phone number', oParam.criteria);
sOutput += optionCode('company_type', 'Company type', oParam.criteria);
sOutput += optionCode('rep_territory', 'Has a location in', oParam.criteria);
sOutput += optionCode('salesperson', 'Salesperson', oParam.criteria);
sOutput += optionCode('marketingcampaign', 'Marketing Campaign', oParam.criteria);
sOutput += optionCode('isnewcontact', 'Is New Contact', oParam.criteria);
sOutput += optionCode('totalbusiness', 'Total Business', oParam.criteria);
sOutput += optionCode('latestnote', 'Latest Note', oParam.criteria);
sOutput += '</select><span id="param' + iIndex + 'Options" class="text_small_color1">';
sOutput += paramCode(iIndex, oParam);
sOutput += '</span></td>';
sOutput += '<td align="right" width="100%"><a href="javascript: deleteParam(' + iIndex + ')"><img border="0" src="#ColorImage("images/delete.png", Client.FontColor1, ying)#" alt="delete search condition" style="margin-right: 7px;"></a></td></tr>';
return sOutput;
}


<!--- Begining of Forum --->

<cfif IsDefined("URL.destination")>
<cfset sDestination = URL.destination>
<cfelseif IsDefined("Form.destination")>
<cfset sDestination = Form.destination>
</cfif>
<form id="problem_child" name="form1" method="post" action="<cfif Not IsDefined("sSearchCompaniesDestination")>cm_view_companies_2.cfm<cfelse>#sSearchCompaniesDestination#</cfif>" style="margin: 0px;">
<input type="hidden" name="search" value="1">
<input type="hidden" name="paramCount" value="0">
<cfif IsDefined("URL.redirectToPending") OR IsDefined("Form.redirectToPending")><input type="hidden" name="redirectToPending" value="1"></cfif>
<cfif IsDefined("sDestination")><input type="hidden" name="destination" value="#sDestination#"></cfif>

<tr bgcolor="#Client.MiddleModuleColor#" valign="top">
<td style="padding-left: 15px; padding-right: 15px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#Client.TopModuleColor#" style="margin-bottom: 10px;">
<tr valign="top">
<td>
<table cellpadding="0" cellspacing="0" border="0" style="width: 100%">
<tr style="vertical-align: top;">
<td>
<cf_tablemodule
imageSrc="images/submodule_title_search_filters.png"
fgColor="#Client.TopModuleColor#"
hlColor="#Client.HeadlineColor#"
bgColor="#Client.MiddleModuleColor#"
width="100%" class="text_small_color1"
bulletlink1="javascript: addNewParam()"
bullettitle1="add new search condition">

<table border="0" cellpadding="0" cellspacing="0" class="text_small_color1" width="100%">
<tr style="vertical-align:top;">
<td style="padding-right: 7px; padding-top:4px; white-space:nowrap" align="right"><strong>SEARCH LOGIC</strong></td>
<td style="padding-bottom:10px;">
<select name="logic" class="form_textbox1">
<cfif IsDefined("Form.search")>
<cfset bAnd = Form.logic eq "bool_and">
<cfset bOr = Form.logic eq "bool_or">
<cfelse>
<cfset bAnd = True>
<cfset bOr = False>
</cfif>
<option value="bool_and" <cfif bAnd>selected</cfif>>All conditions must be met</option>
<option value="bool_or" <cfif bOr>selected</cfif>>At least one condition must be met</option>

</select>
</td>
</tr>
<tr style="vertical-align:top;">
<td style="padding-right: 7px; padding-top:4px; white-space:nowrap;" align="right"><strong>SEARCH CONDITIONS</strong></td>
<td style="width:100%;">
<div id="searchTable" style="width: 100%;"></div>
</td>
</tr>
<tr style="vertical-align:top;">
<td align="right" colspan="2">
<input type="submit" value="SUBMIT SEARCH CONDITIONS" class="form_button" style="width: 180px; background-color: ###Client.MiddleModuleColor#;">
<input type="button" id="oDump" value="Dump Object" class="form_button" style="width: 180px; background-color: ###Client.MiddleModuleColor#;">
<input type="checkbox" id="showTypes" value="1" checked="checked" />
<span id="dynamicSortCode"></span>