我想在单击按钮时重新加载页面并在新选项卡中执行路由操作

Question

<form action="{{ route('payForEveryVoucherAndInvoice') }}" method="post" >
                                @csrf
                                <div class="row">
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <select id="payment_method" class="form-control" name="payment_method" required>
                                                <option value="" selected="selected" disabled="disabled">Payment</option>
                                                <option value="cash">Cash</option>
                                                <option value="credit">Credit</option>
                                                <option value="debit">Debit</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-sm-1">
                                    <input type="text" name="driver" value="{{$voucher_driver}}" hidden>
                                    </div>
                                    <div class="col-sm-5">
                                        <button class="btn btn-primary" style="background-color: #262533; border-color: #262533" onClick="refreshPage()" formtarget="_blank">All Entries Paid</button>
                                    </div>
                                </div>
                            </form>

This is my form. I am using onClick="refreshPage()" to refresh my page.

<script>
    function refreshPage(){
        window.location.reload();
    }
</script>

This is the script. But when i press the button. It just reloads the page and also not going on the route. I want to reload the page and open another tab to perform the route action.

Any Help? Thanks in advance.

Answer 1

You need to call submit event for that.

<script>
    function refreshPage(){
        $("form").submit();
        window.location.reload();
    }
</script>

I would recommend don't do this. use ajax as below.

$('body').on('submit', 'form', function (e) {
    e.preventDefault();
    $.ajax({
        url: $(this).attr('action'),
        data: new FormData(this),
        type: 'POST',
        contentType: false,
        cache: false,
        processData: false,
       
        success: function (data) {
           window.location.reload();
        },
    });
});