如何使用AJAX，PHP和jQuery更新选择选项值

时间：2015-09-24 16:08:06

标签： php jquery ajax

我有以下表格：

enter image description here

我正在使用这个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>

总分钟：

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

我想要做的是使用AJAX自动重新计算用户输入的总分钟数或小时数。例如星期四输入了7小时，所以我需要标准时间显示为17小时15分钟

我添加了一个onchange事件<select name="sathrs" onchange="updateHrs()">

还有一个updateHrs函数

<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>

在updateHours.php中，我有以下代码：

<?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;
}

?>

标准小时更新的下一步是什么？

HTML表单

<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>

由于

2 个答案:

答案 0 :(得分：1)

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);
        }
     });
 }

通过这种方式，您将获得updateHours.php上的数据并获得适当的结果作为响应，然后相应地更新您的总数。

答案 1 :(得分：1)

使用javascript进行计算的一个小例子， 试试这个：

替换

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

与

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

然后使用此

替换javascript updateHrs()函数 
<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>
相关问题
最新问题