title: Sort Number in a Textbox on Ascending order using keypress function - HTML
body: <p>Hi I'm new in the community. </p>
  
  <p>I am trying to create a simple page where in there are 3 textbox. 1st text box is where the number will be entered. For 2nd and 3rd textbox is where the result will be shows on a different format as soon as the numbers are entered from the 1st textbox. 2nd text box should show the number with a <em>comma</em> which I was able to do. <strong>Example:</strong> As soon as I enter a number on the first text box 22 55 01 02 the 2nd text box will show 22,55,01,02 however on the 3rd textbox it should show the same number from 2nd textbox but on Ascending order which I weren't able to do so. Tried searching for a solution already but to now avail. Maybe I am just missing something. Any help will be very much appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function boxx1KeyPress() {
    var boxx1 = document.getElementById("boxx1");
    var s = boxx1.value.replace(/[ ,]+/g, ",");
    var x = s;
  
    var lblValue = document.getElementById("boxx2");
    lblValue.value = "" + s;
  
    // code for textbox 3 that didn't work
    //function sortAscending(a, b)
    //{return a - b;
    // }
  
    //var points = boxx3.value;
    //points.sort(sortAscending);
    //document.getElementById("boxx3").innerHTML = points;
  
  }
  
  function ClearField() {
    document.getElementById("boxx1").value = "";
    document.getElementById("boxx2").value = "";
    document.getElementById("boxx3").value = "";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;B&gt;&lt;br&gt;&lt;center&gt;PASTE  HERE&lt;/br&gt;    
  &lt;input id="boxx1" type="text" onKeyPress="boxx1KeyPress()" 
  
  onKeyUp="boxx1KeyPress()"&gt;
  &lt;br&gt;
  
  &lt;input type="button" Value="Clear Field" onClick="ClearField()"&gt;
  
  &lt;br&gt;
  
  &lt;br&gt;11x5 GAMES&lt;/BR&gt;
  &lt;span id="lblValue"&gt;&lt;/span&gt;
  &lt;input id="boxx2" type="text"&gt;
  
  &lt;br&gt; 
  &lt;br&gt;Keno Games&lt;/br&gt;
  &lt;input id="boxx3" type="text"&gt;
  &lt;br&gt;
  &lt;p id="Keno"&gt;&lt;/p&gt; 
  &lt;input type="button" Value="Ascend" onClick="points.sort(sortAscending)"&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>