Итак, у меня есть таблица встреч для каждого пользователя, и для каждой строки есть кнопка «Действия». При нажатии на эту кнопку появляется модальное окно с серией действий для этой конкретной строки / бронирования, т. Е. Завершить бронирование или отменить et c. В этом модале есть вкладки для каждого из этих действий. Одним из таких действий является «Настройка платежа», когда пользователь может настроить окончательную сумму, которую клиент должен заплатить за свое назначение.
Однако новая сумма, которую они вводят, должна быть больше текущей суммы. Вот что у меня есть:
Модальное:
<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>
<br><br>
<p style="float:left;font-size: 15px;"><strong>Note:</strong> You can only enter an amount higher than the current amount payable by the patient which is:</p>
<p id="old_payable_amount" class="old_payable_amount" style="text-align: center; font-size: 26px; font-weight: bold; "><?php echo CURRENCY_SYMBOL." ". number_format($bookings[$i]['payment'] / 100, 2); ?> </p>
<input type="button" id="adjustAmount" class="button btn-black btn-system btn button-lg adjustAmount" style="margin-top: 10px; border-radius:0px; width: 30%; margin-bottom: 0%;" value="Adjust">
<?php //} ?>
</div>
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 влияют только на модальные параметры для первой строки. Сначала я использовал идентификаторы для извлечения данных и компонентов, но затем обратился к классам, так как есть несколько строк, но это тоже не сработало. Текущий код возвращает значение 'old_payable_amount' из первой строки, значение 'new_payable_amount', введенное в первой строке, отображается во всех строках, и сообщение не обновляется динамически для каждой строки.
Дополнительно после настройки нажата кнопка «Я хочу, чтобы она открыла диалоговое окно подтверждения, но вместо использования подтверждения я создал модальное окно, которое открывается правильно при каждом нажатии кнопки« Настройка ». Я хотел бы передать значение этому модалу, и мне было интересно, как вы могли бы сделать это? Я пытался через href, но модал не открывается должным образом, если я не использую jquery.