title: Remove whitespaces from input fields
body: <p>I know there is a lot of topics about this and i checked a lot of them without success. </p>
  
  <p>I have one input field in my form that creates a problem when it includes whitespaces. I already made it required so it's not possible to leave it empty or only add some whitespaces. </p>
  
  <p>What i noticed is that i can add a text and just add a whitespace in the end or in the beginning and my work will fail. </p>
  
  <p>Actually it should not be allowed to have any whitespaces at all, also not in the middle of the text but thats is to 99% not going to happend. What i understand you can only take away whitespaces in the beginning and in the end with trim function? </p>
  
  <p>Could some helpful person help me what i have to add to my code that it works...? </p>
  
  <p>Goal is that when i press submit the values from my five input fields should have no whitespaces at the beginning or in the end. </p>
  
  <p>Here is my whole code.</p>
  
  <pre><code>    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; 
      &lt;title&gt;Mathys Lieferungen&lt;/title&gt;
      &lt;script type="text/javascript" src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery-ui.1.10.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.ui.timepicker.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.ui.progressbar.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="validate.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      function changeHiddenInput (objDropDown)
          {
              document.getElementById("hiddenInput").value = objDropDown.value; 
  
          }
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $('.timepicker').timepicker(); 
              $('.datepicker').datepicker({dateFormat: 'dd.mm.yy'});
              $('.button').button();
              $('#myForm').submit(function() {
                  $('#formBox').hide();
                  var lnr = $("input[name=lnr]");
                  var auto_refresh = setInterval(
                  function()                                        
                  {                                        
                  $('#csv').load(lnr.val()+'_JobStatus.csv?'+new Date().getTime(),function(data){$(this).html(data).fadeIn("slow");});          });
                  $('#working').show();
                  $("#progressbar").progressbar();
                  var value = 0;
                  var timer = setInterval (function ()
                  {
                    $("div#progressbar").progressbar ("value", value);
                    value++;
                    if (value &gt; 100) value = 0;
                  }, 60);
  
  
                  $url = "/BT_Mathys_LNr_export_0.1/services/BT_Mathys_LNr_export?method=runJob";
                  $i = 1
                  $('#myForm :input').each(function() {
                      $inputName = $(this).attr('name');
                      if ($inputName != 'submit') {
                          $url = $url + "&amp;arg"+$i+"=--context_param%20"+$inputName+"="+$(this).val();
                          $i++
                      };
                  });
                  $('#runArea').load($url, function(){
                      $('#csv').hide();
                      $('#working').hide();
                      $('#resultBox').show(); 
                      $html = $('#runArea').html();
                      $('#csv').text($html);
                  });
                  return false;
              });
          });
      &lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/ui-lightness/jquery-ui.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="style2.css"&gt;
      &lt;style type="text/css"&gt;
          body { 
              background-color:#FFD8B2; 
              font-family: 'Century Schoolbook', Calibri,Arial;
              font-size: 1em;
              }
          #logo {
              position:absolute;
              top:10px;
              right:10px;
              }               
          h1 {
              margin-bottom:20px;
              font-size: 1.5em; 
              font-weight:bold; 
              text-align:center;
              }
          #formBox, #resultBox, #working{
              width:50%;
              margin:auto;
              margin-top:20%;
              }
          #resultBox, #working {
              display:none;
              }
          #runArea{
              border:none;
              height:0;
              width:0;
              }
          .button { font-family:Garamond; font-size: 15px; }
          .ui-timepicker { font-family:Garamond; font-size: 11px; margin-left:40px }
          .ui-datepicker { font-family:Garamond; font-size: 11px; margin-left:40px }
          .ui-timepicker-hour-cell, .ui-timepicker-minute-cell { cursor:pointer; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="logo"&gt;
          &lt;img src="\\rzwsrv006\daten\Opacc_Betrieb\Marcel Mathys\Mathys\FLYER_LOGO.png" alt="Flyer" width="260" height="48"&gt;
      &lt;/div&gt;
      &lt;div id="formBox"&gt;
          &lt;h1&gt;Lieferungen Mathys&lt;/h1&gt;
          &lt;form method="get" id="myForm"&gt;
              &lt;table width="290px" height="auto" style="margin:auto;"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;label for="lnr"&gt;Liefernummer:&lt;/label&gt;&lt;/td&gt;
                      &lt;td class="arg"&gt;&lt;input type="text" name="lnr" class="required"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;!--&lt;tr&gt;
                      &lt;td&gt;&lt;label for="vAbladezeit_spaet"&gt;Abladezeit spät:&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" name="vAbladezeit_spaet" class="timepicker"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;label for="vAbladezeit_frueh"&gt;Abladezeit früh:&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" name="vAbladezeit_frueh" class="timepicker"&gt;&lt;/td&gt;
                  &lt;/tr&gt;--&gt; 
                  &lt;tr&gt;
                      &lt;td&gt;&lt;label for="vAbladetermin"&gt;Abladetermin:&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" name="vAbladetermin" class="datepicker"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;                  
                  &lt;tr&gt;
                      &lt;td&gt;&lt;label for="vLadezeit_spaet"&gt;Ladezeit spät:&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" name="vLadezeit_spaet" class="timepicker"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;label for="vLadezeit_frueh"&gt;Ladezeit früh:&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" name="vLadezeit_frueh" class="timepicker"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;label for="vLadedatum"&gt;Ladedatum:&lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="text" name="vLadedatum" class="datepicker"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;  
                  &lt;tr&gt;
  
                      &lt;td&gt;Mitarbeiter:&lt;/td&gt;
                      &lt;td&gt;&lt;select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)"&gt;
                      &lt;option value="e.schaer@flyer.ch" name="email"&gt;Ester Schär&lt;/option&gt;
                      &lt;option value="i.gerber@flyer.ch" name="email"&gt;Irene Gerber&lt;/option&gt;
                      &lt;option value="m.maeder@flyer.ch" name="email"&gt;Marion Mäder&lt;/option&gt;
                      &lt;option value="apelsinrepubliken@hotmail.com" name="email"&gt;Jens Frejd&lt;/option&gt;
                      &lt;option value="marcel.lack@symbium.ch" name="email"&gt;Marcel Lack&lt;/option&gt;
                      &lt;/select&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input type="hidden" name="hiddenInput" id="hiddenInput" /&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;p style="text-align:center;"&gt;&lt;input type="submit" name="submit" id="submit" value=" Ausführen " class="button"&gt;&lt;/p&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div id="working" onkeydown ="my_onkeydown_handler();"&gt;Verarbeitung läuft, bitte warten und job nicht abbrechen. Job läuft im Hintergrund&lt;div id="progressbar"&gt;
      &lt;/div&gt;
  
  
      &lt;/div&gt;
      &lt;div id="resultBox"&gt;
          &lt;h1 id="csv"&gt;&lt;/h1&gt;
          &lt;p style="text-align:center;"&gt;&lt;input type="button" onClick="location.href='./'" value=" &lt;&lt; Neue Lieferung ausführen " class="button"&gt;&lt;/p&gt;
          &lt;!--&lt;p style="text-align:left;"&gt;Rückmeldung:&lt;br&gt;
          &lt;textarea id="csv" style="width:100%;height:300px;"&gt;&lt;/textarea&gt;  
          &lt;/p&gt;--&gt;
      &lt;/div&gt;
      &lt;iframe id="runArea" /&gt;
  &lt;/body&gt;
  </code></pre>