diff --git a/smash/web/static/js/appointment.js b/smash/web/static/js/appointment.js
new file mode 100644
index 0000000000000000000000000000000000000000..a195413e582bf2a7569a3c57b140e9331164bf1b
--- /dev/null
+++ b/smash/web/static/js/appointment.js
@@ -0,0 +1,44 @@
+function appointment_type_begaviour(selectObj, outObject,api_call) {
+  var appointment_types_data = null;
+
+  function get_appointment_type_by_id(id) {
+    for (var i=0 ;i <appointment_types_data.length;i++) {
+      if (id == appointment_types_data[i].id) {
+        return appointment_types_data[i];
+      }
+    }
+    return null;
+  }
+  function compute_time(object) {
+    var vals = object.val();
+    var time = 0;
+    var max_paralel_time = 0;
+    for (var i=0;i<vals.length;i++) {
+      var appointment_type = get_appointment_type_by_id(vals[i]);
+      if (appointment_type== null) {
+        console.log("Cannot find appointment type with id: "+vals[i]);
+      } else {
+        if (appointment_type.can_be_parallelized) {
+          max_paralel_time = Math.max(max_paralel_time,appointment_type.default_duration);
+        } else {
+          time +=appointment_type.default_duration;
+        }
+      }
+    }
+    time = Math.max(time, max_paralel_time)
+    $(outObject).val(time+"");
+  }
+  $(selectObj ).change(function() {
+    var object = $(this)
+    if (appointment_types_data===null) {
+      $.get(api_call, function(data) {
+        appointment_types_data= data.appointment_types;
+        compute_time(object);
+      });
+    } else {
+      compute_time(object);
+    }
+
+  });
+
+}
diff --git a/smash/web/templates/appointments/add.html b/smash/web/templates/appointments/add.html
index ea975643a3f0a4fe536878447e77c41fc709adf8..5b1bcef0884cf18657badba9c33d1ea6e5e61408 100644
--- a/smash/web/templates/appointments/add.html
+++ b/smash/web/templates/appointments/add.html
@@ -95,6 +95,7 @@
 	<script src="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
   <script src="{% static 'AdminLTE/plugins/moment.js/moment.min.js' %}"></script>
 	<script src="{% static 'AdminLTE/plugins/fullcalendar/fullcalendar.min.js' %}"></script>
+  <script src="{% static 'js/appointment.js' %}"></script>
 	<script>
 		$(function () {
 			$('#table').DataTable({
@@ -152,6 +153,8 @@
 			});
 
 		});
+
+    appointment_type_begaviour($("[name='appointment_types']"), $("[name='length']"), "{% url 'web.api.appointment_types' %}");
 	</script>
 
   {% include "includes/datetimepicker.js.html" %}
diff --git a/smash/web/templates/appointments/edit.html b/smash/web/templates/appointments/edit.html
index 7b1b548ba8ceca13bce86b931ecc74929c8b4af4..8663014d7112a134ad02e617b655c0733fb68862 100644
--- a/smash/web/templates/appointments/edit.html
+++ b/smash/web/templates/appointments/edit.html
@@ -120,8 +120,8 @@
 
 	<script src="{% static 'AdminLTE/plugins/datatables/jquery.dataTables.min.js' %}"></script>
 	<script src="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
+  <script src="{% static 'js/appointment.js' %}"></script>
 	<script>
-    var appointment_types_data = null;
 		$(function () {
 			$('#table').DataTable({
 			  "paging": true,
@@ -132,46 +132,7 @@
 			  "autoWidth": false
 			});
 		});
-    function get_appointment_type_by_id(id) {
-      for (var i=0 ;i <appointment_types_data.length;i++) {
-        if (id == appointment_types_data[i].id) {
-          return appointment_types_data[i];
-        }
-      }
-      return null;
-    }
-    function compute_time(object) {
-      var vals = object.val();
-      var time = 0;
-      var max_paralel_time = 0;
-      for (var i=0;i<vals.length;i++) {
-        var appointment_type = get_appointment_type_by_id(vals[i]);
-        if (appointment_type== null) {
-          console.log("Cannot find appointment type with id: "+vals[i]);
-        } else {
-          if (appointment_type.can_be_parallelized) {
-            max_paralel_time = Math.max(max_paralel_time,appointment_type.default_duration);
-          } else {
-            time +=appointment_type.default_duration;
-          }
-        }
-      }
-      time = Math.max(time, max_paralel_time)
-      console.log(time);
-      $( "[name='length']" ).val(time+"");
-    }
-    $( "[name='appointment_types']" ).change(function() {
-      var object = $(this)
-      if (appointment_types_data===null) {
-        $.get("{% url 'web.api.appointment_types' %}", function(data) {
-          appointment_types_data= data.appointment_types;
-          compute_time(object);
-        });
-      } else {
-        compute_time(object);
-      }
-
-    });
+    appointment_type_begaviour($("[name='appointment_types']"), $("[name='length']"), "{% url 'web.api.appointment_types' %}");
 	</script>
 
   {% include "includes/datetimepicker.js.html" %}