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

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

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

使用jquery清除文本框值

1 个答案: