How to update select option value using AJAX, PHP and jQuery

Question

I have the following form:

I'm calculating the total hours using this PHP:

$totalhrs = $monhrs + $tueshrs + $wedshrs + $thurshrs + $frihrs + $sathrs + $sunhrs;
$totalMins = ($monmins + $tuesmins + $wedsmins + $thursmins + $frimins + $satmins + $sunmins) + ($totalhrs * 60);
$weeklyhrs = floor($totalMins / 60);
?> <option selected value="<?php echo $weeklyhrs; ?>"><?php echo $weeklyhrs ?></option>

And total minutes:

$totalMins = ($monmins + $tuesmins + $wedsmins + $thursmins + $frimins + $satmins + $sunmins) + ($totalhrs * 60);
$weeklymins = $totalMins % 60;
?> <option selected value="<?php echo $weeklymins; ?>"><?php echo $weeklymins ?></option>

What I want to do is use AJAX to automatically recalculate total minutes or hours if the user enters them. For example Thursday has had 7 hrs entered so I need the standard time to display as 17 hrs 15 mins

I have added an onchange event <select name="sathrs" onchange="updateHrs()">

And an updateHrs function

<script type="text/javascript">

  function updateHrs() {
      $.ajax({
        url:"http://staging.tbc-recruit.com/time-sheet/updateHours.php", //the page containing php script
        type: "POST", //request type
        success:function(result){
         alert(result);
       }
     });
 }
</script>

In updateHours.php I have the following code:

<?php
function weeklyHrs() {
    $totalhrs = $monhrs + $tueshrs + $wedshrs + $thurshrs + $frihrs + $sathrs + $sunhrs;
    $totalMins = ($monmins + $tuesmins + $wedsmins + $thursmins + $frimins + $satmins + $sunmins) + ($totalhrs * 60);
    $weeklyhrs = floor($totalMins / 60);
    //$weeklymins = $totalMins % 60;
    return $weeklyhrs;
}

function weeklyMins() {
    $totalhrs = $monhrs + $tueshrs + $wedshrs + $thurshrs + $frihrs + $sathrs + $sunhrs;
    $totalMins = ($monmins + $tuesmins + $wedsmins + $thursmins + $frimins + $satmins + $sunmins) + ($totalhrs * 60);
    //$weeklyhrs = floor($totalMins / 60);
    $weeklymins = $totalMins % 60;
    return $weeklymins;
}

?>

What would be the next step to have the standard hours update?

HTML form

<form id="edit" class="edit" name="candidateupdate" action="candidate-submitted.php?id=<?php echo "$_GET[id]"; ?>" method="post">
      <div class="grid-100 mar-bot-20 mar-top-20">
        <label>Temporary Worker Name</label>
        <input readonly value="<?php echo $name; ?>" /><br />
        <label>Client Compamy</label>
        <input readonly value="<?php echo $clientquery[0]['company']; ?>" /><br />
        <label>Week Ending</label>
        <input readonly value="<?php echo $tsquery[0]['weekending']; ?>" /><br />
        <label>Department</label>
        <input readonly value="<?php echo $tsquery[0]['department']; ?>" /><br />
        <label>Basic Pay Rate</label>
        <input readonly value="£ <?php echo $tsquery[0]['basicpay']; ?>" /><br />
      </div>
      <p class="grid-100 bold">Please do not complete hours for time that has been booked as holiday.</p>
      <p class="grid-100 bold">These days need to be left blank on the timesheet.</p>

      <div class="grid-100 mar-top-20">
      <table>
        <thead>
          <tr>
            <th>Day</th>
            <th style="padding-left:5px">Hrs</th>
            <th style="padding-left:5px">Mins</th>
          </tr>  
        </thead>
        <tbody>
          <tr>
            <td><label>Monday</label></td>
            <td>
              <select name="monhrs" onchange="updateHrs()">
              <?php 
                $monhrs = $tsquery[0]['monhrs'];
                displayHours($monhrs);
              ?>
              </select>
            </td>
            <td>
              <select name="monmins" onchange="updateHrs()">
              <?php 
                displayMinutes($monhrs);  
              ?>
              </select>
            </td>
          </tr>
          <tr>
            <td><label>Tuesday</label></td>
            <td>
              <select name="tueshrs" onchange="updateHrs()">
              <?php 
                $tueshrs = $tsquery[0]['tueshrs'];
                displayHours($tueshrs);
              ?>
              </select>
            </td>
            <td>
              <select name="tuesmins" onchange="updateHrs()">
              <?php 
                displayMinutes($tueshrs);  
              ?>
              </select>
            </td>
          </tr>
          <tr>
            <td><label>Wednesday</label></td>
            <td>
              <select name="wedshrs" onchange="updateHrs()">
              <?php 
                $wedshrs = $tsquery[0]['wedshrs'];
                displayHours($wedshrs);
              ?>
              </select>
            </td>
            <td>
              <select name="wedsmins" onchange="updateHrs()">
              <?php 
                displayMinutes($wedshrs);  
              ?>
              </select>
            </td>
          </tr>
          <tr>
            <td><label>Thursday</label></td>
            <td>
              <select name="thurshrs" onchange="updateHrs()">
              <?php 
                $thurshrs = $tsquery[0]['thurshrs'];
                displayHours($thurshrs);
              ?>
              </select>
            </td>
            <td>
              <select name="thursmins" onchange="updateHrs()">
              <?php 
                displayMinutes($thurshrs);  
              ?>
              </select>
            </td>
          </tr>
          <tr>
            <td><label>Friday</label></td>
            <td>
              <select name="frihrs" onchange="updateHrs()">
              <?php 
                $frihrs = $tsquery[0]['frihrs'];
                displayHours($frihrs);
              ?>
              </select>
            </td>
            <td>
              <select name="frimins" onchange="updateHrs()">
              <?php 
                displayMinutes($frihrs);  
              ?>
              </select>
            </td>
          </tr>
          <tr>
            <td><label>Saturday</label></td>
            <td>
              <select name="sathrs" onchange="updateHrs()">
              <?php 
                $sathrs = $tsquery[0]['sathrs'];
                displayHours($sathrs);
              ?>
              </select>
            </td>
            <td>
              <select name="satmins" onchange="updateHrs()">
              <?php 
                displayMinutes($sathrs);  
              ?>
              </select>
            </td>
          </tr>
          <tr>
            <td><label>Sunday</label></td>
            <td>
              <select name="sunhrs" onchange="updateHrs()"> 
              <?php 
                $sunhrs = $tsquery[0]['sunhrs'];
                displayHours($sunhrs);
              ?>
              </select>
            </td>
            <td>
              <select name="sunmins" onchange="updateHrs()">
              <?php 
                displayMinutes($sunhrs);  
              ?>
              </select>
            </td>
          </tr>
          <?php if( ($tsquery[0]['otpay'] == "") && ($tsquery[0]['ot2pay'] == "") ) { ?>
          <tr><td colspan="2"><p class="bold">Total Hours.</p></td></tr>
          <?php } else { ?>
          <tr><td colspan="2"><p class="bold">Please indicate the breakdown of your hours in the boxes below.</p></td></tr>
          <?php } ?>
          <tr>
            <td><label>Standard Time</label></td>
            <td>
              <select name="basichrs">
                <?php 
                  $totalhrs = $monhrs + $tueshrs + $wedshrs + $thurshrs + $frihrs + $sathrs + $sunhrs;
                  $totalMins = ($monmins + $tuesmins + $wedsmins + $thursmins + $frimins + $satmins + $sunmins) + ($totalhrs * 60);
                  $weeklyhrs = floor($totalMins / 60);
                  ?> <option selected value="<?php echo $weeklyhrs; ?>"><?php echo $weeklyhrs ?></option>

              </select>
            </td>
            <td>
              <select name="basicmins">
                <?php 
                  $totalMins = ($monmins + $tuesmins + $wedsmins + $thursmins + $frimins + $satmins + $sunmins) + ($totalhrs * 60);
                  $weeklymins = $totalMins % 60;
                  ?> <option selected value="<?php echo $weeklymins; ?>"><?php echo $weeklymins ?></option>

              </select>
            </td>
          </tr>
          <?php
              if($tsquery[0]['otpay'] != "") { ?>

          <tr>
            <td><label>Overtime x 1.5</label></td>
            <td>
              <select name="othrs">
                <?php 
                  $othrs = $tsquery[0]['othrs'];
                  standardHours($othrs);
                ?>  
              </select>
            </td>
            <td>
              <select name="otmins">
                <?php 
                  standardMinutes($othrs);
                ?>  
              </select>
            </td>
          </tr>
          <?php }
          if($tsquery[0]['ot2pay'] != "") { ?>
          <tr>
            <td><label>Overtime x 2</label></td>
            <td>
              <select name="ot2hrs">
                <?php 
                  $ot2hrs = $tsquery[0]['ot2hrs'];
                  standardHours($ot2hrs);
                ?>  
              </select>
            </td>
            <td>
              <select name="ot2mins">
                <?php 
                  standardMinutes($ot2hrs);
                ?>  
              </select>
            </td>
          </tr>
          <?php } ?>
        </tbody>
      </table>
       </div>
       <input name="submit" value="Submit Timesheet to Supervisor" type="submit">
    </form>

Thanks

Answer 1

a little example of using javascript to do the calculation, try this:

replace

<tr><td colspan="2"><p class="bold">Total Hours.</p></td></tr>

with

      <tr><td colspan="2"><p class="bold">Total Hours.</p><p id="totalhrs"></p></td></tr>

and then replace the javascript updateHrs() function with this

<script>
function updateHrs() {
    var totalhrs =  parseInt($("select[name=monhrs]")[0].value) + parseInt($("select[name=tueshrs]")[0].value) + parseInt($("select[name=wedshrs]")[0].value) + parseInt($("select[name=thurshrs]")[0].value) + parseInt($("select[name=frihrs]")[0].value) + parseInt($("select[name=sathrs]")[0].value) + parseInt($("select[name=sunhrs]")[0].value);
    var totalmins = (parseInt($("select[name=monmins]")[0].value) + parseInt($("select[name=tuesmins]")[0].value) + parseInt($("select[name=wedsmins]")[0].value) + parseInt($("select[name=thursmins]")[0].value) + parseInt($("select[name=frimins]")[0].value) + parseInt($("select[name=satmins]")[0].value) + parseInt($("select[name=sunmins]")[0].value)) + (totalhrs * 60);
    var weeklyhrs = Math.floor(totalmins / 60);
    var weeklymins = totalmins % 60;
    $( "#totalhrs" ).html(weeklyhrs);
    $( "#totalhrs" ).val(weeklyhrs);
    $("#totalmins").html(weeklymins);
    $( "#totalmins" ).val(weeklymins);
 }
</script>

Answer 2

function updateHrs() {
      $.ajax({
        url:"http://staging.tbc-recruit.com/time-sheet/updateHours.php", //the page containing php script
        type: "POST", //request type
        data:$("yourform").serialize(),
        success:function(result){
         alert(result);
        }
     });
 }

this way you will get data on updateHours.php and get the appropirate result in response then update your total accordingly.