CODEWITHSUNDEEP
javascriptjqueryinputnumbers
JU1CY
JU1CY

Reputation: 123

jquery two number inputs automatically recalculating each input if another is changed

I'm good with html, but no so good with javascripting :( I've searched all over stackoverflow and googled for it, but didn't found exactly what i need, only thing i found which is more or less close to what i need is http://jsfiddle.net/mrobin/QWSQp/64/

But what i need is two inputs:

<input type="text" name="num1" maxlength="15" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" value="">
<input type="text" name="num2" maxlength="15" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" value="" >

Both are set with rule, that only numbers with only one DOT is available:

oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');

Now question, i have a X value which is incerted by php

<?=$eur_price ?>

Point is creating two inputs where one is quantity and second is total price, but each field could be edited and if one is edited, another should be recalculated.

Example:

X=1.5 (set price) ... Num1=10 so Num2 would be calculated to 15

X=1.5 (set price) ... Num2=6 so Num1 would be calculated to 4 And so on... So you can set how many u need or how much u would like to spend...

Any help how to do it, or how to edit example which i found?

Upvotes: 0

Views: 48

Answers (2)

Ele
Ele

Reputation: 33726

Separate the responsibilities in your logic to reuse your code

  • Create an event i.e: calculate and bind it to num2.
  • Dispatch that event from input event of num1.

    The first two step must be applied to element num2.

  • Add id to your inputs for a better performance.
  • Move your logic to accept numbers and one dot to the event input.

Look at this code snippet

With this approach you can trigger the event calculate from anywhere

const calculate = new Event('calculate');

let n1 = document.getElementById("num1");
let n2 = document.getElementById("num2");
let eurPrice = 1.5;

// -------- num1 logic ---------
n1.addEventListener("input", function(e) {
  this.value = this.value.replace(/[^0-9.]/g, '');
  this.value = this.value.replace(/(\..*)\./g, '$1');    
  n2.dispatchEvent(calculate);
});

n1.addEventListener('calculate', function(e) {
  this.value = (n2.value / eurPrice).toFixed(2);
});

// -------- num2 logic ---------
n2.addEventListener("input", function(e) {
  this.value = this.value.replace(/[^0-9.]/g, '');
  this.value = this.value.replace(/(\..*)\./g, '$1');
  
  n1.dispatchEvent(calculate);
});

n2.addEventListener('calculate', function(e) {
  this.value = (n1.value * eurPrice).toFixed(2);
});
<input type="text" id="num1" name="num1" maxlength="15" value="">
<input type="text" id='num2' name="num2" maxlength="15" value="">

Upvotes: 1

Keith
Keith

Reputation: 24201

If using addEventListener, you can do this with one event and just check if num1 or num2 has been changed, if num2 changed, calc num1, if num1 changed calc num2;

Here is a simple example below.

const euro = 1.5;

const num1 = document.querySelector("[name=num1]");
const num2 = document.querySelector("[name=num2]")

document.body.addEventListener("input", function (evt) {
  if (evt.target === num1) {
    num2.value = (parseFloat(num1.value) * euro).toFixed(3);
  } else {
    num1.value = (parseFloat(num2.value) / euro).toFixed(3);
  }
});
<input type="text" name="num1" maxlength="15">
<input type="text" name="num2" maxlength="15">

Upvotes: 1

Related Questions