First... I've been trying to solve this myself for the last 3 evenings... I've look at posts with similar topics to mine but have not come across an answer that helps me... I'm a little new to AJAX & JS but Not new to web programming...
I have a standard Automotive select list ... one select list feeds another...
Select Year and it gives a Select list of makes, Select the make and get a select list of models sel开发者_StackOverflow中文版ect a model & get a select list of trim styles... Pretty common stuff really...
I have the script to do all of this (found it online) it covered the year. make & Model part... I had to add the extra bit to do the Trim... Everything works as it is supposed to down until I get the Trim part (my Part :) ) .
When I select the model (which should then give me an appropriate Trim list) I get the following error in the Chrome error console:
"Uncaught ReferenceError: chevrolet is not defined (anonymous function) onchange"
What make this confusing to me by comparison to the other similar topics I've read is that "chevrolet" is the Make parameter - Not a function....
My Script is (you may recognize it...):
<script language="javascript" type="text/javascript">
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getMake(yearId) {
var strURL="/vehicles/getmake/"+yearId+"/";
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('makediv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getModel(yearId,makeId) {
var strURL="/vehicles/getmodel/"+yearId+"/"+makeId+"/";
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('modeldiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
function getSub(yearId,makeId,modelId) {
var strURL="/vehicles/gettrim/"+yearId+"/"+makeId+"/"+modelId+"/";
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('trimdiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
the refereneced html in the pages in each function respectively is: for the make:
<label for="make" class="select">Make_ch:</label>
<select placeholder="Select a Year First" name="make" id="make" autocapitalize="off" autocorrect="off" autocomplete="off"
onchange="getModel(<?php echo $year ?>,this.value)">
<?php foreach($vehicle_make->result() as $row)
{
echo '<option value = "'.$row->model_make_id.'">'.$row->model_make_id.'</option>';
}
?>
for the model:
<label for="model" class="select">Model_ch:</label>
<select placeholder="Select a Make First" name="model" id="model" autocapitalize="off" autocorrect="off" autocomplete="off"
onchange="getSub(<?php echo $year ?>,<?php echo $make ?>,this.value)">
<?php foreach($vehicle_model->result() as $row)
{
echo '<option value = "'.$row->model_name.'">'.$row->model_name.'</option>';
}
?>
for the trim:
<label for="trim" class="select">Trim_ch:</label>
<select placeholder="Select a Model First" name="trim" id="trim" autocapitalize="off" autocorrect="off" autocomplete="off">
<?php foreach($vehicle_trim->result() as $row)
{
echo '<option value = "'.$row->model_trim.'">'.$row->model_trim.'</option>';
}
?>
As I said... The year, Make, Model part all work correctly... I have verified that the Trim select list will display what it is supposed to if it receives all the correct parameters...
Does anyone se anything I'm missing?
Thanks in advance.... Russ
in your html model part, you should put your php tag between ' '. Example:
onchange="getSub('<? php echo $year ?>','<?php echo $make ?>',this.value)">
精彩评论