Trim value of input text is is NaN, for further calculation. JS only

Question

So I have two input text fields, and two option select fields, currency exchange calculator. The value from first input field and from two select options are used to calculate the final value.

What I want to achieve is if user types in left input -- for example "20a" -- trim "a" or any other string and continue to calculate value.

Thanks so much in advance. Here is my code:

function calculusSmaller(cur1, cur2) {
    calculatedCurrency.value = parseFloat(currVal * (cur1 / cur2)).toFixed(2);
}

function calculusBiger(cur1,cur2) {
    calculatedCurrency.value = parseFloat(currVal * (cur1 * cur2)).toFixed(2);
}

//adjusting values if empty or NaN

if (!isNaN(placeholderCurrency.value)) {
    placeholderCurrency.parentNode.removeAttribute('data-error');
}else {
    //HERE is the code needed, trimming the String.
    placeholderCurrency.parentNode.setAttribute('data-error', 'Please enter a number');
    mainCurrency();
} 

if (placeholderCurrency.value == "") {
    resetValues();
}

function mainCurrency(var1, var2) {
    var1 = firstValue;
    var2  = secondValue;
    switch(var1 + "|" + var2) {
        case "usd|rsd":
            calculusBiger(usd,rsd);
        break;
        case "eur|rsd":
            calculusBiger(eur,rsd);
        break;
        case "rsd|usd":
            calculusSmaller(rsd,usd);
        break;
        case "rsd|eur":
                calculusSmaller(rsd,eur);
        break;
        case "eur|usd":
            calculusSmaller(eur,usd);
        break;
        case "usd|eur":
            calculusSmaller(usd,eur);
        break;
        default:
            resetValues();
    }

    console.log('test');
}      

mainCurrency();

And here is the HTML:

<select name="selectedCurrency">
    <option class="" data="0"  value="rsd">Rsd</option>
    <option class="" data = "2" value="eur" selected="selected" >Eur</option>
    <option class="" data = "1" value="usd" >Usd</option>
</select>
<input value="1" type="text"  name="placeholder-currency">

<select name="currentCurrency">
    <option class="" data="0" selected="selected" value="rsd">Rsd</option>
    <option class="" data="2" value="eur">Eur</option>
    <option class="" data="1" value="usd">Usd</option>
</select>
<input type="text" value="1" name="calculated-currency">

Simple regex to replace any non-digit `replace(/\D/g,'')` might be useful — Namaskar, Aug 31 '17 at 19:19
Possible duplicate of [HTML text input allows only numeric input](https://stackoverflow.com/questions/469357/html-text-input-allows-only-numeric-input) — , Aug 31 '17 at 19:22

score 0 · Accepted Answer · answered Aug 31 '17 at 19:30

Here's an example using onkeypress.

<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <select name="selectedCurrency">
    <option class="" data="0" value="rsd">Rsd</option>
    <option class="" data="2" value="eur" selected="selected">Eur</option>
    <option class="" data="1" value="usd">Usd</option>
  </select>
  <input value="1" type="text" name="placeholder-currency" onkeypress="return isNumber(event)">

  <select name="currentCurrency">
    <option class="" data="0" selected="selected" value="rsd">Rsd</option>
    <option class="" data="2" value="eur">Eur</option>
    <option class="" data="1" value="usd">Usd</option>
  </select>
  <input type="text" value="1" name="calculated-currency" onkeypress="return isNumber(event)">
  <script>
    function calculusSmaller(cur1, cur2) {
      calculatedCurrency.value = parseFloat(currVal * (cur1 / cur2)).toFixed(2);
    }

    function calculusBiger(cur1, cur2) {
      calculatedCurrency.value = parseFloat(currVal * (cur1 * cur2)).toFixed(2);
    }

    //adjusting values if empty or NaN

    if (!isNaN(placeholderCurrency.value)) {
      placeholderCurrency.parentNode.removeAttribute('data-error');
    } else {
      //HERE is the code needed, trimming the String.
      placeholderCurrency.parentNode.setAttribute('data-error', 'Please enter a number');
      mainCurrency();
    }

    if (placeholderCurrency.value == "") {
      resetValues();
    }

    function mainCurrency(var1, var2) {
      var1 = firstValue;
      var2 = secondValue;
      switch (var1 + "|" + var2) {
        case "usd|rsd":
          calculusBiger(usd, rsd);
          break;
        case "eur|rsd":
          calculusBiger(eur, rsd);
          break;
        case "rsd|usd":
          calculusSmaller(rsd, usd);
          break;
        case "rsd|eur":
          calculusSmaller(rsd, eur);
          break;
        case "eur|usd":
          calculusSmaller(eur, usd);
          break;
        case "usd|eur":
          calculusSmaller(usd, eur);
          break;
        default:
          resetValues();
      }

      console.log('test');
    }

    function isNumber(event) {
      event = (event) ? event : window.event;
      var charCode = (event.which) ? event.which : event.keyCode;
      if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode !== 46) return false;
      return true;
    }

    mainCurrency();
  </script>
</body>

</html>

Trim value of input text is is NaN, for further calculation. JS only

1 Answers1