Question 270531 in Javascript Question posted in
A very good W3school tutorial can be found here.

After inputting number, use javascript to format with 3 zeros

I understand about using toFixed(3). What I’m not sure about is not to send this to a function. I have used onkeyup or onchange before but not passing a paramater. I need to know which textbox to update with the decimal.(the one calling the function) At the moment the alert is not working. All I want to do is immediately update the number in a textbox when the input stops. If I enter 103, it needs to update to 103.000. I have passed static variables in my textbox before, but not a number. Is this different?

<asp:TextBox ID="txtmaxbal" runat="server" Style="text-align: right" Width="40" MaxLength="7" onkeyup="percent(this)"></asp:TextBox>%

 <script type="text/javascript" language="javascript">
    function percent(tbox) {
        var retval = tbox.value.toFixed(3);
        var tboxid = tbox.id;
        alert(retval, id);
    }
</script>
Tags:

2

Answers


  1. 0

    You have several issues:

    1. tbox.value is a string, so you can’t directly use .toFixed().
    2. You have a typo with alert(retval, id); where id is not defined.
    3. You want to update the textbox immediately.
    function percent(tbox) {
  var numValue = parseFloat(tbox.value);
  if (!isNaN(numValue)) {
    var retval = numValue.toFixed(3);
    tbox.value = retval;
  }
  alert("Formatted value: " + tbox.value);
}

    Replace your existing percent function with the code above.

    Login or Signup to reply.
  2. 0

    You want to debounce the input and not update until the user stops typing or leaves the field. you do NOT want to alert since that blocks all further processing or typing on an interactive event handler like keydown/keyup/input

    Here is debounced typing (adjust the timeout)

    const debounce = (func, delay) => {
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
};

const percent = debounce(tbox => {
  var numValue = parseFloat(tbox.value);
  if (!isNaN(numValue)) {
    var retval = numValue.toFixed(3);
    tbox.value = retval;
  }
}, 500); // Adjust the delay (in milliseconds) as needed

const container = document.getElementById("container"); 

container.addEventListener("input", (event) => {
  const tgt = event.target;
  if (!tgt.matches(".txtmaxbal")) return; // not an txtmaxbal
  percent(tgt);
});
    <div id="container">
  <input type="text" class="txtmaxbal" style="text-align: right" maxlength="7" />%<br />
  <input type="text" class="txtmaxbal" style="text-align: right" maxlength="7" />%
</div>

    Changing and leaving

    const percent = tbox => {
  var numValue = parseFloat(tbox.value);
  if (!isNaN(numValue)) {
    var retval = numValue.toFixed(3);
    tbox.value = retval;
  }
};

const container = document.getElementById("container");

container.addEventListener("change", (event) => {
  const tgt = event.target;
  if (!tgt.matches(".txtmaxbal")) return; // not an txtmaxbal
  percent(tgt);
});
    <div id="container">
  <input type="text" class="txtmaxbal" style="text-align: right" maxlength="7" />%<br />
  <input type="text" class="txtmaxbal" style="text-align: right" maxlength="7" />%
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search