javascript error

Question

My Script is working if

<script type="text/javascript">
$(document).ready(function() { 
    $('#holidayDate').datepicker(); 
    var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
    $("#tags").autocomplete({source:availableTags}); 
    $('#holidayDate').change(function() { 
        if ($(this).val().substring(0, 5) === '12/25') { 
            $('#tags').val('Christmas Day'); 
        }
        else { 
            $('#tags').val(''); 
        }                
    }); 
}); 
</script>

And its not working if I include multiple values using "if" or "else if"

<script type="text/javascript">
$(document).ready(function() { 
    $('#holidayDate').datepicker(); 
    var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
    $("#tags").autocomplete({source:availableTags}); 
    $('#holidayDate').change(function() { 
        if ($(this).val().substring(0, 5) === '12/25') { 
            $('#tags').val('Christmas Day'); 
        }
        if ($(this).val().substring(0, 5) === '01/01') { 
            $('#tags').val('New years Day'); 
        } 
        if ($(this).val().substring(0, 5) === '02/02') { 
            $('#tags').val('Groundhog Day'); 
        } 
        if ($(this).val().substring(0, 5) === '02/14') { 
            $('#tags').val('Valentine's Day'); 
        } 
        if ($(this).val().substring(0, 5) === '04/22') { 
            $('#tags').val('Earth Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '10/12') { 
            $('#tags').val('Columbus Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '07/04') { 
            $('#tags').val('Independence Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '10/31') { 
            $('#tags').val('Halloween'); 
        } 
        if  ($(this).val().substring(0, 5) === '11/11') { 
            $('#tags').val('Veterans Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '12/07') { 
            $('#tags').val('Pearl Harbor Remembrance Day'); 
        } 
        else { 
            $('#tags').val(''); 
        }                
    }); 
}); 
</script>

Answer 1

This line will cause an error

$('#tags').val('Valentine's Day');

Answer 2

$('#tags').val('Valentine's Day');

You got some quote problem here...
Should be:

$('#tags').val('Valentine\'s Day'); 

Note the backslash to escape the quote...

Answer 3

Could it be that it is broken due to

('Valentine's Day'); 

your single quote in the middle is closing the string.

Answer 4

You may also want to put $(this).val().substring(0, 5) into a variable in order to avoid fetching the data again on every conditional.

Answer 5

try this code snip

<script type="text/javascript">
$(document).ready(function() { 
    $('#holidayDate').datepicker(); 
    var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
    $("#tags").autocomplete({source:availableTags}); 
    $('#holidayDate').change(function() { 
    substr = $(this).val().substring(0, 5);
        if (substr == '12/25') { 
            $('#tags').val('Christmas Day'); 
        }
        else if (substr == '01/01') { 
            $('#tags').val('New years Day'); 
        } 
        else if (substr == '02/02') { 
            $('#tags').val('Groundhog Day'); 
        } 
        else if (substr == '02/14') { 
            $('#tags').val('Valentine's Day'); 
        } 
        else if (substr == '04/22') { 
            $('#tags').val('Earth Day'); 
        } 
        else if  (substr == '10/12') { 
            $('#tags').val('Columbus Day'); 
        } 
        else if  (substr == '07/04') { 
            $('#tags').val('Independence Day'); 
        } 
        else if  (substr == '10/31') { 
            $('#tags').val('Halloween'); 
        } 
        else if  (substr == '11/11') { 
            $('#tags').val('Veterans Day'); 
        } 
        else if  (substr == '12/07') { 
            $('#tags').val('Pearl Harbor Remembrance Day'); 
        } 
        else { 
            $('#tags').val(''); 
        }                
    }); 
}); 
</script>

Answer 6

Others beat me to the answer here, but I would still like to make a small suggestion. When working with a lot of if and else if it's sometimes useful to swap it for an object map. Currently, in your code you're performing a lot of unnecessary lookups that should at least be stored into a variable instead, but using an object map could make this code a lot simpler:

var map = {
    "12/25": "Christmas Day",
    "01/01": "New Years Day",
    "02/02": "Groundhog Day",
    "02/14": "Valentine's Day",
    "04/22": "Earth Day",
    "10/12": "Columbus Day",
    "07/04": "Independence Day",
    "10/31": "Halloween",
    "11/11": "Veterans Day",
    "12/07": "Pearl Harbour Remembrance Day",
}
$('#holidayDate').change(function() {
    // Check our object map for the date, default to "" if there isn't one.
    $('#tags').val(map[$(this).val().substring(0, 5)] || ""); 
}); 

Much neater, IMO.

EDIT: Since you can't get it working, I created an example for you.

Answer 7

I have created an NthDay to handle last day of and have an easter implementation too

The last version - Complete example with autofill of date from holiday too

What remains is to make it a nice jQuery plugin

Here is some of the code - no more switch

var fixedHolidayMap = { // "Name of day":"MM/DD"
"New years Day"               :"01/01",
"Groundhog Day"               :"02/02",
"Valentine's Day"             :"02/14",
"Earth Day"                   :"04/22",
"Flag Day"                    :"06/14",
"Independence Day"            :"07/04",
"Halloween"                   :"10/31",
"Veterans Day"                :"11/11",
"Pearl Harbor Remembrance Day":"12/07",
"Christmas Day"               :"12/25"
}
var variableHolidayMap = { // "Name of day":"Nth,DDD,M" 
"Martin Luther King Day":"3,Mon,1",  // 3rd Mon in Jan 
"Washington's Birthday" :"3,Mon,2",  // 3rd Mon in Feb 
"National Arbor Day"    :"-1,Fri,4", // Last Fri of Apr
"Mother's Day"          :"2,Sun,5",  // 2nd Sun in May
"Memorial Day"          :"-1,Mon,5", // Last Mon of May 
"Father's Day"          :"3,Sun,6",  // 3rd Sun in Jun
"Labor Day"             :"1,Mon,9",  // 1st Mon in Sep
"Columbus Day"          :"2,Mon,10", // 2nd Mon in Oct
"Thanksgiving Day"      :"4,Thu,11"  // 4th Thu in Nov
};
var availableTags = ["Easter"]; // the odd one out
var fixedHoliday = [];
for (var o in fixedHolidayMap) { // build a holiday by dateString 
  availableTags[availableTags.length] = fixedHolidayMap[o];
  fixedHoliday[fixedHolidayMap[o]]=o;
}  
for (var o in variableHolidayMap) availableTags[availableTags.length] = o;