Question

Im rather new to javascript, and I’m building a basic website which someone can search through a small database of cars, which updates the search results as the user selects search criteria.

I’ve attempted to do this by making a form in my html, with multiple selections (CODE 1), and javascript with event listeners for the selections and ajax to search the database (CODE 2) through a PHP file.

CODE 1 – HTML

<div class="intro">
        <p>Enter your search criteria:</p>

            <div id="formbox">
                <form>
                    <!-- MAKE SELECTION -->
                    <select name="make" id="selectmake">
                    <option value="test">Car Make:</option>
                    <option value="Aston Martin">Aston Martin</option>
                    <option value="Ford">Ford</option>
                    <option value="Lotus">Lotus</option>
                    <option value="Vauxhall">Vauxhall</option>
                    </select>&emsp;

                    <!-- MODEL SELECTION -->
                    <select name="model" id="selectmodel">
                    <option value="">Car Model:</option>
                    <option value="DB9 Coupe">DB9 Coupe</option>
                    <option value="Vanquish">Vanquish</option>
                    <option value="Fiesta Hatchback">Fiesta Hatchback</option>
                    <option value="Focus Hatchback">Focus Hatchback</option>
                    <option value="Mondeo Estate">Mondeo Estate</option>
                    <option value="Elise">Elise</option>
                    <option value="Exige">Exige</option>
                    <option value="Astra Hatchback">Astra Hatchback</option>
                    <option value="Corsa D">Corsa D</option>
                    <option value="Frontera 4x4">Frontera 4x4</option>
                    </select>&emsp;

                    <!-- YEAR SELECTION -->
                    <select name="year" id="selectyear">
                    <option value="">Car Year:</option>
                    <option value="1998">1998</option>
                    <option value="2000">2000</option>
                    <option value="2001">2001</option>
                    <option value="2004">2004</option>
                    <option value="2007">2007</option>
                    <option value="2009">2009</option>
                    <option value="2010">2010</option>
                    </select>&emsp;

                    <!-- CC SELECTION -->
                    <select name="cc" id="selectcc">
                    <option value="">Car CC:</option>
                    <option value="1250">1250</option>
                    <option value="1400">1400</option>
                    <option value="1600">1600</option>
                    <option value="1800">1800</option>
                    <option value="2000">2000</option>
                    <option value="3200">3200</option>
                    <option value="5900">5900</option>
                    <option value="6000">6000</option>
                    </select>&emsp;

                    <!-- COLOUR SELECTION -->
                    <select name="colour" id="selectcolour">
                    <option value="">Car Colour:</option>
                    <option value="Black">Black</option>
                    <option value="Blue">Blue</option>
                    <option value="Red">Red</option>
                    <option value="Silver">Silver</option>
                    </select>&emsp;

                    <!-- RESET SELECTIONS -->
                    <input type="reset" />
                </form>
            </div>
        </div>

        <!-- SEARCH RESULTS -->
        <div id="results">
            Your results will be displayed here
        </div>

CODE 2 – JAVASCRIPT FILE

function initialise() {
//assign selection fields to variables
var i=0;
var make=document.getElementById("selectmake");
make.addEventListener('change', setmake(this.value), false);
var model=document.getElementById("selectmodel");
model.addEventListener('change', setmodel(this.value), false);
var year=document.getElementById("selectyear");
year.addEventListener('change', setyear(this.value), false);
var cc=document.getElementById("selectcc");
cc.addEventListener('change', setcc(this.value), false);
var colour=document.getElementById("selectcolour");
colour.addEventListener('change', setcolour(this.value), false);

//assign results area to a variable
var results=document.getElementById("results");

//setting search criteria to return all results by default
var makesearch="make=make";
var modelsearch="model=model";
var yearsearch="year=year";
var ccsearch="cc=cc";
var coloursearch="colour=colour";
results.innerHTML="initiate works";

//function to set the search to search make if set to an existent value
function setmake (makevar) {
    i=i+1;
    results.innerHTML=i;
    if (makevar.length>0) {
        makesearch="make='"+makevar+"'";
        results.innerHTML="EVENTIFFUNCTIONworks";
        constructsearch();
    }
}

function constructsearch() {
    var searchstring="WHERE "+makesearch+" AND "+modelsearch+" AND "+yearsearch+" AND "+ccsearch+" AND "+coloursearch;
    results.innerHTML="construct works";
    sendsearch(searchstring);
}
}

//function to update search results
function sendsearch(searchstring) {
//update search results with an XMLHttpRequest
if (window.XMLHttpRequest) {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("results").innerHTML="XMLworks";
    //xmlhttp.responseText;
  }
}

xmlhttp.open("GET","results.php?search="+searchstring,true);
xmlhttp.send();
}

window.onload=initialise;

The variable ‘i’ was made and all its use was for testing… I did original have this working to the point that when the page loaded, the results div would display the ‘i’ variable, but it did not change when a new selection was made in the ‘make’ selection box.

For some reason my code will now not work at all, it won’t even display ‘initiate works’

Any help is much appreciated and thanks in advance.

Answer 1

addEventListener takes a function as the second parameter as you have it you aren’t passing a function but rather calling a function. You can use an anonymous function expression to wrap the code you have in the call to addEventListener. For each of you calls to addEventListener do the following

make.addEventListener('change', function(){
    setmake(this.value)
}, false);