如何根据Laravel 4中的旧输入触发javascript事件？

Question

How to trigger a javascript event base on an old input in Laravel 4 ?

       The script work perfectly when select from dropdown menu.

In Laravel 4, in one of my Edit view, I tried to Edit some logistics information. Base on my dropdown menu, the layout and behavior of my form will be slightly different.

Again, the script work perfectly when selected from dropdown menu.

I loaded the whole form base on old inputs.Everything works great ! Only the script doesn't seem to run base on an old inputs that were loaded.

The trigger won't change unless, I started to select something from my payment_method list, then thing started to work again.

QUESTION

Is there away to load the script base on an old input in Laravel 4?

Form Details :

Dropdown Menu id = payment_method

• receiver paid
• shipper paid

Dropdown Menu id = shipping_carrier - Fedex - DHL

Input Field id = shipping_number __________________

Goal:

if user select shipper paid

1. disable shipping_carrier
2. hide() my shipping number input

Else,

1. enable the shipping_carrier
2. enable shipping number input (required)

CODE

<script type="text/javascript">
$( document ).ready(function() {

    $('#note').hide();

    $("#payment_method").change(function() {


        console.log($("#payment_method option:selected").val());



        if ($("#payment_method option:selected").val() == 2) {
            $('#shipping_carrier').prop('disabled', 'disabled');
            $('#shipping_carrier').val(1);
            $('#shipping_number').hide();
            $('#note').show();
            $('.shipping_carrier').hide();
        } else {
            $('#shipping_carrier').prop('disabled', false);
            $('#shipping_number').show();
            $('#note').hide();
        }
    });


})

Part of my Edit Form in blade

<div class="form-group ">
    <label class="col-sm-5 control-label required  " for="payment_method">Payment Method </label>

    <div class=" col-sm-7 form-group float-label-control">
        <div class="input-group">
            <span class="input-group-addon">
                <i class="ace-icon fa fa-dollar"></i>
            </span>
             {{Form::select('payment_method', array('1' => 'Receiver Paid', '2' => 'Shipper Paid'), isset($distributor->payment_method ) ? $distributor->payment_method  : 'Receiver Paid', array('id' => 'payment_method')); }}
        </div>
    </div>
</div>

<div class="form-group ">
    <label class="col-sm-5 control-label required  " for="shipping_carrier">Shipping Carrier </label>

    <div class=" col-sm-7 form-group float-label-control">
        <div class="input-group">
            <span class="input-group-addon">
                <i class="ace-icon fa fa-paper-plane-o"></i>
            </span>
             {{Form::select('shipping_carrier', array('FedEx' => 'FedEx', 'UPS' => 'UPS', 'DHL' => 'DHL', 'Nippon Express' => 'Nippon Express'), isset($distributor->shipping_carrier ) ? $distributor->shipping_carrier  : 'Receiver Paid', array('id' => 'shipping_carrier')); }}
        </div>
    </div>
</div>

<span value="" name="note" id="note"> My Company will paid for the shipping cost and bill to receiver. </span>

<div class="form-group">
    <label class="col-sm-5 control-label "> </label>
    <div class="col-sm-7 form-group float-label-control ">
        <span class="input-icon input-icon-right">
             {{Form::text('shipping_number', isset($distributor->shipping_number ) ? $distributor->shipping_number  : 'Receiver Paid', array('id' => 'shipping_number','placeholder'=>'Carrier Acct#')); }}
             {{ $errors->first('shipping_number','<a title=":message" class="btn btn-white btn-pink btn-sm"><span class="glyphicon glyphicon-remove "></span> :message </a>') }}

        </span>
    </div>
</div>

Suport Documents(Images):

1. Receiver Paid Selected
2. Shipper Paid Selected

Answer 1

<script type="text/javascript">
$( document ).ready(function() {

    $('#note').hide();

    $("#payment_method").change(function() {


        console.log($("#payment_method option:selected").val());



        if ($("#payment_method option:selected").val() == 2) {
            $('#shipping_carrier').prop('disabled', 'disabled');
            $('#shipping_carrier').val(1);
            $('#shipping_number').hide();
            $('#note').show();
            $('#shipping_carrier').hide();
            $('#shiping_carrier_label').hide();





        } else {
            $('#shipping_carrier').prop('disabled', false);
            $('#shipping_number').show();
            $('#note').hide();
            $('#shiping_carrier_label').show();
            $('#shipping_carrier').show();
        }
    }).trigger('change');                                   // Modified this line


})

just simply append

.trigger('change')

to the end of the handler assignment.It's work perfectly, now.