JavaScript calculated field

Question

I just can't see what am I doing wrong... It doesn't calculate the "stunden" field.

There is some small mistake from my side and I just can't see it.

EDITED: now all is working as it should

$(document).ready(function(){
  $('.item').keyup(function(){

    var starts = 0;
    var ends = 0;
    var stunden = 0;

    if (!isNaN($(this).find(".starts").val())) {
      starts = $(this).find(".starts").val();
    }
    if (!isNaN($(this).find(".ends").val())) {
      ends = $(this).find(".ends").val();
    }

    stunden = ends - starts;
    $(this).find(".stunden").val(stunden);

  });    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table id="t1" class="table table-hover">
    <tr>
      <th class="text-center">Start Time</th>
      <th class="text-center">End Time</th>
      <th class="text-center">Stunden</th>
    </tr>
    <tr id="row1" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
    <tr id="row2" class="item">
      <td><input name="starts[]" class="starts form-control" ></td>
      <td><input name="ends[]" class="ends form-control" ></td>
      <td><input name="stunden[]" class="stunden form-control" readonly="readonly" ></td>
    </tr>
  </table>
</div>

just to calculate the stunden input field from the starts and ends fields. stunden field is readonly and is a difference between starts and ends. — lewis4u, May 30 '16 at 08:53
`.stunden` is readonly and you listen to a keyup event on this input control. Therefore it's not possible this code will ever get executed — Dieterg, May 30 '16 at 08:54
yes you are right :( i changed it to listen .ends on keyup and it still doesn't work — lewis4u, May 30 '16 at 08:54

CerebralFart · Accepted Answer · 2016-05-30T09:00:16.617

5

The problem is that you are recalculating when a key is pressed in the .stunden fields, so you should move the event to the other inputs, or the parent row. You'll need something like this.

$('.item').keyup(function(){
  var starts = 0;
  var ends = 0;
  var stunden = 0;
  if (!isNaN($(this).find(".starts").val())) {
    starts = $(this).find(".starts").val();
  }
  if (!isNaN($(this).find(".ends").val())) {
    ends = $(this).find(".ends").val();
  }
  stunden = starts - ends;
  $(this).find(".stunden").val(stunden);
});

edited May 30 '16 at 09:00

answered May 30 '16 at 08:58

CerebralFart

3,336
5
26
29

1

@lewis4u You might want to try to search for an answer for a change. The chances that you are the first person in the world to have this problem are exactly **zero**. Also, don't post follow-up questions in the comments on StackOverflow. – Tomalak May 30 '16 at 09:12
1

@lewis4u, I agree with Tomalak, but just to help you out a bit, take a look at this; http://stackoverflow.com/questions/9640266/convert-hhmmss-string-to-seconds-only-in-javascript – CerebralFart May 30 '16 at 09:13

score 1 · Answer 2 · answered May 30 '16 at 09:32

Let me try your original keyup code .ends ,I just want to explain how is work below code

call .starts ,we currently in tr>td>input ,so need backup to tr by parent() then we find .starts inside its elements.As also .ends

find .studen is also in state tr>td>input ,so backup to td and go next td by next() then find .studen .

$(document).ready(function(){
    $('.ends').keyup(function(){
            var starts = 0;
            var ends = 0;
            var stunden = 0;            
            if (!isNaN($(this).parent().parent().find(".starts").val())) {
                starts = $(this).parent().parent().find(".starts").val();
            }
            if (!isNaN($(this).parent().parent().find(".ends").val())) {
                ends = $(this).parent().parent().find(".ends").val();
            }            
            stunden = starts - ends;
            $(this).parent().next().find('.stunden').val(stunden);

    });    
});

it doesn't work with $('.ends').keyup(function(){ ----- but with $('.item').keyup(function(){ it works — lewis4u, May 30 '16 at 09:35
Yes now I tested it, it works....but for me it was much simpler to change only one word ".item" instead of ".ends" — lewis4u, May 30 '16 at 09:49
yes I know it ! Just inform you ,your original code can also worked ! — Jack jdeoel, May 30 '16 at 10:07

JavaScript calculated field

2 Answers2