Converting HTML form input into Javascript variables and comparing values

Question

I am trying to compare the birth dates of two people. Person 1 and Person 2 input their names and dates of birth in an HTML form, and I want to use Javascript to compare the two dates and print out which person is older on the HTML page. However, I'm not sure how to submit the form and compare the dates. Here is what I have so far for the 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>

And the Javascript:

 var name1 = document.getElementsByName("name1");
 var name2 = document.getElementsByName("name2");
 var date1 = document.getElementsByName("date1");
 var date2 = document.getElementsByName("date2");

How do I submit the variables in HTML and then have Javascript compare the two dates?

Answer 1

You forgot two things:

1. A submit button.
2. A submit handler.

I guess this solves your question.

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>

Answer 2

You don't need to submit the form to check the difference. A simple onclick function or click event listener will do.

You need to check if they are older, younger, or the same age. Try it below. You code wasn't working because you didn't have a name property for your dates. I switched them to use ids.

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!";
  }
}

<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>

Answer 3

Well, let's go step by step on this

1. How to submit a form

In HTML you have 2 ways of submitting a form:

1. Through an <input> tag with the type="submit" attribute (resulting in <input type="submit" />
2. Trough a <button> tag with the type="submit" attribute (resulting in <button type="submit">...content...</button>

Now when these buttons get clicked, they will trigger the <form>'s submit event.

2. How to subscribe to a form's submit event

As when submitting a form, there're (without any external libraries) 2 ways of subscribing to a form's submit event:

1. Directly setting a property on the form: formvar.onsubmit = function() { /* ... do stuff ... */ } (not really recommended as other plugins/scripts might overwrite this)

2. Adding an event listener: formvar.addEventListener("submit", function() { /* ... do stuff ... */ } (better than directly setting a property as this won't be removed when another script subscribes to the same event)

3. Comparing dates

Well, first you'd have to transform the dates from the string value you got from the textbox to a proper Date type:

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

And then with a simple arithmetic operator you can find out which one of them is the oldest:

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
}

Answer 4

Basic form data access demo

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;
    };
};

<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>

Answer 5

You need to add an action to the form and a submit button. Then you can add an onsubmit call from your button to invoke a simple string comparison function to see which number is greater