因此,我有一个针对每个用户的约会表,每一行都有一个名为“操作”的按钮。单击此按钮时,将弹出一个模式,其中包含针对该特定行/预订的一系列操作,即完成预订或取消等。在该模式内,每个操作都有选项卡。这些动作之一是“调整付款”,其中用户能够调整客户必须为约会支付的最终金额。
然而,他们输入的新金额必须高于当前金额。这是我到目前为止的内容:
模式:
<div id="myTabContent" class="tab-content" style="font-weight: 200; font-family: MontserratExtraLight;" >
<div class="tab-pane fade active in" id="adjustPayment<?php echo $i; ?>">
<?php
<h2 style="float: left;" class="modal-title text-color">Adjust Payment</h2>
<br><br>
<p style="float: left;font-size: 15px;">Adjust Patients Final Payment</p>
<input type="hidden" name="id" value="<?php echo $bookings[$i]['id']; ?>"/>
<input type="hidden" name="customer_id" value="<?php echo $bookings[$i]['customer_id']; ?>"/>
<input type="hidden" name="booking_id" value="<?php echo $bookings[$i]['booking_id']; ?>"/>
<input hidden type="hidden" name="date_time_from" value='<?php echo $bookings[$i]['date_time_from']; ?>' />
<br><br>
<p style="float: left;font-size: 15px;">You can adjust the final amount the customer has to pay below. </p>
<br>
<p style="text-align: center;font-size: 15px;"> Please Enter a New Payable Amount (inc. Add-ons): </p> <br>
<div class="col-md-12">
<div class="form-group div-style">
<small class="help">
<span style="display:none;" id="message_c" class="message" role="alert">The new payable amount must be higher than the previous payable amount.</span> </small>
<span style="font-size:20px; font-weight:bold;"> <?php echo CURRENCY_SYMBOL." " ?> </span>
<input type="text" class="input form-control main-color input-lg new_payable_amount" id="new_payable_amount" style="background: #f4f4f4; width:30%; float:center; display: inline-block; font-weight:bold;" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" name="new_payable_amount"><br>
</div>
</div>
The JQuery:
$('.new_payable_amount').on('keyup', function() {
// var new_payable = document.getElementById('new_payable_amount').value;
var new_payable = $(".new_payable_amount").val();
//var old_payable = document.getElementById('old_payable_amount').innerHTML;
var old_payable = $(".old_payable_amount").html();
old_payable = old_payable.replace(/[^\d\.]/g, '');
if(new_payable <= old_payable){
// document.getElementById('message_c').innerHTML="The new payable amount must be higher than the previous payable amount." +old_payable +" " +new_payable;
$(".message").html("The new payable amount must be higher than the previous payable amount." +old_payable +" " +new_payable);
// document.getElementById('message_c').style.display = 'block';
$(".message").css("display", "block");
$("#adjustAmount").attr("disabled", true);
}else {
// document.getElementById('message_c').innerHTML= "";
$(".message").html("Pass ");
//document.getElementById('message_c').style.display = 'block';
$(".message").css("display", "block");
$("#adjustAmount").attr("disabled", false);
}
});
问题是,jQuery从第一行返回数据,并且jQuery脚本内的操作仅影响第一行的模式。最初,我使用ID来检索数据和组件,但是后来转到类,因为有多个行,但是也没有用。当前代码从第一行返回“ old_payable_amount”,在第一行中输入的“ new_payable_amount”将显示在所有行中,并且该消息不会针对每一行进行动态更新。
另外,单击“调整”按钮后,我希望它打开一个确认对话框,但我没有使用确认,而是创建了一个模态,该模态每次单击调整都可以正确打开。我想将值传递给该模式,并想知道如何实现?我试图通过href进行操作,但除非使用jquery,否则无法按预期方式打开模式。
您可以使用$(this)
从keyup
而不是$('.new_payable_amount')
的值中获取值-这将是集合...因此您可以使用此类更改每个元素的值。
使用$(this).val()
和$(this).html()
更新并获取数据。
number
类型,则可以使用min
和max
属性而无需使用js更新
在您的代码中我可以看到
<input type="hidden" name="id" value="<?php echo $bookings[$i]['id']; ?>"/>
在确认模式的id
中使用此id
。喜欢
<div id="updated_amount_<?php echo $bookings[$i]['id']; ?>"></div>
然后您就可以知道id来更新它...
var update_id = $(this).parent().parent().parent().parent().find("input[name='id']");
$("updated_amount_"+update_id).html(new_payable);
这可能是更好的方法,但是那是我很快想到的
还有关于如何附加模态对话框的问题。它是从一开始就以html呈现的,还是每次都由js附加。