JavaScript toggle modal show after validation

问题

I'm submitting a form through a modal. Based on user input, some data will need sent to the modal. I need to validate the data before loading the modal. The current code prevents showing the modal if no orders are selected, but once the user selects some orders and resubmits the form, the modal still doesn't show.

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 form is submitted and 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() !!}

回答1:

@BrentConnor, Per your message in the chat, I'm posting your solution as an answer.

It appears that you had been using the original code I had provided in https://stackoverflow.com/a/27868091/3869056 to stop your modals from opening when a particular action occurs, even if that action inherently is consider a valid trigger. As you pointed out with my answer, it actually broke the ability to open modals.

Rather than returning false for the action, you should stopPropagation() of the parent while targeting the child for testing if it meets the requirements for preventing the launch of the modal.

$('.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 I couldn't have been a bit more active in helping you to sort it out, but I'm glad my advice led you to the solution. :)

来源：https://stackoverflow.com/questions/33506716/javascript-toggle-modal-show-after-validation

标签

javascript

jquery

twitter-bootstrap

laravel-5

bootstrap-modal