将HTML表单输入转换为Javascript变量和比较值
将HTML表单输入转换为Javascript变量和比较值
提问于 2016-10-11 23:22:21
我在试着比较两个人的出生日期。Person 1和Person 2以HTML形式输入他们的姓名和出生日期，我想使用Javascript来比较这两个日期，并在HTML页面上打印出哪个人更老。然而，我不知道如何提交表格和比较日期。下面是到目前为止HTML的内容：
<form id="form1">
Full name of first person: <input type="text" name="name1"><br>
Birthday: <input type="date" date="date1"><br>
<br>
Full name of second person: <input type="text" name="name2"><br>
Birthday: <input type="date" date="date2"><br>
</form>而Javascript：
var name1 = document.getElementsByName("name1");
var name2 = document.getElementsByName("name2");
var date1 = document.getElementsByName("date1");
var date2 = document.getElementsByName("date2");如何在HTML中提交变量，然后让Javascript比较这两个日期？
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-10-11 23:26:02
你忘了两件事：
- 提交按钮。
- 提交处理程序。
我想这解决了你的问题。
window.onload = function () {
document.getElementById("form1").onsubmit = function () {
var name1 = document.getElementById("name1");
var name2 = document.getElementById("name2");
var date1 = document.getElementById("date1");
var date2 = document.getElementById("date2");
if ((new Date(date1.value)).getTime() < (new Date(date2.value)).getTime()){
console.log(name1.value + " is greater than " + name2.value)}
else if ((new Date(date1.value)).getTime() > (new Date(date2.value)).getTime()){
console.log(name2.value + " is greater than " + name1.value)}
else{
console.log(name2.value + " and " + name1.value + " are of same age.")};
};
};<form id="form1">
Full name of first person: <input type="text" id="name1"><br>
Birthday: <input type="date" id="date1"><br>
<br>
Full name of second person: <input type="text" id="name2"><br>
Birthday: <input type="date" id="date2"><br>
<input type="submit" value="Check" />
</form>
Stack Overflow用户
发布于 2016-10-11 23:27:13
您需要向表单和提交按钮中添加一个操作。然后，可以从按钮中添加onsubmit调用，以调用一个简单的字符串比较函数，以查看哪个数字更大。
Stack Overflow用户
发布于 2016-10-11 23:41:05
好吧，让我们一步一步地走
1.如何提交表格
在HTML中，有两种提交表单的方法：
- 通过带有
<input>属性的type="submit"标记(结果是<input type="submit" />) - 使用
<button>属性插入type="submit"标记(结果是<button type="submit">...content...</button>)
现在，当单击这些按钮时，它们将触发<form>的submit事件。
2.如何订阅表单的提交事件
与提交表单时一样，有两种方式(没有任何外部库)订阅表单的submit事件：
- 直接在表单上设置一个属性：
formvar.onsubmit = function() { /* ... do stuff ... */ }(并不是真正推荐的，因为其他插件/脚本可能会覆盖它) - 添加事件侦听器：
formvar.addEventListener("submit", function() { /* ... do stuff ... */ }(比直接设置属性更好，因为当另一个脚本订阅同一事件时不会删除该属性)
3.比较日期
首先，您必须将从textbox获得的字符串值中的日期转换为适当的日期类型：
date1 = Date.parse(date1.value);
date2 = Date.parse(date2.value);然后，使用一个简单的算术运算符，您可以知道其中哪一个是最老的：
var difference = date2 - date1;
if(difference > 0)
{
// Second person is the oldest
}
else if (difference < 0)
{
// First person is the oldest
}
else
{
// They are the same age
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39988255
复制相关文章
相似问题
腾讯云开发者
