我有 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:
抱歉我的英语不好。如果您不明白我的问题,请告诉我,以便我再次解释。
谢谢。 :))
最佳答案
属性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>
关于javascript - 获取不同modals bootstrap中输入框的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57693002/