【问题标题】:How to trigger a javascript event base on an old input in Laravel 4 ?如何根据 Laravel 4 中的旧输入触发 javascript 事件?
【发布时间】:2015-01-15 03:44:27
【问题描述】:

如何在 Laravel 4 中基于旧输入触发 javascript 事件?

       The script work perfectly when select from dropdown menu.

在 Laravel 4 中,在我的一个编辑视图中,我尝试编辑一些物流信息。 根据我的下拉菜单,我的表单的布局和行为会略有不同。

再次,当从下拉菜单中选择时,脚本工作完美。

我根据旧输入加载了整个表单。一切都很好! 只有脚本似乎没有根据已加载的旧输入运行。

触发器不会改变,除非我开始从我的 payment_method 列表中选择一些东西,然后事情又开始工作了。

问题

是否可以根据 Laravel 4 中的旧输入加载脚本?

表格详情:

下拉菜单 id = payment_method

  • 收款人付款
  • 发货人付款

下拉菜单 id = shipping_carrier - 联邦快递 - DHL

输入字段 id = shipping_number __________________

目标:

如果用户选择托运人付款

  1. 禁用 shipping_carrier
  2. hide() 我的送货号码输入

否则,

  1. 启用 shipping_carrier
  2. 启用发货单号输入(必填)

代码

<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();
        }
    });


})

我在刀片中的编辑表单的一部分

<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>

支持文件(图片):

  1. Receiver Paid Selected
  2. Shipper Paid Selected

【问题讨论】:

    标签: javascript php laravel laravel-4 blade


    【解决方案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
    
    
    })
    

    只是简单地追加

    .trigger('改变')

    到处理程序分配的末尾。现在它工作得很好。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-08-08
      • 2017-08-27
      • 2013-10-13
      • 1970-01-01
      • 2011-09-07
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多