check input number whether bigger than certain value by using javascript

Question

I am trying to do some calculation in page, however, it doesn't work, I have tried the following code, does anyone can tell me the correct answer?

For example, when I enter a number then it will do one of the calculation.

<table><tr><td>
<input name="per_pax" size="2" style="border-style:none" type="text" id="per_pax" value="">
</td><td>
<input name="sum_tlcost" type="hidden" id="sum_tlcost" value="<?php echo $tl_cost;?>">
<input name="sum_htl_pp" type="hidden" id="sum_htl_pp" value="<?php echo $sum_htl_pp;?>">
<input name="sum_coach" type="hidden" id="sum_coach" value="<?php echo $sum_coach;?>"> 
<input name="pax" size="5" readonly="readonly" type="text" id="pax" value="">
</td></tr></table>
<script>
$(document).ready(function () {
var total = Number($("#per_pax").val());
if(total >= 20) {
$("#sum_tlcost,#sum_htl_pp,#sum_coach,#per_pax").keyup(function () {
if (parseInt($("#per_pax").val()) >= 20) {
$("#pax").val(Math.round(Number($("#sum_htl_pp").val()) + Number($("#sum_tlcost").val()) / Number($("#per_pax").val()) + Number($("#sum_coach").val()) / Number($("#per_pax").val()));
)}else{
$("#pax").val(Math.round(Number($("#sum_htl_pp").val()) + Number($("#sum_tlcost").val()) + Number($("#sum_coach").val())))
}
})}})
</script>

Why is there a document.ready inside of a keyup? Why are you binding change event inside keyup? — epascarello, Jul 06 '20 at 17:00
sorry, I am not familiar with JS, should it be like that? but still doesn't work — Henrik Kwok, Jul 06 '20 at 17:21
I'm fairly sure you don't want to be binding a new - duplicate - `keyup` event every single time a `change` event fires. — Niet the Dark Absol, Jul 06 '20 at 17:24

DynasticSponge · Accepted Answer · 2020-07-06T18:14:58.330

I'm not overly fond of the jquery keyup calls... so here's a snippet that should call your function using normal DOM event calls. The input event triggers as they type.. which should be similar to what you're trying to do with the keyups... I also cleaned up the function itself to make it more readable for presentation.

function onInputChange() {
  var perPax = parseInt($("#per_pax").val());
  var tlCost = Number($("#sum_tlcost").val());
  var htlPP = Number($("#sum_htl_pp").val());
  var coach = Number($("#sum_coach").val());
  var newValue = 0;
  if (perPax < 20) {
    newValue = (htlPP + tlCost) / (perPax + (coach / perPax));
  } else {
    newValue = htlPP + tlCost + coach;
  }
  $("#pax").val(Math.round(newValue))
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input name="per_pax" size="2" style="border-style:none" type="text" id="per_pax" value="" oninput="onInputChange()">
    </td>
    <td>
      <input name="sum_tlcost" type="hidden" id="sum_tlcost" value="<?php echo $tl_cost;?>">
      <input name="sum_htl_pp" type="hidden" id="sum_htl_pp" value="<?php echo $sum_htl_pp;?>">
      <input name="sum_coach" type="hidden" id="sum_coach" value="<?php echo $sum_coach;?>">
      <input name="pax" size="5" readonly="readonly" type="text" id="pax" value="">
    </td>
  </tr>
</table>

Thank you for telling me the other way to do, it works perfectly!! — Henrik Kwok, Jul 06 '20 at 18:34
Hi, could you help with this question if you have time? thanks https://stackoverflow.com/questions/62846536/how-to-save-to-database-by-using-ajax — Henrik Kwok, Jul 11 '20 at 11:49

check input number whether bigger than certain value by using javascript

1 Answers1