javascript - jQuery：$.post 没有从外部 php 文件加载数据

Question

我正在尝试创建一个脚本，该脚本从使用 jQuery post 加载的表单中计算数据，但我的脚本没有按预期工作。

这是我的代码：

//main file
function updateForm(monthsunpaid, unpaiddue, nodelay, tpenalty, idpostsave, code) {
    $.post("updatedata.php", {
            monthsunpaid: monthsunpaid,
            unpaiddue: unpaiddue,
            nodelay: nodelay,
            tpenalty: tpenalty,
            idpostsave: idpostsave,
            code: code
        })
        .done(function(data) {
            $(".table1").empty().append(data);
            $('#myModaledit').modal('hide');
        });
}

 
<script >
    // want to make this code work
    $(document).ready(function() {
        $("#nodelay").change(function() {
            var unpaiddue = $("#unpaiddue").val();
            var nodelay = $("#nodelay").val();
            var result = Number(unpaiddue) * Number(nodelay) * 0.05;
            var result = Math.round(result * 100) / 100;
            $("#tpenalty").val(result);
        });
    });
</script>

此数据来自使用以下updateForm()函数加载的 php 文件：

<form method="post">
  <div class="form-group">
    <label for="usr">UNPAID MONTHS</label>
    <input type="text" class="form-control" id="monthsunpaid"  value="<?php echo $delayed_months; ?>">
  </div>
  <div class="form-group">
    <label for="pwd">UNPAID MONTHLY DUES</label>
    <input type="text" class="form-control" id="unpaiddue"   value="<?php echo $unpaid_monthly; ?>">
  </div>
  <div class="form-group">
    <label for="pwd">NO. OF MONTHS DELAYED</label>
    <input type="text" class="form-control" id="nodelay"  value="<?php echo $months_delayed; ?>">
  </div>
  <div class="form-group">
    <label for="pwd">TOTAL PENALTY CHARGES EQUITY</label>
    <input type="text" class="form-control" id="tpenalty"  value="<?php echo $totalpenalty; ?>">
  </div>
  <input type="hidden"  id="idpostsave" value="<?php echo $id; ?>">
  <input type="hidden"  id="code" value="<?php echo $biscode; ?>">
  <div class="form-group">
    <button type="button" class="btn btn-primary" id="saveButton"  
onclick="updateForm($(monthsunpaid).val(), $(unpaiddue).val(), $(nodelay).val(), $(tpenalty).val(), $(idpostsave).val(), $(code).val())">SAVE</button>
  </div>
</form>

标签： javascriptjquery

Answer 1

我建议对您的代码进行以下更改，以避免混合内联 javascript 和 jquery 可能导致的问题。考虑通过执行以下操作将所有事件绑定逻辑委托给 jquery（而不是onclick在表单 HTML 中使用 on）：

//main file
function updateForm(monthsunpaid, unpaiddue, nodelay, tpenalty, idpostsave, code){

  $.post( "updatedata.php", { 
     monthsunpaid:monthsunpaid, 
     unpaiddue:unpaiddue, 
     nodelay:nodelay, 
     tpenalty:tpenalty, 
     idpostsave:idpostsave, 
     code:code 
  })
  .done(function( data ) {
		
     $( ".table1" ).empty().append( data );
     $('#myModaledit').modal('hide');
  });
}
  
// Shorthand for JQuery is now ready 
$(function(){ 

  $(document).on('change', "#nodelay", function(){
    var unpaiddue = $("#unpaiddue").val(); 
    var nodelay = $("#nodelay").val(); 	
    var result = Number(unpaiddue) * Number(nodelay) * 0.05;
    var result =   Math.round(result * 100) / 100;
  	
    $("#tpenalty").val(result);
  });
  
  // Attach a submit handler to your form, which is called
  // when the user submits the form
  $(document).on('submit', 'form', function() {
		
    updateForm( 
     $('#monthsunpaid').val(),
     $('#unpaiddue').val(), 
     $('#nodelay').val(), 
     $('#tpenalty').val(), 
     $('#idpostsave').val(), 
     $('#code').val()
    );
    
    // Prevent default form submit behaviour
    return false; 
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="post">
<div class="form-group">
  <label for="usr">UNPAID MONTHS</label>
  <input type="text" class="form-control" id="monthsunpaid"  value="<?php echo $delayed_months; ?>">
</div>
<div class="form-group">
  <label for="pwd">UNPAID MONTHLY DUES</label>
  <input type="text" class="form-control" id="unpaiddue"   value="<?php echo $unpaid_monthly; ?>">
</div>
<div class="form-group">
  <label for="pwd">NO. OF MONTHS DELAYED</label>
  <input type="text" class="form-control" id="nodelay"  value="<?php echo $months_delayed; ?>">
</div>
<div class="form-group">
  <label for="pwd">TOTAL PENALTY CHARGES EQUITY</label>
  <input type="text" class="form-control" id="tpenalty"  value="<?php echo $totalpenalty; ?>">
</div>
<input type="hidden"  id="idpostsave" value="<?php echo $id; ?>">
<input type="hidden"  id="code" value="<?php echo $biscode; ?>">
<div class="form-group">

<!-- replace button with input, leave event binding to jquery -->
<input type="submit" value="SAVE" class="btn btn-primary" id="saveButton" />
</div>
</form>