Javascript code not executing? <p>In my webform, I want to have several text fields which have values 'please enter a date', 'enter your age', etc. which disappear when the text field gains focus and the user begins to enter data. I am trying to program this functionality with Javascript/JQuery however for some reason my javascript code is not executing.</p> <p>In the head of my html document I have included the source for what I am writing as well as JQuery:</p> <pre><code>&lt;head&gt; {% load staticfiles %} &lt;script src="{% static 'jquery-1.11.0.js' %}"&gt;&lt;/script&gt; &lt;script src="{% static 'text_area.js' %}"&gt;&lt;/script&gt; &lt;/head&gt; </code></pre> <p>further down in the document I have the code for a form which contains one of my text fields:</p> <pre><code>&lt;form action="" method="post"&gt; {% csrf_token %} &lt;td&gt; &lt;input id="expire_date" name="expire_date" type="text" value="{{list_expire_date}}"/&gt; &lt;/td&gt; ... &lt;/form&gt; </code></pre> <p>Here is the source for <em>text_area.js:</em></p> <pre><code>$('#expire_date').focusin(function(){ if(this.value == '{{list_expire_date}}') { this.value = ''; showCalendarControl(this); } }).focusout(function(){ if( this.value == '') { this.value = '{{list_expire_date}}'; hideCalendarControl(this); } }) </code></pre>