I have 3 select boxes that load dynamical based on the selection in each box. These work correctly before I try and style the page using the jqtransform plugin. I have tried to figure this out and have searched this site and the web with out finding a solution as to why the select menus do not populate at all if I use the jqtransform plugin. Any help would be greatly appreciated.
Original working code:
`<script language="JavaScript" src="myminiAJAX.js"></script>
<script language="JavaScript" src="functions.js"></script>
<script language="JavaScript">
function init() {
doAjax('man_list.php', '', 'populateComp', 'post', '1');
}
function showOutput(){
alert("This Is Your Model Id: "+getValue('manufacturer'));
}
$(function(){
$('form').jqTransform({imgPath:'jqtransformplugin/img/'});
});
</script>
<style>
#loading{
background:url('loader64.gif') no-repeat;
height: 63px;
}
</style>
</head>
<body onLoad="init();">
<p>
<form method="post" action="<?php echo $PHP_SELF;?>">
<b>System Type:</b> <select name="manufacturer" id="manufacturer" onChange="resetValues();doAjax('type_list.php', 'man='+getValue('manufacturer'), 'populateType', 'post', '1')">
<option value="">Please select:</option></select>
<br /><b>Type of Equipment: </b> <select name="printertype" id="printertype" disabled="disabled" onChange="doAjax('model_list.php', 'man='+getValue('manufacturer')+'&typ='+getValue('printertype'), 'populateModel', 'post', '1')">
<option value="">Please select:</option></select>
<br /><b>Equipment to be depoted out:</b> <select name="printermodel" id="printermodel" disabled="disabled" onChange="showOutput();">
<option value="">Please select:</option></select>
<br /><br /><input type="submit" name="action" value="Submit" />
Code After adding Jqtransform plugin:
<link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" />
<link rel="stylesheet" href="demo.css" type="text/css" media="all" />
<script language="JavaScript" src="myminiAJAX.js"></script>
<script language="JavaScript" src="functions.js"></script>
<script type="text/javascript" src="requiered/jquery.js" ></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" > </script>
Removed functions to shorten this post since they didn't change from the original code.
<body onLoad="init();">
<p>
<form method="post" action="<?php echo $PHP_SELF;?>">
<div class="rowElem"><b>System Type:</b> <select name="manufacturer" id="manufacturer" onChange="resetValues();doAjax('type_list.php', 'man='+getValue('manufacturer'), 'populateType', 'post', '1')">
<option value="">Please select:</option></select>
</div>
<div class="rowElem"><br /><b>Type of Equipment: </b> <select name="printertype" id="printertype" disabled="disabled" onChange="doAjax('model_list.php', 'man='+getValue('manufacturer')+'&typ='+getValue('printertype'), 'populateModel', 'post', '1')">
<option value="">Please select:</option></select>
</div>
<div class="rowElem"><br /><b>Equipment to be depoted out:</b> <select name="printermodel" id="printermodel" disabled="disabled" onChange="showOutput();">
<option value="">Please select:</option></select>
</div>
<div class="rowElem"><br /><br /><input type="submit" name="action" value="Submit" /> </div>
</p>
<div id="loading" style="display: none;"></div>
<div id="output"></div>
