javascript - 获取不同modals bootstrap中输入框的值

Question

我有 10 个模态 Bootstrap 。在每个模式中，我有 3 个具有不同值的输入框。当我点击 js_update_work 按钮时如何获取正在显示的模式的 3 个输入框中的值。

<div class="modal fade" id="modal_{{ order.assignmentId }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="{{ path('update_assignment') }}" method="post">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Cập nhật trạng thái đơn hàng</h5>
            </div>
            <div class="modal-body">
                <input type="hidden" name="order_id" value="{{ order.id }}">
                <input type="hidden" name="assignment_id" value="{{ order.assignmentId }}">
                <input type="hidden" name="assignment[state]" value="{{ order.taskState+1 }}">
            </div>
            <div class="modal-footer">
                <button id="js_update_work" class="btn btn-primary text-white js_update_work">{{ order.taskState == 0 ? 'Bắt đầu làm việc' : 'Hoàn tất công việc' }}</button>
            </div>
            </form>
        </div>
    </div>
</div>

这是我的js代码。

$("#js_update_work").click(function (e) {
    e.preventDefault();
    let assignment_id = $("input[name='assignment_id']").val();
    let state = $("input[name='state_id']").val();
    let order_id = $("input[name='order_id']").val();

    console.log(assignment_id, state, order_id);
})

但它始终是 console.log 第一个模态的输入值。即使我打开其他模式。

例如，第一个模态的输入值为100，第二个模态的输入为200。我希望当我单击第一个模式的按钮时，console.log 返回 100 的值。然后我显示第二个模式并执行相同操作，但 console.log 返回 200 的值。

P/s: 抱歉我的英语不好。如果您不明白我的问题，请告诉我，以便我再次解释。

谢谢。 :))

Answer 1

属性id在文档中必须是唯一的。您可以使用 class反而。您还应该通过使用 this 关键字引用单击的按钮来定位特定元素，例如:

$(this).parents('.modal-content').find(".modal-body input[name=assignment_id]").val()

演示:

$(".js_update_work").click(function (e) {
    e.preventDefault();
    let assignment_id = $(this).parents('.modal-content').find(".modal-body input[name=assignment_id]").val();
    let state = $(this).parents('.modal-content').find(".modal-body input[name='assignment[state]']").val();
    let order_id = $(this).parents('.modal-content').find(".modal-body input[name='order_id']").val();

    console.log(assignment_id, state, order_id);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="modal_{{ order.assignmentId }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="{{ path('update_assignment') }}" method="post">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Cập nhật trạng thái đơn hàng</h5>
            </div>
            <div class="modal-body">
                <input type="hidden" name="order_id" value="111">
                <input type="hidden" name="assignment_id" value="assignment 1">
                <input type="hidden" name="assignment[state]" value="state 111">
            </div>
            <div class="modal-footer">
                <button id="js_update_work" class="btn btn-primary text-white js_update_work">My Button</button>
            </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modal_{{ order.assignmentId }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="{{ path('update_assignment') }}" method="post">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Cập nhật trạng thái đơn hàng</h5>
            </div>
            <div class="modal-body">
                <input type="hidden" name="order_id" value="222">
                <input type="hidden" name="assignment_id" value="assignment 2">
                <input type="hidden" name="assignment[state]" value="state 222">
            </div>
            <div class="modal-footer">
                <button id="js_update_work_2" class="btn btn-primary text-white js_update_work">My Button</button>
            </div>
            </form>
        </div>
    </div>
</div>