asked on

Auto compute

Hi experts, I have some issue in my project where I need to use the button to calculate the two "input text" automatically upon pressing the button. Is it possible to activate any key function by filling it thru command or function in a button? I tried to use onchange, onkeyup, onkeydown but they won't work. Please note that I need a solution base on the given codes below where the sequence is filling data thru commands and once the input text receive the date it will trigger the function iCalulate. Any help please. Thank you!

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="A1" onkeyup="return iCalulate()" readonly/>
<br/><br/>
<input type="text" id="A2" readonly/>
<br/><br/>
<input type="text" id="Sum" readonly/>
<br/><br>
<button onclick="return fillAll()">Go</button>

<script>
function iCalulate()
{
  var a = parseInt(document.getElementById("A1").value);
  var b = parseInt(document.getElementById("A2").value);
  
  document.getElementById("Sum").value = (a + b);
  //var c = (a + b);
  //alert(a + b)
}

function fillAll()
{
  document.getElementById("A1").value = "2"
  document.getElementById("A2").value = "3"
}
</script>
</body>
</html>

Open in new window

HainKurt

sorry but you made them readonly... how iCalulate will fire?

HainKurt

anyways, you can use jQuery

https://jsfiddle.net/ctdwjn0v/

<input type="text" id="A1" onchange="iCalulate()" readonly/>
<br/>
<br/>
<input type="text" id="A2" readonly/>
<br/>
<br/>
<input type="text" id="Sum" readonly/>
<br/>
<br>
<button onclick="return fillAll()">Go</button>

Open in new window

function iCalulate() {
  var a = parseInt(document.getElementById("A1").value);
  var b = parseInt(document.getElementById("A2").value);

  document.getElementById("Sum").value = (a + b);
  //var c = (a + b);
  //alert(a + b)
}

function fillAll() {
  document.getElementById("A1").value = "2"
  document.getElementById("A2").value = "3"
  $("#A1").change();
}

Open in new window

Whing Dela Cruz

ASKER

we can remove readonly sir, it doesn't matter in my project. Thank you!

HainKurt

it does not matter...
events will not fire with JS, but you can fire it with jQuery code like I did above :)

I used

<input type="text" id="A1" onchange="iCalulate()" readonly/>

Open in new window

and fired change event with jQuery

$("#A1").change();

Open in new window

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Whing Dela Cruz

ASKER

Thank you sir, but I've got referrence error for this, ($("#A1").change()) where can I download this?

Whing Dela Cruz

ASKER

I've got it sir, thank you so much and more power to you!

HainKurt

I used jQuery, just to make our lives easy :)