When using my JavaScript code to create 2 arrays for Product Category and Product selection, I encountered an issue. The user must first choose the type of Campaign they want to run before selecting the Product Category or Product. The 'Campaign' selection triggers a drop-down menu to choose the Product Category, followed by the Product options.
The problem arose when the Product Category did not populate correctly. Although the options were invisible, selecting one would then display the appropriate Product options. This confusion led me to seek help...
Here is the JavaScript code snippet:
<script type="text/javascript">
var info = new Array(
"Select One*Select One|Select One",
"Mortgage*1yr NegAm|3yr ARM|5yr ARM|7yr ARM|15yr FRM|30yr FRM",
"Home Equity*HELoan|HELOC|Convertible",
"Credit Card*Standard|Premium|Charge|Limited|Secured|Pre-Paid|Business",
"Student Loan*Subsidized|Unsubsidized|Undergrad|Graduate|Refi",
"Auto Loan*Purchase|Lease|Used|Dealer"
);
function stringSplit ( string, delimiter ) {
if ( string == null || string == "" ) {
return null;
} else if ( string.split != null ) {
return string.split ( delimiter );
}
}
var menu1 = new Array();
var menu2 = new Array();
function createMenus() {
for ( var i=0; i < info.length; i++ ) {
menu1[i] = stringSplit ( info[i], '*' );
menu2[i] = stringSplit ( menu1[i][1], '|' );
}
var b = document.selector.dropnum.options[document.selector.dropnum.options.selectedIndex].value;
var myFormx = myForm + b;
var prodcat = document.myFormx.main;
var product = document.myFormx.title;
prodcat.length = menu1.length;
product.length = menu2[0].length;
for ( var i=0; i < menu1.length; i++ ) {
prodcat.options[i].value = menu1[i][0];
prodcat.options[i].text = menu1[i][0];
}
document.myFormx.main.selected = 0;
for (var x=0; x < menu2[0].length; x++) {
product.options[x].text = menu2[0][x];
product.options[x].value = menu2[0][x];
}
document.myFormx.title.selected = 0;
}
function updateMenus ( what ) {
var sel = what.selectedIndex;
if ( sel >= 0 && sel < menu1.length )
var temp = menu2[sel];
else
var temp = new Array ();
what.form.title.length = temp.length;
for ( var i = 0; i < temp.length; i++ ) {
what.form.title.options[i].text = temp[i];
what.form.title.options[i].value = temp[i];
}
what.form.title.selected=0;
}
</script>
I also have code from my .php file that defines the form elements:
<html>
<body onLoad="createMenus()">
<br>
<br>
<form name="selector" action="#" method="post">
Select the Campaign methodology to model:
<select id='campnum' name='dropnum' class='css_button_example' onChange="javascript: ShowMenu(document.getElementById('campnum').value, 'camp', 5);">
<option value='0'>Select Campaign
<option value='1'>Retention Campaign
<option value='2'>Acquisition Campaign
<option value='3'>Cross-Sell Campaign
<option value='4'>Up-Sell Campaign
</select>
</form>
<div name="newboxes" id="camp0" style="display: none;" href="javascript:showonlyone('camp0');">
</div>
<!-- Retention Campaign Section -->
<div name="newboxes1" id="camp1" style="display: none;" href="javascript:showonlyone('camp1');">
<form name="myForm1">
Product Category:
<select name="main" size=1 onChange="updateMenus(this)">
<option>
</select>
Product:
<select name="title" size=1>
<option>
</select>
</form>
</div>
</body>
</html>
Best regards,
Vijay