очистить текстовое поле с помощью jquery

Я использовал " 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());
    });
});

После нажатия кнопки и проверки консоли отображается пустое значение, которое корректно, в то время как значение текстового поля сохраняет старое значение (значение ввода заполняется скриптом, но пользователи могут иметь возможность сбросить значение, когда нажата кнопка сброса).

Я изменил тип кнопки с "reset" на "button", и теперь возникла еще одна проблема!

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

Когда кнопка нажата, ее значение больше не отображается, а при открытии окна проверки элементов отображается старое значение, которое приводит к отправке одного и того же значения после отправки формы.