将HTML表单输入转换为Javascript变量并比较值

Question

我想比较两个人的出生日期。人1和人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比较两个日期？

Answer 1

你忘记了两件事：

1. 提交按钮。
2. 提交处理程序。

我想这可以解决你的问题。

＆＃13;
＆＃13;
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.")};
  };
};
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您需要向表单和提交按钮添加操作。然后你可以从你的按钮添加一个onsubmit调用来调用一个简单的字符串比较函数来查看哪个数字更大

Answer 3

好吧，让我们一步一步来看看

1。如何提交表格

在HTML中，您有两种提交表单的方式：

1. 通过带有<input>属性的type="submit"代码（生成<input type="submit" />
2. 使用<button>属性生成type="submit"标记（生成<button type="submit">...content...</button>

现在点击这些按钮后，它们会触发<form>的{​​{1}}事件。

2。如何订阅表单的提交事件

在提交表单时，有（没有任何外部库）2种方式订阅表单的提交事件：

1. 直接在表单上设置一个属性：submit（不推荐其他插件/脚本可能会覆盖此内容）

2. 添加事件监听器：formvar.onsubmit = function() { /* ... do stuff ... */ }（比直接设置属性更好，因为当另一个脚本订阅同一事件时，不会删除该属性）

3。比较日期

首先，您必须将日期从文本框中的字符串值转换为正确的日期类型：

formvar.addEventListener("submit", function() { /* ... do stuff ... */ }

然后使用简单的算术运算符，您可以找出其中哪一个是最老的：

date1 = Date.parse(date1.value);
date2 = Date.parse(date2.value);

Answer 4

基本表单数据访问演示

＆＃13;

＆＃13;

var compare = function () {
  var form = document.getElementById("form1");
  var output = document.getElementById("demo");
  output.innerHTML = "";
  for(var i = 0; i< form.length; i++){
    output.innerHTML = output.innerHTML +" "+ form.elements[i].value;
    };
};

＆＃13;

<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>
</form>
<input type="button" name="submit" value="Compare " onclick="compare()" />
<p id="demo"></p>

＆＃13;

＆＃13;

＆＃13;

Answer 5

您不需要提交表单来检查差异。一个简单的onclick函数或click事件监听器就可以了。

您需要检查他们是否年龄较大，年龄较小或年龄相同。试试下面。您的代码不起作用，因为您没有日期的名称属性。我将它们切换为使用ID。

＆＃13;

＆＃13;

document.getElementById("theButton").addEventListener('click', checkOldest);

function checkOldest() {
  var name1Value = document.getElementById("name1").value,
      name2Value = document.getElementById("name2").value,
      date1Value = document.getElementById("date1").value,
      date2Value = document.getElementById("date2").value,
      result = document.getElementById("result");
   
  // make sure you have input for both birthdates and names
  if (name1Value && name2Value && date1Value && date2Value) {
    var dateOneComparedToTwo = new Date(date1Value) - new Date(date2Value);
    
    if (dateOneComparedToTwo < 0) {
      result.innerText = name1Value + ' is older than ' + name2Value + '!';
    } else if (dateOneComparedToTwo > 0) {
      result.innerText = name1Value + ' is younger than ' + name2Value + '!';
    } else {
      result.innerText = name1Value + ' and ' + name2Value + ' are the same age!';
    }    
    
  } else {
    result.innerText = "You need to fill out the form completely!";
  }
}

＆＃13;

<form id="form1">
  Full name of first person: <input type="text" id="name1" name="name1"><br>
  Birthday: <input type="date" id="date1" name="date1"><br>
  <br>
  Full name of second person: <input type="text" id="name2" name="name2"><br>
  Birthday: <input type="date" id="date2" name="date2"><br>

  <button id="theButton">Who's oldest?</button>
</form>

<p id="result">
  Fill out the form please!
</p>

＆＃13;

＆＃13;

＆＃13;