form-script.js

   1 //Files and character counter
   2 var character_counter = document.getElementById('CharacterCount');
   3 var error_msg = document.getElementById('errorMsg');
   4 var error_msg_text = document.createTextNode("");
   5 error_msg.appendChild(error_msg_text);
   6 var textarea = document.getElementById('Comment');
   7 var submit = document.getElementById('submit');
   8 submit.setAttribute('disabled','');
   9
  10 var CHARACTER_LIMIT =  280;
  11
  12 function checkIfSubmitToBeDisabled(){
  13         //check all file fontainers
  14         for(var i = 1 ; i <= 4; i++){
  15                 if(document.getElementById("f" + i).files.length == 0){
  16                         var length = textarea.value.length;
  17                         if(length == 0) {
  18                                 submit.setAttribute('disabled','');
  19                                 error_msg_text.nodeValue = "value", "Input a comment and/or file";
  20                         }
  21                 }
  22                 else{
  23                         var length = textarea.value.length;
  24                         if(length > CHARACTER_LIMIT){
  25                                 characterCountColoring();
  26                                 return;
  27                         }
  28                         else{
  29                                 submit.removeAttribute('disabled');
  30                                 error_msg_text.nodeValue = "Click to submit";
  31                                 return;
  32                         }
  33                 }
  34         }
  35 }
  36
  37 function characterCountColoring(){
  38         var length = textarea.value.trim().length;
  39         var red = 0; var blue = 100; var green = 100;
  40         if(length == 0){
  41                 submit.setAttribute('disabled','');
  42                 error_msg_text.nodeValue = "Input a comment and/or file";
  43         }
  44         else if(length > CHARACTER_LIMIT){
  45                 red = 255; blue = 0; green = 0;
  46                 submit.setAttribute('disabled','');
  47                 error_msg_text.nodeValue = "Character count exceeded(>"+ CHARACTER_LIMIT + ")";
  48         }
  49         else{
  50                 red = Math.ceil(length/CHARACTER_LIMIT * 180);
  51                 submit.removeAttribute('disabled');
  52                 error_msg.innerHTML = "Click to submit";
  53         }
  54         character_counter.innerHTML = '<span style=\'color:rgb(' + red + ',' + green + ',' + blue + ')\'>' + length + '</span>'
  55 }
  56
  57 function setFileListener(file){
  58         file_node = document.getElementById(file);
  59         (function(_file_node){
  60                 _file_node.addEventListener("change", checkIfSubmitToBeDisabled);
  61         })(file_node);
  62 }
  63
  64 for(var i = 1 ; i <= 4; i++) setFileListener("f" + i);
  65
  66 if (textarea.addEventListener) {
  67         textarea.addEventListener('input', function() {
  68                 characterCountColoring();
  69   }, false);
  70 }
  71 else if (textarea.attachEvent) {
  72         textarea.attachEvent('onpropertychange', function() {
  73                 characterCountColoring();
  74   });
  75 }