Script not working and can't understand error

[Phaelon]

Hey guys,

I have a simple problem and hope someone can tell me why my script isn't working. Firefox says "ReferenceError: search is not defined". To me it looks defined, but I am not confident in JavaScript and will say I have messed up.

<SCRIPT type="text/javascript">
    function search() {
        $search = "/products/mens/t-shirts/";
        if (document.getElementById("colour").value != "(Any)") {
            $search .= "?colour=".document.getElementById("colour").value."";
        }
        if (document.getElementById("material").value != "(Any)") {
            $search .= "?material=".document.getElementById("material").value."";
        }
        if (document.getElementById("countryoforigin").value != "(Any)") {
            $search .= "?countryoforigin=".document.getElementById("countryoforigin").value."";
        }
        if (document.getElementById("budget").value != "(None)") {
            $search .= "?budget=".document.getElementById("budget").value."";
        }
        alert("".$search."");
        window.location = $search;
    }
</SCRIPT>
<DIV class="centre">
    Colour: <SELECT id="colour"><OPTION>(Any)</OPTION></SELECT>
    <BR>
    Material: <SELECT id="material"><OPTION>(Any)</OPTION></SELECT>
    <BR>
    Country of origin: <SELECT id="countryoforigin"><OPTION>(Any)</OPTION><OPTION>Afghanistan</OPTION><OPTION>Albania</OPTION><OPTION>Algeria</OPTION><OPTION>American Samoa</OPTION><OPTION>Angola</OPTION><OPTION>Anguilla</OPTION><OPTION>Antigua and Barbuda</OPTION><OPTION>Argentina</OPTION><OPTION>Armenia</OPTION><OPTION>Aruba</OPTION><OPTION>Ascension Island</OPTION><OPTION>Australia</OPTION><OPTION>Austria</OPTION><OPTION>Azerbaijan</OPTION><OPTION>Bahamas</OPTION><OPTION>Bahrain</OPTION><OPTION>Bangladesh</OPTION><OPTION>Barbados</OPTION><OPTION>Belarus</OPTION><OPTION>Belgium</OPTION><OPTION>Belize</OPTION><OPTION>Benin</OPTION><OPTION>Bermuda</OPTION><OPTION>Bhutan</OPTION><OPTION>Bolivia</OPTION><OPTION>Bosnia and Herzegovina</OPTION><OPTION>Botswana</OPTION><OPTION>Brazil</OPTION><OPTION>British Indian Ocean Territory</OPTION><OPTION>Brunei Darussalam</OPTION><OPTION>Bulgaria</OPTION><OPTION>Burkina Faso</OPTION><OPTION>Burundi</OPTION><OPTION>Cambodia</OPTION><OPTION>Cameron</OPTION><OPTION>Canada</OPTION><OPTION>Cape Verde</OPTION><OPTION>Cayman Islands</OPTION><OPTION>Central African Republic</OPTION><OPTION>Chad</OPTION><OPTION>Chile</OPTION><OPTION>China</OPTION><OPTION>Colombia</OPTION><OPTION>Comoros</OPTION><OPTION>Congo</OPTION><OPTION>Congo, The Democratic Replublic of The</OPTION><OPTION>Cook Islands</OPTION><OPTION>Costa Rica</OPTION><OPTION>Cote D'Ivoire</OPTION><OPTION>Croatia</OPTION><OPTION>Cuba</OPTION><OPTION>Cyprus</OPTION><OPTION>Czech Republic</OPTION><OPTION>Denmark</OPTION><OPTION>Djibouti</OPTION><OPTION>Dominica</OPTION><OPTION>Dominican Republic</OPTION><OPTION>Ecuador</OPTION><OPTION>Egypt</OPTION><OPTION>El Salvador</OPTION><OPTION>Equatorial Guinea</OPTION><OPTION>Eritrea</OPTION><OPTION>Estonia</OPTION><OPTION>Ethiopia</OPTION><OPTION>Falkland Islands (Malvinas)</OPTION><OPTION>Faroe Islands</OPTION><OPTION>Fiji</OPTION><OPTION>Finland</OPTION><OPTION>France</OPTION><OPTION>French Guiana</OPTION><OPTION>French Polynesia</OPTION><OPTION>Gabon</OPTION><OPTION>Gambia</OPTION><OPTION>Georgia</OPTION><OPTION>Germany</OPTION><OPTION>Ghana</OPTION><OPTION>Gibraltar</OPTION><OPTION>Greece</OPTION><OPTION>Greenland</OPTION><OPTION>Grenada</OPTION><OPTION>Guadeloupe</OPTION><OPTION>Guam</OPTION><OPTION>Guatemala</OPTION><OPTION>Guinea</OPTION><OPTION>Guinea-Bissau</OPTION><OPTION>Guyana</OPTION><OPTION>Haiti</OPTION><OPTION>Holy See (Vatican City State)</OPTION><OPTION>Honduras</OPTION><OPTION>Hong Kong</OPTION><OPTION>Hungary</OPTION><OPTION>Iceland</OPTION><OPTION>India</OPTION><OPTION>Indonesia</OPTION><OPTION>Iran, Islamic Republic of</OPTION><OPTION>Iraq</OPTION><OPTION>Ireland</OPTION><OPTION>Israel</OPTION><OPTION>Italy</OPTION><OPTION>Jamaica</OPTION><OPTION>Japan</OPTION><OPTION>Jordan</OPTION><OPTION>Kazakhstan</OPTION><OPTION>Kenya</OPTION><OPTION>Kiribati</OPTION><OPTION>Korea, Democratic People's Republic of</OPTION><OPTION>Korea, Republic of</OPTION><OPTION>Kosovo, Republic of</OPTION><OPTION>Kuwait</OPTION><OPTION>Kyrgyzstan</OPTION><OPTION>Lao, People's Democratic Republic</OPTION><OPTION>Latvia</OPTION><OPTION>Lebanon</OPTION><OPTION>Lesotho</OPTION><OPTION>Liberia</OPTION><OPTION>Libyan Arab Jamahiriya</OPTION><OPTION>Liechtenstein</OPTION><OPTION>Lithuania</OPTION><OPTION>Luxembourg</OPTION><OPTION>Macao</OPTION><OPTION>Macedonia, The Former Yugoslav Republic of</OPTION><OPTION>Madagascar</OPTION><OPTION>Malawi</OPTION><OPTION>Malaysia</OPTION><OPTION>Maldives</OPTION><OPTION>Mali</OPTION><OPTION>Malta</OPTION><OPTION>Marshall Islands</OPTION><OPTION>Martinique</OPTION><OPTION>Mauritania</OPTION><OPTION>Mauritius</OPTION><OPTION>Mexico</OPTION><OPTION>Micronesia, Federated States of</OPTION><OPTION>Moldova, Republic of</OPTION><OPTION>Mongolia</OPTION><OPTION>Montenegro</OPTION><OPTION>Montserrat</OPTION><OPTION>Morocco</OPTION><OPTION>Mozambique</OPTION><OPTION>Myanmar</OPTION><OPTION>Namibia</OPTION><OPTION>Nauru</OPTION><OPTION>Nepal</OPTION><OPTION>Netherlands Antilles</OPTION><OPTION>New Caledonia</OPTION><OPTION>New Zealand</OPTION><OPTION>Nicaragua</OPTION><OPTION>Niger</OPTION><OPTION>Nigeria</OPTION><OPTION>Niue</OPTION><OPTION>Northern Mariana Islands</OPTION><OPTION>Norway</OPTION><OPTION>Oman</OPTION><OPTION>Pakistan</OPTION><OPTION>Palau</OPTION><OPTION>Panama</OPTION><OPTION>Papua New Guinea</OPTION><OPTION>Paraguay</OPTION><OPTION>Peru</OPTION><OPTION>Philippines</OPTION><OPTION>Pitcairn</OPTION><OPTION>Poland</OPTION><OPTION>Portugal</OPTION><OPTION>Puerto Rico</OPTION><OPTION>Qatar</OPTION><OPTION>Reunion</OPTION><OPTION>Romania</OPTION><OPTION>Russian Federation</OPTION><OPTION>Rwanda</OPTION><OPTION>Saint Kitts and Nevis</OPTION><OPTION>Saint Lucia</OPTION><OPTION>Saint Pierre and Miquelon</OPTION><OPTION>Saint Vincent and the Grenadines</OPTION><OPTION>Samoa</OPTION><OPTION>Sao Tome and Principe</OPTION><OPTION>Saudi Arabia</OPTION><OPTION>Senegal</OPTION><OPTION>Serbia</OPTION><OPTION>Seychelles</OPTION><OPTION>Sierra Leone</OPTION><OPTION>Singapore</OPTION><OPTION>Slovakia</OPTION><OPTION>Slovenia</OPTION><OPTION>Solomon Islands</OPTION><OPTION>Somalia</OPTION><OPTION>South Africa</OPTION><OPTION>Spain</OPTION><OPTION>Sri Lanka</OPTION><OPTION>Sudan</OPTION><OPTION>Suriname</OPTION><OPTION>Swaziland</OPTION><OPTION>Sweden</OPTION><OPTION>Switzerland</OPTION><OPTION>Syrian Arab Republic</OPTION><OPTION>Taiwan</OPTION><OPTION>Tajikistan</OPTION><OPTION>Tanzania, United Republic of</OPTION><OPTION>Thailand</OPTION><OPTION>Timor Leste</OPTION><OPTION>Togo</OPTION><OPTION>Tokelau</OPTION><OPTION>Tonga</OPTION><OPTION>Trinidad and Tobago</OPTION><OPTION>Tristan Da Cunha</OPTION><OPTION>Tunisia</OPTION><OPTION>Turkey</OPTION><OPTION>Turkmenistan</OPTION><OPTION>Turks and Caicos Islands</OPTION><OPTION>Tuvalu</OPTION><OPTION>Uganda</OPTION><OPTION>Ukraine</OPTION><OPTION>United Arab Emirates</OPTION><OPTION>United Kingdom</OPTION><OPTION>United States</OPTION><OPTION>United States Minor Outlying Islands</OPTION><OPTION>Uruguay</OPTION><OPTION>Uzbekistan</OPTION><OPTION>Vanuatu</OPTION><OPTION>Venezuela</OPTION><OPTION>Vietnam</OPTION><OPTION>Virgin Islands, British</OPTION><OPTION>Virgin Islands, U.S.</OPTION><OPTION>Wallis and Futuna</OPTION><OPTION>Yemen</OPTION><OPTION>Zambia</OPTION><OPTION>Zimbabwe</OPTION></SELECT>
    <BR>
    Budget: <SELECT id="budget"><OPTION>(None)</OPTION></SELECT>
    <BR>
    <BR>
    <INPUT onclick="return search();" type="button" value="SEARCH">
