javascript - 如何动态更新每行 JQuery 模态中的文本

标签 javascript php jquery html modal-dialog

所以我有一个每个用户的约会表,每行都有一个名为“操作”的按钮。单击此按钮时,会弹出一个模式,其中包含针对该特定行/预订的一系列操作,即完成预订或取消等。在该模式中,每个操作都有一个选项卡。其中一项操作是“调整付款”,用户可以调整客户必须为预约支付的最终金额。

但是,他们输入的新金额必须高于当前金额。这是我到目前为止所拥有的:

模态:

<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."&nbsp;" ?>  </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."&nbsp;". 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 脚本中的操作仅影响第一行的模式。起初,我使用 id 来检索数据和组件,但后来转向类,因为有多行,但这也不起作用。当前代码从第一行返回“old_payable_amount”,在第一行输入的“new_payable_amount”将显示在所有行中,并且该消息不会针对每行动态更新。

此外,单击“调整”按钮后,我希望它打开一个确认对话框,但是我没有使用确认,而是创建了一个模式,该模式在每次单击调整时都会正确打开。我想将一个值传递给这个模式,并且想知道如何才能做到这一点?我尝试通过 href 但模式不会按预期打开,除非我使用 jquery。

最佳答案

  1. 您可以使用 $(this) 从您 keyup 上获取值,而不是 $('.new_payable_amount') - 这将是集合...因此您可以使用此类更改每个元素的值。

    使用$(this).val()$(this).html() 更新并获取数据。

  2. 如果您的输入类型为 number,您可以使用 minmax 属性,而无需使用 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附加。

    关于javascript - 如何动态更新每行 JQuery 模态中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59737727/

    相关文章:

    javascript - 如何将 HTML、CSS 和 jQuery 实时注入(inject)到 iframe

    javascript - React中子元素的条件渲染

    执行大量 DNS 查询的 PHP 脚本 - 处理它的最佳方式

    php - JQuery 旋钮显示数字变化

    javascript - jquery输出id显示为[object object]

    带有隐藏内容的 jQuery 悬停

    javascript - jquery 的问题

    javascript - 如何获取特定的动态ID

    javascript - 如何使用 PlaneGeometry 增加平面厚度?

    php - 多选和mysql查询