Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

shahr's avatar
shahr
OP
3 years ago
Level 10

How to get order_id in modal of bootstrap when I click approved button?

I have a button for modal bootstrap 5.

blade

<button type="button" class="btn btn-success" data-action="{{ route('admin.orders.confirmeds') }}" data-bs-toggle="modal" data-bs-target="#approved" data-id="{{ $order->id }}">Approved</button>

script

<script>
    $('#approved').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var action = button.data('action');
        var confirmed = button.data('confirmed');
        var modal = $(this);
        modal.find('form').attr('action', action);
        modal.find('#confirmed').val(confirmed);
    });
</script>

modal

<div class="modal fade" id="approved" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="approved" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('admin.orders.confirmeds') }}" method="post">
                @csrf
                <input type="hidden" value="confirmed" name="order_id">
0 likes
16 replies
AungHtetPaing__'s avatar
AungHtetPaing__
3 years ago
Best Answer
Level 22

@webinar

<script>
    $('#approved').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var action = button.data('action');
        var orderId = button.data('id');
        var modal = $(this);
        modal.find('form').attr('action', action);
        modal.find('form input#orderId').val(orderId);
    });
</script>

<div class="modal fade" id="approved" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="approved" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('admin.orders.confirmeds') }}" method="post">
                @csrf
                <input id="orderId" type="hidden" name="order_id">

hope it work

1 like
AungHtetPaing__'s avatar

@webinar not sure but try to add empty value at input

<input id="orderId" type="hidden" name="order_id" value="">

check you get order id in var orderId or not. check you get element from modal.find("form input#orderId") or not.

1 like
shahr's avatar
shahr
OP
3 years ago
Level 10

@AungHtetPaing__

When I add this code

var orderId = button.data('id');
alert(orderId)

It get order id.

And how to check this code?

modal.find("form input#orderId")
Sinnbeck's avatar

@webinar When an input has an ID you dont need a specific selector, as IDs are unique

        $('#orderId').val(orderId);
AungHtetPaing__'s avatar

@webinar just try with #orderId

modal.find("#orderId").val(orderId)
// or
document.getElementById("orderId").value = orderId
1 like
shahr's avatar
shahr
OP
3 years ago
Level 10

@AungHtetPaing__

Are you mean?

<script>
    $('#approved').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var action = button.data('action');
        var orderId = button.data('id');
        var modal = $(this);
        modal.find('form').attr('action', action);
        document.getElementById("orderId").value = orderId;
    });
</script>
1 like

Please or to participate in this conversation.