Title: Using Javascript / jquery in a page template
Last modified: August 22, 2016

---

# Using Javascript / jquery in a page template

 *  [mmccrea](https://wordpress.org/support/users/mmccrea/)
 * (@mmccrea)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/using-javascript-jquery-in-a-page-template/)
 * Development Site: vstar.jlbworks.net/calculate-2/
 * Old client site: vanstar.com
 * I am in the process of extracting a calculator function from an old site for 
   a client, the function is mostly javascript plugged right into the template but
   also script called from the wp directory:
    `<script type="text/javascript" src
   ="<?php bloginfo('template_directory'); ?>/javascripts/jquery.shuffleLetters.
   js"></script>`
 * I didn’t want to edit my template files So i downloaded a plugin that allows 
   me to place javascript right into a page called: code embed.
 * The plugin works and the HTML / JS that I embeded is preforming how it is suppose
   to for the most part wit the exception of the last part that is utilizing the
   shuffleLetters.js script.
 * The main problem is the server is halting performance because it detects mod 
   security issues generated through the script I am trying to run.
    How do I prevent
   that?
 * The next issue is weather or not the code is calling the script in the directory
   correctly?
 * **on page HTML:**
 *     ```
       <div class="entry">
       				<div class="page-title">
       					<h2>Compute Your Commute</h2>
       				</div>
   
       				<div class="page-entry">
       					<p>Calculate your cost of commuting in your car and compare with a VanStar commute. *</p>
       					<div id="calculator">
       						<form action="" method="">
       							<div class="calculator-container">
       								<h4>Your commute and driving habits.</h4>
       								<span class="stripe">
       									<label for="calc-commute-distance">What is your daily round trip commute distance in miles from home to work?</label>
       									<input type="text" name="calc-commute-distance" id="calc-commute-distance"><br>
       								</span>
       								<span>
       									<label for="calc-work-days">How many days per month do you normally work? (fulltime=21)</label>
       									<input type="text" name="calc-work-days" id="calc-work-days"><br>
       								</span>
       								<span class="stripe">
       									<input type="submit" id="calc-submit" value="Submit">
       								</span>
       							</div>
       						</form>
       						<div class="calculator-container three-quarter">
       							<h4>Your Commute Expense in Personal Car</h4>
       							<span class="stripe">
       								<label for="calc-fuel-cost">Your monthly fuel costs</label>
       								<input type="text" name="calc-fuel-cost" id="calc-fuel-cost" value="$"><br>
       							</span>
       							<span>
       								<label for="calc-maint-cost">Your monthly maintenance and tire costs</label>
       								<input type="text" name="calc-maint-cost" id="calc-maint-cost" value="$"><br>
       							</span>
       							<span class="stripe" for="calc-month-direct">
       								<label>Your monthly direct commuting costs (including maintenance)</label>
       								<input type="text" name="calc-month-direct" id="calc-month-direct" value="$"><br>
       							</span>
       							<span for="calc-year-direct">
       								<label>Your yearly direct commuting costs (including maintenance)</label>
       								<input type="text" name="calc-year-direct" id="calc-year-direct" value="$"><br>
       							</span>
       							<span class="stripe" for="calc-van-month">
       								<label><strong style="color: red;">Estimated monthly VanStar costs</strong></label>
       								<input type="text" name="calc-van-month" id="calc-van-month" value="$"><br>
       							</span>
       							<span for="calc-van-year">
       								<label><strong style="color: red;">Estimated yearly VanStar costs</strong></label>
       								<input type="text" name="calc-van-year" id="calc-van-year" value="$">
       							</span>
       							<span class="stripe" for="calc-year-savings">
       								<label><strong style="color: red;">Estimated yearly savings by using VanStar</strong></label>
       								<input type="text" name="calc-year-savings" id="calc-year-savings" value="$">
       							</span>
       						</div>
       					</div>
   
       				</div>
   
       			</div>
   
       		</div>
   
       		<div id="calculator-savings">
       			You could save <div id="calculator-savings-figure">$0</div> a year by using VanStar!
       		</div>
   
       		<div class="clearfix"></div>
   
       <p style="text-align: center;"><a href="vstar.jlbworks.net">Click here to return to the Home page.</a></p>
       		<p><small>* Calculations based on figures provided by AAA. <a href="http://newsroom.aaa.com/tag/your-driving-costs">Read more here..</a></small></p>
   
       		 %CODE1%
       ```
   
 * **JS in a custom field:**
 *     ```
       <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/javascripts/jquery.shuffleLetters.js"></script>
       <script type="text/javascript">
       	(function($){
       		$('#calculator #calc-submit').on('click', function(){
       			var $this 							= $(this),
       					$commuteDistance		= $('#calc-commute-distance'),
       					$workDays						= $('#calc-work-days'),
       					$fuelCosts					= $('#calc-fuel-cost'),
       					$maintenanceCosts		= $('#calc-maint-cost'),
       					$monthlyDirectCost	= $('#calc-month-direct'),
       					$yearlyDirectCost		= $('#calc-year-direct'),
       					$monthlyVanCost			= $('#calc-van-month'),
       					$yearlyVanCost			= $('#calc-van-year');
       					$yearlySavings			= $('#calc-year-savings');
   
       			$fuelCosts.val('$' +
       				Math.round($commuteDistance.val() * $workDays.val() * .1234)
       			);
       			$maintenanceCosts.val('$' +
       				Math.round($commuteDistance.val() * $workDays.val() * .054)
       			);
       			$monthlyDirectCost.val('$' +
       				Math.round(($commuteDistance.val() * $workDays.val() * .1234) + ($commuteDistance.val() * $workDays.val() * .054))
       			);
       			$yearlyDirectCost.val('$' +
       				Math.round((($commuteDistance.val() * $workDays.val() * .1234) + ($commuteDistance.val() * $workDays.val() * .054)) * 12)
       			);
       			$monthlyVanCost.val('$' +
       				Math.round($commuteDistance.val() * $workDays.val() * .43 / 9)
       			);
       			$yearlyVanCost.val('$' +
       				Math.round(($commuteDistance.val() * $workDays.val() * .43 / 9) * 12)
       			);
       			$yearlySavings.val('$' +
       				Math.round(((($commuteDistance.val() * $workDays.val() * .1234) + ($commuteDistance.val() * $workDays.val() * .054)) * 12) - (($commuteDistance.val() * $workDays.val() * .43 / 9) * 12))
       			);
   
       			$('.calculator-container.three-quarter, .calculator-container.three-quarter .stripe').animate({
       				'width' : '700px'
       			}, 300, function(){
       				$('#calculator-savings').fadeIn();
   
       				$('#calculator-savings-figure').shuffleLetters({
       					'text' : $yearlySavings.val()
       				});
       			});
   
       			return false;
       		});
   
       	})(jQuery);
       </script>
       ```
   

The topic ‘Using Javascript / jquery in a page template’ is closed to new replies.

## Tags

 * [add code](https://wordpress.org/support/topic-tag/add-code/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)

 * 0 replies
 * 1 participant
 * Last reply from: [mmccrea](https://wordpress.org/support/users/mmccrea/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/using-javascript-jquery-in-a-page-template/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics