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>

Answer 1

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

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

Answer 2

将您的活动设置为delegate。将您的代码更改为此并希望对您有所帮助。

$(document).ready(function() {
        $("document").on("#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);
        });
    });

jQuery：$ .post不从外部php文件加载数据

2 个答案: