0

I am using the following code to run a calculation as the user type in a number.

 <form action="index.php" method="post" autocomplete="off" data-abide> <input type="text" id="rate" name="rate"> <input type="text" name="supplier_cost" class="value-right" pattern="\d*" value="<?php echo $supplier_cost; ?>" id="decimal" required> <input type="text" name="sterling" id="sterling" class="value-right" disabled> <button type="submit" class="button tiny ebc-theme" name="save"><i class="fa fa-floppy-o" aria-hidden="true"></i> SAVE</button> </form> $(document).ready(function(){ var supplier_id = $('#supplier').val().split(","); var period = "<?php echo $period; ?>"; $.ajax({ url: "fetch_rate.php", method: "POST", data:{supplierID:supplier_id[1], periodID:period}, dataType:"text", success:function(data) { $('#rate').val(data); } }); }); $(document).ready(SterlingCalc); document.getElementById('decimal').addEventListener("keyup", SterlingCalc); var rate = document.getElementById('rate'); var sup_cost = document.getElementById('decimal'); function SterlingCalc(){ document.getElementById('sterling').value = (sup_cost.value / rate.value).toFixed(2) || 0; }

How do I add code so that the calulation runs on the page load if both the "rate" and "decimal" fields are already loaded (for example, values are populated by database)?

Thanks,

John

Improve this question
5
  • InvokeSterlingCalc() Commented May 28, 2019 at 15:05
  • that function gets invoked by jquery. no need to invoke it by hand Commented May 28, 2019 at 15:10
  • NaN (not a number) is caused by a division with something that is not a number or is indeterminate like 0/0. What is your php code? Commented May 28, 2019 at 16:03
  • The issue may because I am getting the rate using an Ajax query. I didn't include this earlier as I thought it would over complicate things and that the value was displaying in the input field. Commented May 28, 2019 at 16:53
  • toFixed(2) || 0 makes no sense, because toFixed(2) returns always a string and is always true. So || 0 is never executed. Commented May 28, 2019 at 18:15

2 Answers 2

Reset to default
1

Try this:

$(document).ready(function() { SterlingCalc(); document.getElementById('decimal').addEventListener("keyup", function(){SterlingCalc()}); }); function SterlingCalc(){ var rate = document.getElementById('rate'); var sup_cost = document.getElementById('decimal'); document.getElementById('sterling').value = (sup_cost.value / rate.value).toFixed(2) || 0; }

Reasoning: With $(document).ready(function(){ XXX }) you basically execute the code (XXX) when the document is loaded. Therefore, if the page loads the keybinding is put on 'decimal'.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

yes this one is more correct. my answer leads to assignig the event listener on key press.
I tried this and the sterling input field shows "Infinity".
what do you mean can you explain? or share an screenshot?
0

you are tryng to mix some of jquery with standard js that it's not a best practice, with jquery you can do something like this:

 $(document).ready(function () { let sterlingFunc = function (){ let rate = $('#rate'); let sup_cost = $('#decimal'); let value = (sup_cost.value / rate.value).toFixed(2) || 0; $('#sterling').val(value); // maybe return value } $("#decimal").on("keyup", sterlingFunc()); // to run when page is loaded sterlingFunc(); });
Improve this answer

10 Comments

this code is not doing the same thing. your code does not invoke sterlingFunc on document ready. it just defines it. Am I right?
yes, but he added an event listener so he wants to invoke the function on keyup not on page load, the ready function is needed to prevent from loading something before inizialization
How to you know he does not want to run it on page load as well? >> How do I add code so that the calulation runs on the page load if both the "rate" and "decimal" fields are already loaded
Mishel is right. I want to be able to run it on page load or keyup.
Sorry, not good on jQuery. How do I return the value so it appears in the sterling field?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.