JSP中如何阻止jQuery datepicker在表单提交时清空日期

安全阿岳

2026-9-26

问题原因

你给表单设置的onsubmit="return false"仅能阻止浏览器默认触发的表单提交行为（比如点击type="submit"类型的按钮触发的提交），你在search函数中主动调用document.forms[2].submit()属于JavaScript主动触发的提交，不会触发表单的onsubmit事件校验，因此表单还是会完成同步提交，页面刷新后输入框内的日期自然被清空。
若采用同步提交逻辑，服务端返回页面时没有将提交的日期参数回填到fdate、tdate两个输入框中，也是刷新后日期消失的直接原因。

解决方案

方案1：改用AJAX异步提交（推荐，无需刷新页面）

修改search函数，去掉原生表单提交逻辑，改为异步请求，页面不会刷新，选中的日期会自然保留：

function search() {
    const fromDate = $('#fdate').val();
    const toDate = $('#tdate').val();
    $.post('refund', {
        actionType: 'search',
        fromDate: fromDate,
        toDate: toDate
    }, function(response) {
        // 此处处理请求返回结果，比如渲染查询列表等逻辑
    })
}

方案2：保留同步提交，增加回填逻辑

如果业务必须使用同步提交，只需要在服务端渲染页面时，将提交的日期参数回填到日期输入框中即可：

<!-- 回填起始日期 -->
<input class="form-control border-radius-input"
    onkeypress="return Date1(event);" maxlength="10"
    id="fdate" type="text" placeholder="yyyy-mm-dd"
    value="${你后台存储的表单参数.fromDate}">

<!-- 回填结束日期 -->
<input class="form-control border-radius-input"
    onkeypress="return Date1(event);" maxlength="10"
    id="tdate" type="text" placeholder="yyyy-mm-dd"
    value="${你后台存储的表单参数.toDate}">