AJAXによって既に更新されたAJAXを介した値の送信

Question

ユーザーからいくつかの値を受け取り、計算を実行して結果を出力するフォームがあります。計算を実行するスクリプトをAJAX経由で呼び出す関数を起動する各ユーザ編集フィールドにonchangeがあります。これまでのすべての良い、これは期待どおりに動作します。

ただし、フィールドの1つのユーザー入力に応じて、AJAXによっても更新される非表示フィールドには修飾語があります。私はこれも働いており、値が更新されていることがわかります。

私の問題は、この隠しフィールドが更新された後、その中の新しい値が計算を実行するスクリプトに送信されないということです。私は、これはDOMがjavascriptで変更されていて、リフレッシュする必要があるためだと推測しますが、これを行う方法を考えることはできません。

この関数は、配列を返す計算を実行するスクリプトを呼び出します。

function calcPremium() 
{ 
    var offer = 0; 
    var override = 0; 

    var pio = $('#policyIntroductoryOffer').prop('checked'); 
    var po = $('#policyOverride').prop('checked'); 
    if(pio) 
     { 
      alert('Offer checked'); 
      offer = 1; 
     } 
    if(po) 
     { 
      alert('Override checked'); 
      override = 1; 
     } 

    $.ajax({ 
     url: "calcPremium.php", 
     method: "get", 
     cache: false, 
     data: { 
       startDate : $('#policyStartDate').val(), 
       endDate : $('#policyEndDate').val(), 
       premium : $('#policyPremium').val(), 
       premium12 : $('#policy12m').val(), 
       buildingSum : $('#policyBuildingSum').val(), 
       rentSum : $('#policyRentSum').val(), 
       <?php if((isset($_GET['cat']) and $_GET['cat'] == 2) or $propertyCat == 2) 
        { ?> 
         typeRate : 100, 
         typeRentRate : 0, 
         typePOLRate : 0, 
        <?php } 
       else 
        { ?> 
         typeRate : $('#typeRate').val(), 
         typeRentRate : $('#typeRentRate').val(), 
         typePOLRate : $('#typePOLRate').val(), 
        <?php } ?> 
       rentSum1Yr : $('#policyRentSum1Yr').val(), 
       terrorZoneRate : $('#terrorRate').val(), 
       terrorZoneRentRate : $('#terrorRentRate').val(), 
       introductoryOffer : offer, 
       policyOverride : override, 
       policyIPTRate : <?php echo $iptRates['rateRate']; ?> 
     }, 
     dataType: "json", 
     success: function(policyDetails){ 
      console.info(policyDetails); 

      $('#policyPremium').val(policyDetails[0]); 
      $('#policy12m').val(policyDetails[1]); 
      $('#policyDays').val(policyDetails[4]); 
     }, 
     error: function(exception){ 
      alert('Exeption:'+exception); 
     } 
    }) 
} 

これらの機能は、ユーザーの入力

function calcRent() { 
    var r1 = document.getElementById('policyRentSum1Yr').value; 
    var r3 = r1 * 3; 
    <?php if((isset($_GET['cat']) and $_GET['cat'] == 2) or $propertyCat == 2) 
     { ?> 
      rentVal = document.getElementById('policyRentSum1Yr').value; 
      if(rentVal > 0) 
       { 
        setZoneRate(4); 
       } 
      else 
       { 
        setZoneRate(5); 
       } 
      checkDays(document.getElementById('policyStartDate').value, document.getElementById('policyEndDate').value); 
      document.getElementById('terrorRate').onshow; 
      document.getElementById('policyDetails').onshow; 
     <?php } ?> 
    document.getElementById('policyRentSum1Yr').value = r1; 
    document.getElementById('policyRentSum').value = r3; 
    calcPremium(); 
} 

function setZoneRate(z) { 
    if (z == "") { 
     document.getElementById('terrorRate').value = ""; 
     document.getElementById('terrorRentRate').value = ""; 
     return; 
    } else { 
     if (window.XMLHttpRequest) { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } else { 
      // code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       document.getElementById('terrorRates').innerHTML = xmlhttp.responseText; 
       document.getElementById('terrorRates').onshow; 
      } 
     } 
     xmlhttp.open("GET","setTerrorRates.php?q="+z,true); 
     xmlhttp.send(); 
    } 
} 

に基づいて隠しフィールドはここにあなたのコード内の主な問題は、あなたのことであるフォームのカットダウン版

<form action="<?php $_SERVER['PHP_SELF']; ?>" method="post" name="policyAddForm" id="policyAddForm"> 
    <input type="hidden" name="action" value="add" /> 
    <h4 class="small-title">Member Details</h4> 
    <input type="hidden" name="policyClient" value="<?php echo $_GET['mid']; ?>" /> 
    <input type="hidden" name="memberProperty" value="<?php echo $clientPropertyID; ?>" /> 
    <input name="clientName" type="text" class="form-control" value="<?php echo $clientName; ?>" readonly> 
    <select name="clientProperty" id="clientProperty" size="1" class="form-control selectpicker" onChange="chooseProperty(this.options[selectedIndex].value);"> 
     <option value="">Select&hellip;</option> 
     <option value="0">New property</option> 
     <?php while($clientProps = $clientProps_stmt->fetch()) 
      {?> 
       <option value="<?php echo $propertyID; ?>" <?php if($propertyType == NULL or $propertyTerrorismZone == NULL){?>data-content='<span class="text-danger" title="Incomplete property details, please edit"><i class="fa fa-exclamation-triangle"></i></span> <?php echo $propertyAddress1.', '.$propertyPostcode; if($propertyID == $clientPropertyID){ echo " [Contact address]"; } if($propertyCat == 2){ echo " [Land]"; }?>'<?php } ?>><?php echo $propertyAddress1.', '.$propertyPostcode; if($propertyID == $clientPropertyID){ echo " [Contact address]"; } if($propertyCat == 2){ echo " [Land]"; }?></option> 
      <?php } ?> 
    </select> 
    <div id="clientPropertyTable"> 
     <span id="typeRates"> 
      <input type="hidden" name="typeRate" id="typeRate" value="" /> 
      <input type="hidden" name="typeRentRate" id="typeRentRate" value="" /> 
      <input type="hidden" name="typePOLRate" id="typePOLRate" value="" /> 
     </span> 
     <span id="terrorRates"> 
      <input type="hidden" name="terrorRate" id="terrorRate" value="" /> 
      <input type="hidden" name="terrorRentRate" id="terrorRentRate" value="" /> 
     </span> 
     <input name="propertyAddress1" id="propertyAddress1" type="text" class="form-control" value=""> 
     <input type="hidden" name="propertyID" id="propertyID" value=""> 
     <input type="hidden" name="propertyCat" id="propertyCat" value="<?php if(isset($_GET['cat']) and $_GET['cat'] == 2) {echo "2"; } else { echo "1";} ?>" /> 
     <input name="propertyAddress2" id="propertyAddress2" type="text" class="form-control" value=""> 
     <input name="propertyTown" id="propertyTown" type="text" class="form-control" value=""> 
     <input name="propertyCounty" id="propertyCounty" type="text" class="form-control" value=""> 
     <input name="propertyPostcode" id="propertyPostcode" type="text" class="form-control" value=""> 
     <input name="propertySqFt" id="propertySqFt" type="text" class="form-control" value=""> 
     <input type="hidden" name="constructionType" value="0" /> 
     <input type="hidden" name="propertyType" value="8" /> 
     <input type="hidden" name="terrorZone" value="" /> 
     <input type="hidden" name="propertyYear" value="0" /> 
     <input type="hidden" name="propertyStoreys" value="0" /> 
    </div> 
    <div class="the-box" id="policyDetails"> 
    <h4 class="small-title">Policy Details</h4> 
    <input name="policyReference" type="text" class="form-control" value="" required> 
    <input id="policyStartDate" name="policyStartDate" type="text" class="form-control" value="" onChange="calcPremium()" required> 
    <?php $yr=date('Y'); 
    $dn = sanitiseDate(date('d/m/Y')); // Date now 
    $rd = sanitiseDate(RENEW_DATE.$yr); // Renewal date 
    if($dn[1] <= $rd[1]) 
     { 
      $theDate = RENEW_DATE.$yr; 
     } 
    else 
     { 
      $yr++; 
      $theDate = RENEW_DATE.$yr; 
     } ?> 
    <input id="policyEndDate" name="policyEndDate" type="text" class="form-control" value="<?php echo $theDate; ?>" onChange="checkDays(this.value, document.getElementById('policyStartDate').value)"> 
    <input id="policyDays" name="policyDays" type="text" class="form-control" value="" onChange="checkDays(document.getElementById('policyStartDate').value, document.getElementById('policyEndDate').value)"> 
    <input name="policyIntroductoryOffer" id="policyIntroductoryOffer" type="checkbox" value="1" onChange="calcPremium();"> Introductory Offer 
    <input name="policyBuildingSum" id="policyBuildingSum" type="text" class="form-control" value="<?php if((isset($_GET['cat']) and $_GET['cat'] == 2) or $propertyCat == 2) {echo "250";} ?>" onChange="calcPremium();"> 
    <input name="policyRentSum1Yr" id="policyRentSum1Yr" type="text" class="form-control" value="" onChange="calcRent();"> 
    <input name="policyRentSum" id="policyRentSum" type="text" class="form-control" value="" onChange="calcPremium();" readonly> 
    <input name="policyOverride" id="policyOverride" type="checkbox" value="1" onChange="calcPremium();"> QBE Override 
    <input name="policyPremium" id="policyPremium" type="text" class="form-control" value=""> 
    <input name="policy12m" id="policy12m" type="text" class="form-control" value=""> 
    <select name="policyStatus" class="form-control" size="1"> 
     <?php while($theStatus = $statusResult->fetch_assoc()) 
      {?> 
       <option value="<?php echo $theStatus['policyStatusID']; ?>"><?php echo $theStatus['policyStatusName']; ?></option> 
      <?php } ?> 
    </select> 
</div> 
    <button type="submit" class="btn btn-success btn-ha"> 
     <i class="fa fa-save"></i> Save changes 
    </button> 
</form> 

Answer 1

で更新setTerrorRates.phpへの呼び出しは非同期なので、実行されるとすぐに戻ります。このように実行すると、calcRent()の次の命令が実行される可能性があります。つまり、もう1つの呼び出しが完了する前にcalcPremium()を呼び出します。

あなたはjQueryのを使用しているので、最後に、calcRent()とsetZoneRate()機能にもその能力を活用することを検討同期

xmlhttp.open("GET", "setTerrorRates.php?q=" + z, false);

としてsetTerrorRatesへの呼び出しを宣言することで、これをで解決することができる最も簡単な方法。

編集

また、プログラムで変更されたフォームのonChange属性を取り除くことができます。このイベントは、コードの変更がコードを介して行われたときではなく、入力がフォーカスを失ったときにトリガーされます。

他のすべてのonChangeの値をHTMLコードからスクリプトに移動することもお勧めします。必須ではありませんが、プレゼンテーションと機能を分離することは、通常は良い方法です。