使用jquery清除文本框值

Question

我使用了“bootstrap-datetimepicke”，但在使用 jQuery 清除文本框时遇到了问题。

我的html代码是：

<div class="input-group datetimepicker4">
    <input id="from" name="from" value="<?php echo $from ?>" placeholder="from" data-format="yyyy-MM-dd" readonly="readonly" type="text" style="background-color: #fff">
    <span class="input-group-addon add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="icon-calendar"></i>
    </span>
</div>
<button class="btn btn-default" type="reset" name="reset">Reset</button>

我尝试使用以下代码重置文本框值：

$(function() {
    $('.datetimepicker4').datetimepicker({
        pickTime: false,
        maskInput: true,
    });
});


$(document).ready(function () {
    $('button[type="reset"]').click(function () {
        $('#from').val('');     
        console.log($('#from').val());
    });
});

按下按钮并检查控制台后，它显示一个正确的空值，而文本框值保持旧值（输入的值由脚本填充，但用户应该能够在重置按钮时重置该值点击）。

我将按钮类型从“重置”更改为“按钮”，现在又出现了另一个问题！

$(document).ready(function () {
    $('button[type="button"]').click(function () {
        $('#from').val('');     
        console.log($('#from').val());
    });
});

当按钮被点击时，它的值不再显示，而打开检查元素窗口显示旧值，这导致在提交表单后发布相同的值。

Answer 1

问题是因为与 datpicker 相关的 input 已隐藏，因此您没有更改正确的值。如果您检查 API，您会看到需要使用 setValue 方法来更新字段的值以保持隐藏字段和可见字段同步。试试这个：

$('.datetimepicker4').data('datetimepicker').setDate(null);