</DIV>

[cyberRobot]

It looks like you're mixing up PHP and JavaScript. Here are a couple things that I noticed:

• JavaScript variables don't use the dollar sign. More information can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals
• The concatenation character for JavaScript is "+". More information can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#String_operators

[Psycho]

Two other things:

 

1. That is not the correct way to get the selected value of a select list. You will need to use the selected index

2. If you are adding parameters to the URL, you start with a question mark and then use an ampersand between each additional item.

<SCRIPT type="text/javascript">
 
    function getSelectvalue(selID)
    {
        selObj =  document.getElementById(selID);
        return selObj.options[selObj.selectedIndex].value;
    }
 
    function search()
    {
        //Get values of options
        var color           = getSelectvalue('colour');
        var material        = getSelectvalue('material');
        var countryoforigin = getSelectvalue('countryoforigin');
        var budget          = getSelectvalue('budget');
        //Define default variables
        var search = "/products/mens/t-shirts/";
        var params = new Array();
        //Determine optional parameters
        if(color != "(Any)") {
            params[params.length] = "colour=" + color;
        }
        if(material != "(Any)") {
            params[params.length] = "material=" + material;
        }
        if(countryoforigin != "(Any)") {
            params[params.length] = "countryoforigin=" + countryoforigin;
        }
        if(budget != "(None)") {
            params[params.length] = "budget=" + budget;
        }
        //Add selected parameters to search URL
        if(params.length)
        {
            search += '?' + params.join('&');
        }
        //Return results
        alert(search);
        window.location = $search;
    }
</SCRIPT>

Edited May 13, 2014 by Psycho