How to properly add inline Javascript code to a webform with javascript injector module I have recently started leaning Drupal 7. I have built my first Webform and I'd like to add a field that calculates automatically number of days between two dates as shown in below  I tried to follow this tutorial but I didn't understand it so I tried to use the module js injector to solve the problem!

This is the JS injection rule that I used

jQuery(document).ready(function($) {

$( "#edit-submitted-startdate,#edit-submitted-enddate" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
})

$( "#edit-submitted-startdate" ).datepicker({ dateFormat: 'dd-mm-yy' });
$( "#edit-submitted-enddate" ).datepicker({ dateFormat: 'dd-mm-yy' });

$('#edit-submitted-enddate').change(function() {
var start = $('#edit-submitted-startdate').datepicker('getDate');
var end   = $('#edit-submitted-enddate').datepicker('getDate');

if (start&lt;end) {
var days   = (end - start)/1000/60/60/24;
$('#edit-submitted-days').val(days);
}
else {
alert ("You cant come back before you have been!");
$('#edit-submitted-startdate').val("");
$('#edit-submitted-enddate').val("");
$('#edit-submitted-days').val("");
}
}); 
}); 
});


But it doesn't work. Can you help me finding the error? It seems I didn't write it well on Drupal as js rule.

This is the javascript code that I want to write:

&lt;script src="https://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet"             href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css" /&gt;
&lt;script&gt;
$(document).ready(function() {

$( "#startdate,#enddate" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
})

$( "#startdate" ).datepicker({ dateFormat: 'dd-mm-yy' });
$( "#enddate" ).datepicker({ dateFormat: 'dd-mm-yy' });

$('#enddate').change(function() {
var start = $('#startdate').datepicker('getDate');
var end   = $('#enddate').datepicker('getDate');

if (start&lt;end) {
var days   = (end - start)/1000/60/60/24;
$('#days').val(days);
}
else {
alert ("You cant come back before you have been!");
$('#startdate').val("");
$('#enddate').val("");
$('#days').val("");
}
}); 
}); 
&lt;/script&gt;
You need to use proper Drupal jQuery Syntax.

Screw the js injector module, you can do the same like this:

Create a block, for Text format select Full HTML and put this code

&lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"&gt;
&lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
&lt;script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"&gt;&lt;/script&gt;
&lt;script&gt;

(function ($) {
$( document ).ready(function() {

$( "#edit-submitted-startdate,#edit-submitted-enddate" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
})

$( "#edit-submitted-startdate" ).datepicker({ dateFormat: 'dd-mm-yy' });
$( "#edit-submitted-enddate" ).datepicker({ dateFormat: 'dd-mm-yy' });

$('#edit-submitted-enddate').change(function() {
var start = $('#edit-submitted-startdate').datepicker('getDate');
var end   = $('#edit-submitted-enddate').datepicker('getDate');

if (start&lt;end) {
var days   = (end - start)/1000/60/60/24;
$('#edit-submitted-days').val(days);
}
else {
alert ("You cant come back before you have been!");
$('#edit-submitted-startdate').val("");
$('#edit-submitted-enddate').val("");
$('#edit-submitted-days').val("");
}
}); 

});
})(jQuery);

&lt;/script&gt;


Place the block in some region. 



For Visibility Settings

Pages, select only listed pages and type the url for your webform.