JavaScript switches modal show after validation

Question

I submit the form through modal. Based on user input, some data will be sent to modal. I need to check the data before loading the modal. The current code prevents the display of modality if no orders are selected, but as soon as the user selects some orders and re-returns the form, the modal form is not yet displayed.

Js

function batchHoldModalLauncher($hold_name){ // get modal id var modal_id = "#"+$hold_name+"_modal_id"; // check if any orders are selected if ($("#order_hold_table_body input:checkbox:checked").length > 0) { $(modal_id).modal('show'); } else { // no boxes checked $('.modal').on('show.bs.modal', function() { return false; }); alert('Choose some orders to put on hold'); } } 

Laravel PHP Code where the form is submitted and the modal is called

 <div class="col-md-3" style="margin-top: 20px;"> {!! Form::open(['url' => '/hold', 'method' => 'POST', 'class' => 'form-inline']) !!} <h4> Orders for Batch {{ $batch->id }} <div class="btn-group"> <button type="button" class="btn btn-sm btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Hold <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-danger"> @foreach($holds as $hold) <?php $hold_name = str_replace(' ', '', $hold->name); ?> <li><a href="#" data-toggle="modal" onclick="batchHoldModalLauncher('{{ $hold_name }}')" data-target="#modal{{ $hold_name }}">{{ $hold->name }}</a></li> @endforeach </ul> </div> </h4> <!-- Show each order in batch and allow user to place orders on hold --> <table class="table table-striped" id="order_hold_table"> <thead> <th>Order Number</th> <th>Hold <!-- de/select all checkboxes --> {!! Form::checkbox('hold_toggle', null, false, [ 'class'=>'toggle-button', 'style'=>'float:right' ]) !!}</th> </thead> <tbody id="order_hold_table_body"> @foreach($orders as $o) <tr> <td> @if($type == 'receiving') {{ $o->id }} @elseif($type == 'sales') {{ $o->order_number }} @endif </td> <td> {!! Form::checkbox('hold[]', $o->id, false, ['style'=>'float:right']) !!} </td> </tr> @endforeach </tbody> </table> {!! Form::close() !!} 

Answer 1

@BrentConnor, for your chat message, I am sending your solution as an answer.

It looks like you were using the source code that I provided in https://stackoverflow.com/a/126505/128 to stop the modals from appearing when a specific action occurs, even if that action is essentially considered a valid trigger. As you pointed out with my answer, this actually impaired the ability to open modals.

Instead of returning false for the action, you should stopPropagation() parent when targeting the child for testing if it meets the requirements to prevent the modal from starting.

 $('.modal_launcher').click(function(e) { // check if any orders are selected if($("#order_hold_table_body input:checkbox:checked").length > 0) { // append order numbers to the appropriate hold modal } else { // no orders selected -> alert user & prevent modal. e.stopPropagation(); alert('Choose some orders to put on hold'); } } 

I'm sorry that I could not be more active in helping you figure it out, but I'm glad that my advice led you to a solution. :)