usernameon usernameon - 1 year ago 57
HTML Question

Sort Number in a Textbox on Ascending order using keypress function - HTML

Hi I'm new in the community glad that we have this kind of website. I am trying to look for a solution and found this site. Its already way too long ago since I tried to code or create a program for our thesis back in college.

I hope you guys can help me out. I believe the solution is just easy I just can't figure out as this is HTML.

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 comma which I was able to do. Example: 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.

This is the working code until textbox 2:

Hi I'm new in the community glad that we have this kind of website. I am trying to look for a solution and found this site. Its already way too long ago since I tried to code or create a program for our thesis back in college.


I hope you guys can help me out. I believe the solution is just easy I just can't figure out as this is HTML.

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 comma which I was able to do. Example: 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.

This is the working code until textbox 2:



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 = "";
}

<body>
<B><br><center>PASTE HERE</br>
<input id="boxx1" type="text" onKeyPress="boxx1KeyPress()"

onKeyUp="boxx1KeyPress()">
<br>

<input type="button" Value="Clear Field" onClick="ClearField()">

<br>

<br>11x5 GAMES</BR>
<span id="lblValue"></span>
<input id="boxx2" type="text">

<br>
<br>Keno Games</br>
<input id="boxx3" type="text">
<br>
<p id="Keno"></p>
<input type="button" Value="Ascend" onClick="points.sort(sortAscending)">

</body>





I'm sorry If there are mistakes(if there's any) the way I posted my question. Anyway, the only problem I'm having is the 3rd textbox format which should be in ascending order and still with comma as soon as numbers are entered on the 1st textbox. Looking forward for a solution on this. Thank you.

Answer Source

It's actually incredibly simple to sort numbers in JavaScript. All you need to do is:

  1. Split the initial string into an array with .split(" ") (splitting on a space).
  2. Sort the numbers with .sort().
  3. Join the numbers back to a string with .join().

Keep in mind that as the output box is an <input>, you'll need to use .value instead of .innerHTML:

function boxx1KeyPress() {
  var boxx1 = document.getElementById("boxx1");
  var s = boxx1.value.replace(/[ ,]+/g, ",");
  var x = s;

  var lblValue = document.getElementById("boxx2");
  lblValue.value = "" + s;

  // Fixed code for sorting the numbers
  var points = boxx1.value.split(" ");
  document.getElementById("boxx3").value = points.sort().join();

}

function ClearField() {
  document.getElementById("boxx1").value = "";
  document.getElementById("boxx2").value = "";
  document.getElementById("boxx3").value = "";
}
<body>
  <br>
  <center>
    <b>PASTE HERE</b>
    <input id="boxx1" type="text" onKeyPress="boxx1KeyPress()" onKeyUp="boxx1KeyPress()">
    <br>
    <br>
    <input type="button" Value="Clear Field" onClick="ClearField()">
    <br>
    <br>
    11x5 GAMES
    <span id="lblValue"></span>
    <input id="boxx2" type="text">
    <br>
    <br>
    Keno Games
    <input id="boxx3" type="text">
    <br>
    <p id="Keno"></p>
    <input type="button" Value="Ascend">
  </center>
</body>

Also note that you had some slightly invalid HTML in your above snippet (primarily that <br> is a void element, so the tag self-closes and thus </br> is not valid). I've cleaned up the HTML in my snippet above.

Hope this helps! :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download