Question

我正在尝试向我的Laravel项目添加快速的条件逻辑。如果“ create_copay”文本输入不是0.00，则我的“ create_ams_fee”字段应显示0.00。否则，它将是7.00。但是，我的代码在create_ams_fee字段中未显示任何更改。

表单字段（Laravel集体）

<div class="form-group">
    {{Form::label('copay', 'Copay')}}
    {{Form::text('copay', '', ['class' => $errors->has('copay') ? 'form-control border border-danger' : 'form-control', 'id' => 'create_copay'])}}
</div><!-- /form-group -->
<div class="form-group">
    {{Form::label('ams_fee', 'AMS Fee')}}
    {{Form::text('ams_fee', '', ['class' => 'form-control', 'id' => 'create_ams_fee'])}}
</div><!-- /form-group -->

脚本

// Calculate AMS Fee field
$('#create_copay').change(function() {
    if ($('#create_copay').val() == '0.00') {
        $('#create_ams_fee').val('7.00');
    } else {
        $('#create_ams_fee').val('0.00');
    };
});

修改

这似乎正在变成动态加载问题。下面的代码块是我尝试和测试的结果。这些输入的父容器的ID为create_financials。我目前没有成功通过更改create_copay字段来触发事件的方法。

$( document ).ready( function() {
    $('#create_financials').on('input', '#create_copay', function() {
        console.log('SUCCESS');
    });
});

Answer 1

您正在使用“更改”事件-仅当焦点从元素中移出（模糊）并且已更改，提交表单或其他特定时间时才会触发。

您可以使用keydown或keyup事件，但更好的方法是'input'事件。

如果这是数字输入，则应使用输入类型'number'而不是文本-但是，如果您不想或不能这样做，则将文本从输入转换为数字也可能有好处：

$('#create_copay').on('input', function() {
    if ($('#create_copay').val()/1 == 0) {
        $('#create_ams_fee').val('7.00');
    } else {
        $('#create_ams_fee').val('0.00');
    };
});

有关工作示例，请参见此Codepen：

https://codepen.io/manticorp/pen/wYpXWY

使用html检查器（右键单击，检查元素），您确定输入的ID已指定吗？（create_copay和create_ams_fee）。

此外，我刚刚看到您的输入内容可能已经被填充，在这种情况下，这样会更好：

$(function() { // jQuery domready event

    $('#create_copay').on('input', updateFields);
    function updateFields() {
        if ($('#create_copay').val()/1 == 0) {
            $('#create_ams_fee').val('7.00');
        } else {
            $('#create_ams_fee').val('0.00');
        };
    }
    updateFields();
});

如果要动态创建这些字段，或者以某种方式在加载后将它们插入文档中，则需要将事件附加到文档/容器元素上：

$(function() { // jQuery domready event
    $('#theContainer').on('input', '#create_copay', updateFields);
    function updateFields() {
        if ($('#create_copay').val()/1 == 0) {
            $('#create_ams_fee').val('7.00');
        } else {
            $('#create_ams_fee').val('0.00');
        };
    }
    updateFields();
});

Answer 2

在输入字段中使用keydown事件。 Change在输入元素失去焦点之后生效。

根据其他输入自动填充输入

2 个答案: