表单到Javascript而不点击提交答案

【问题标题】：Form to Javascript without hitting submit表单到Javascript而不点击提交
【发布时间】：2014-03-16 13:37:21
【问题描述】：

我想知道你们是否可以提供帮助。到目前为止，我一直在寻找一个星期的答案，但我无法弄清楚。我对 Javascript 非常陌生（尽管我已经使用 PHP 和 HTML 几年了）。基本上我正在尝试使用javascript来计算用户输入的开始日期和持续时间的结束日期，我正在努力。我希望在用户更新任一表单选项时更新日期：

我得到的代码如下，但我目前只是得到以下错误：

开始：无效日期过期：无效日期

我已经有一个检查日期是否为真实日期的脚本，所以为了简单起见，我把它省略了

<script type="text/javascript">
function setExpDate(){
formDate = document.getElementById('startDate');
number = document.getElementById('days');
// set number of days to add
var interval = number;
var startDate = new Date(Date.parse(formDate));
document.write('start: ' + startDate);
var expDate = startDate;
expDate.setDate(startDate.getDate() + interval);
document.write('<br>expire: ' + expDate);
};
</script>

</head>

<body>

<input type="text" size="10" maxlength="10" id="startDate" name="startDate" onblur="setExpDate()" value="01/01/2015">  

<select name="days" id="days" onblur="setExpDate()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>

感谢您的帮助！

【问题讨论】：

标签： javascript html forms webforms

【解决方案1】：

您只得到元素，而不是日期值。所以只需读取输入的值。应该没问题的。

formDate = document.getElementById('startDate').value;
number = document.getElementById('days').value;

工作版本：http://jsfiddle.net/9f5q5/

【讨论】：

【解决方案2】：

使用unobtrusive javascript 通过addEventListener 并为Date 构造函数拆分日期字符串以避免字符串解析问题的简单示例。

HTML

<input type="text" id="myStartDate" value="01/01/2015">
<select id="myDays">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<div id="myResult"></div>

Javascript

var inputElement = document.getElementById('myStartDate'),
    selectElement = document.getElementById('myDays'),
    resultElement = document.getElementById('myResult');

function updateResultElement() {
    var parts = inputElement.value.split('/'),
        dateObject;

    parts[1] -= 1;
    parts.reverse();
    dateObject = new Date(Date.UTC.apply(undefined, parts));
    dateObject.setUTCDate(dateObject.getUTCDate() + Number(selectElement.value));
    resultElement.textContent = dateObject.toUTCString();
}

inputElement.addEventListener('change', updateResultElement, false);
selectElement.addEventListener('change', updateResultElement, false);
updateResultElement();

开启jsFiddle

【讨论】：

嗨！我只是想说非常感谢您的帮助！对此，我真的非常感激！工作了一个享受