Question

I have the following function:

    function calcTotal(event)
    {var myId = event.currentTarget.id;

    myId = myId.replace(/[^0-9]/g, '');

    var timeRegex = /^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;

    if($('#start'+myId).val().match(timeRegex) && $('#end'+myId).val().match(timeRegex) &&    $('#pause'+myId).val().match(timeRegex))
    {   alert('win');
        var minutes = 0;

        var n = $('#end'+myId).val().split(':');
        minutes = parseInt(n[0])*60 + parseInt(n[1]);

        var n = $('#start'+myId).val().split(':');
        minutes -= parseInt(n[0])*60 + parseInt(n[1]);

        var n = $('#pause'+myId).val().split(':');
        minutes -= parseInt(n[0])*60 + parseInt(n[1]);

        var hours = Math.floor(minutes/60);
        minutes = minutes % 60;
        alert(hours + ':' + minutes);
        $('#total' + myId).val(hours + ':' + minutes);
    }
    else
    {   alert('fail');
        $('#total' + myId).val('00:00');
    }

    }   
   </script>

Let’s assume myID equals 1 and the lets assume the following values:

start1 = 00:00
end1 = 10:00
pause1 = 02:00

I would like to for this function to match the previous three values to a regular expression to determine if they are valid times.
After that I would like to calculate the total time worked that day: end1-start1-pause1.
For some reason even with these correct values the function nevers enters the if(….){ alert(‘win’)…}.

I think there is something wrong with my regex, but I already checked (stackoverflow question) and used that regex.

Could anybody tell me what I am doing wrong?

the entire code:

<?php
if(isset($_POST['date']))
{       $sql = "INSERT INTO `hour_administration`.`hours` (`h_id`, `date`, `start`, `end`) VALUES";
    foreach($_POST['date'] as $k => $v)
    {
        if(empty($_POST['date'][$k]))
        break;
        if($k > 0)      
        $sql .= ",";        
        $sql .= "(NULL, '".$_POST['date'][$k]."',  '".$_POST['start_time'][$k].":00',  '".$_POST    ['end_time'][$k].":00')";

    }
    $sql .= ";";
    echo " Query: ".$sql. "</BR>";
    mysql_query($sql) or die('Could not query: ' . mysql_error());
}

if(isset($_POST['rows']))
{
    $rows = $_POST['rows'];
}else
{
$rows = 5;  
}




?>
<script>
$(document).ready(function() { 

    $( ".date" ).datepicker({ dateFormat: "yy-mm-dd" });
    $(".time").mask("99:99");           
    $('.start_time').change(function(e) {               
            calcTotal(e);

    });

    $('.end_time').change(function(e) {     
        calcTotal(e);

    });

    $('.pause').change(function(e) {        
        calcTotal(e);

    });
});

function calcTotal(event)
{   var myId = event.currentTarget.id;  
    myId = myId.replace(/[^0-9]/g, ''); 

    var timeRegex = /^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/;

    if($('#start'+myId).val().match(timeRegex) && $('#end'+myId).val().match(timeRegex) && $('#pause'+myId).val().match(timeRegex))
    {   
        var minutes = 0;

        var n = $('#end'+myId).val().split(':');
        minutes = parseInt(n[0])*60 + parseInt(n[1]);

        var n = $('#start'+myId).val().split(':');
        minutes -= parseInt(n[0])*60 + parseInt(n[1]);

        var n = $('#pause'+myId).val().split(':');
        minutes -= parseInt(n[0])*60 + parseInt(n[1]);

        var hours = Math.floor(minutes/60);
        minutes = minutes % 60;
        alert(hours + ':' + minutes);
        $('#total' + myId).val(hours + ':' + minutes);
    }
    else
    {   alert($('#start'+myId).val());
        $('#total' + myId).val('00:00');
    }

}   
   </script>

<div class="inner_container">
  <form name="input" method="POST" id="input">
    <table border="1">
      <tr>
        <td>Date</td>
        <td>Start time</td>
        <td>End time</td>
        <td>Pause</td>
        <td>Total</td>
      </tr>
      <tr>
        <?php for($i = 0;$i < $rows;$i++)
        {?>
        <td><input type="text" class="date" name="date[]" id="start<?php echo $i;?>"></td>
        <td><input type="text" class="start_time time"  name="start_time[]" id="start<?php echo $i;?>"></td>
        <td><input type="text" class="end_time time" name="end_time[]" id="end<?php echo $i;?>" ></td>
        <td><input type="text" class="pause time" name="pause[] " id="pause<?php echo $i;?>"></td>
        <td><input type="text" class="total" name="total[]" id="total<?php echo $i;?>"></td>
      </tr>
      <?php }?>
    </table>
    <input type="submit" id="submit_inner_container"value="Submit">
  </form>
  <form name="amount" method="POST">
    <label for="name">How many rows would you like?</label>
    <input type="text" name="rows" size="3" id="rows" value="<?php echo $rows; ?>"/>
    <input type="submit" value="Rows"
  </form>
</div>

Answer 1

Your HTML shows that you have two input fields with the same id attribute:

    <td><input type="text" class="date" name="date[]" id="start<?php echo $i;?>"></td>
    <td><input type="text" class="start_time time"  name="start_time[]" id="start<?php echo $i;?>"></td>

Should the first one here use “date” instead of “start”?