当输入字段在 <form> 元素内时，jQuery datePicker setDate 函数将输入字段置空答案

【问题标题】：jQuery datePicker setDate function blanks the input field when input field is inside a <form> element当输入字段在 <form> 元素内时，jQuery datePicker setDate 函数将输入字段置空
【发布时间】：2013-01-26 12:44:51
【问题描述】：

范罗德在这里。这是我的第一次，所以请对我温柔一点。

请参阅下面的代码。它应该可以工作，是吗？当您单击按钮时，输入字段应显示今天的日期，但今天的日期只闪烁一秒钟，然后该框变为空白。

如果您删除 FORM 标记，那么它会按预期工作。

如果输入字段在 FORM 元素内，那么 setDate() 将不起作用。

在 Firefox 和 Chrome 下都试过了，结果一样。

我在滥用 datePicker 吗？

已经搜索了stackoverflow、专家交流等以寻求解决方案，但没有任何乐趣。

我不敢相信这是一个错误，因为 datePicker 被广泛使用，但我看不到任何其他结论。

我能看到的唯一解决方法是永远不要在 FORM 中包含输入字段（在我的情况下可行但担心未来）或使用 $("#ttdateofbirth').val(...)缺点很明显。

有谁知道如何解决这个问题？

感谢您的意见。

非工作网页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DatePicker test</title>
<link rel="stylesheet" href="js/css/ui-lightness/jquery-ui-1.10.0.custom.css"/>
<script type="text/javascript" src="js/js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/js/jquery-ui-1.10.0.custom.js"></script>

<style type="text/css">
.datepicker {
    font: 11pt "Trebuchet MS", sans-serif;
    margin: 10px;
}
.inputlabel {
    font: 11pt "Trebuchet MS", sans-serif;
    margin: 3px;
    float:left; clear:left;
    display: block;
}

.ui-datepicker { font-size: 8pt !important; background: #cccccc; }

input {
    float: left;
    margin-bottom: .25em;
    font: 11pt "Trebuchet MS", sans-serif;
    margin: 3px;
    }
button {
    float: left;
    margin-bottom: .25em;
    font: 11pt "Trebuchet MS", sans-serif;
    margin: 3px;
    }

</style>
<script type="text/javascript">
//<![CDATA[
// set up inputs for dates before today's date
$(function(){
    var pickerOpts = {
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: "dd/mm/y",
        showButtonPanel: true,
        changeYear: true,
        changeMonth : true
        };
        $("#ttdateofbirth").datepicker(pickerOpts);
        });

    function setthedate() {
        var adate = new Date();
        $("#ttdateofbirth").datepicker('setDate',adate);
        };
//]]>
</script>

</head>
<body>
<form>
<span class="inputlabel">Date of birth:</span>
<span><input id="ttdateofbirth" type="text"  value=""/>
<button style="float:left;display:inline;" onclick="setthedate()">Set date</button>
</span>
</form>
</body>
</html>

【问题讨论】：

所以您的表单在您选择日期后提交......在日期选择器上按回车键选择日期？？
选择日期后提交吗？我不明白。你是问我还是告诉我？我要解决的问题与用户从弹出的日期选择器窗口中选择日期或在 ttdateofbirth 字段中输入字符无关。调用 setthedate() 函数时会出现问题。
我只是问..根据你的解释，我知道表单正在提交
在 $("#ttdateofbirth").datepicker('setDate',adate); - 这就是你调用 datepicker 方法的方式。
还是不知道表单提交？

标签： jquery jquery-ui-datepicker

【解决方案1】：

在表单中使用<button> 元素时，它会提交表单、重新加载页面并清空输入。改成：

<input type="button" style="float:left;display:inline;" onclick="setthedate()" value="Set date">

或使用 return false / preventDefault。

【讨论】：

如果他写 onclick="setthedate()" 。之后如果他想提交他必须点击哪个？？？
Adeneo：行得通。这都是关于按钮动作的。非常感谢！