How do I communcate between an HTML form and javascript?

Question

I have been trying to make an HTML site where I can input a month and day, and output a particular number (The card number at my work).

The concept is as follows:

User inputs values and sumbits. The sumbit button activates a Javascript function that takes the inputted information and runs it through an equation to output the desired number. The output prints on the page.

The problem is occuring when Javascript attempts to understand the inputs. I have looked everywhere but I can't seem to find the answer for the problem I am looking for.

I am currently learning HTML and Javascript. I am aware it is possible (and more practical) to do this with php, but I am begining to wonder if this setup is even possible.

Here is my source code: (With comments detailing the problem)

<!DOCTYPE html>
<html>

<body>

  <script>
    //This is where the problems are occuring. How do I take the input (Id is "day" and "month" respectively) into numbers that Javascript can use?
    int day = document.getElementById("day");
    int month = document.getElementById("month");

    function myFunction() {
      if (day = < 16) {
        day == 1
      } else() {
        day == 0
      }

      // I want this equation to take the number of the month, and multiply it by two. If it is the earlier half of the month then I would like it to subtract one. Then have it edit the html with the id="demo"

      document.getElementById("demo").innerHTML = (month * 2) - day;
    }
  </script>

  <h2> What card number is it? </h2>
  Please enter the month and day. <br> <br>

  <!-- Is it possible to sumbit this entire form into Javascript or would I have to input one variable (or int) at a time? -->
  <form id="md">
    Month<br>
    <input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
    <br>
    <input type="number" id="day" value="18" min="1" max="31"><br><br>
    <input type="button" name="submit" value="submit" onclick="myFunction()">
  </form>
  <br><br>

  <p>Your number will appear here.</p>
  <p id="demo"> </p>
</body>

</html>

In javascript you don't instantiate variables with the variable type as javascript is not strongly typed. You need to use const or let, maybe var if you want to be old school about it. — Cory Kleiser
– Cory Kleiser, Commented Apr 19, 2018 at 2:22

CertainPerformance · Accepted Answer · 2018-04-19 04:33:39Z

2

You should attach a handler to the form submission so that you can run a function that gets the desired values from the form. Don't try to do any calculations in your script tag just below the body - the form hasn't been created yet, nor has it been filled out yet.

For example:

const demo = document.querySelector('#demo');
document.querySelector('form')
.addEventListener('submit', (e) => {
  // Use this line to prevent the form from submitting, which will destroy the current page:
  e.preventDefault();
  const month = document.querySelector('#month').value;
  const day = document.querySelector('#day').value;
  // console.log(day + ', ' + month);
  demo.textContent = day + ', ' + month;
});

<h2> What card number is it? </h2>
Please enter the month and day. <br> <br>
<form id="md">
  Month<br>
  <input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
  <br>
  <input type="number" id="day" value="18" min="1" max="31"><br><br>
  <input type="submit">
</form>

<p>Your number will appear here. <span id="demo"> </span></p>

If you can change the HTML, change the last input to <input type="submit"> - that way, clicking on it will submit the form, and you can listen for form submission instead of a button click. Note that if you do this, you'll have to make sure to use preventDefault or the page will be replaced.

edited Apr 19, 2018 at 4:33

answered Apr 19, 2018 at 1:56

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

DerekS Over a year ago

I appreciate this answer, although I am new to coding and I find it rather difficult to digest

CertainPerformance Over a year ago

You may wish to read up on CSS selectors. The basics are pretty simple, but they'll make selecting elements a whole lot easier. They're used all over the place in HTML, CSS, and JS.

Brad Over a year ago

No, this should be done on form submit. Not everyone submits a form by clicking a button... plenty of people push "enter" on an input. In any case, there are also alternative browsers. For accessibility alone, you should handle form submit.

CertainPerformance Over a year ago

@Brad In almost all cases, yes - it's what I did originally when writing this snippet - but with this particular HTML provided by the OP, the form will never actually get submitted, so I had to attach a handler to the button instead.

Brad Over a year ago

Why won't the form get submitted?

|

Jonathan Queipo · Accepted Answer · 2018-04-19 02:01:33Z

You had several syntax issues... But the main problem was that you were not getting the actual values from the inputs. You do that using .value after the getElementById

<!DOCTYPE html>
<html>

<body>

  <script>
    //This is where the problems are occuring. How do I take the input (Id is "day" and "month" respectively) into numbers that Javascript can use?

    function myFunction() {
      var day = document.getElementById("day").value;
      var month = document.getElementById("month").value;

      if (day <= 16) {
        day == 1
      } else {
        day == 0
      }

      // I want this equation to take the number of the month, and multiply it by two. If it is the earlier half of the month then I would like it to subtract one. Then have it edit the html with the id="demo"

      document.getElementById("demo").innerHTML = (month * 2) - day;
    }
  </script>

  <h2> What card number is it? </h2>
  Please enter the month and day. <br> <br>

  <!-- Is it possible to sumbit this entire form into Javascript or would I have to input one variable (or int) at a time? -->
  <form id="md">
    Month<br>
    <input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
    <br>
    <input type="number" id="day" value="18" min="1" max="31"><br><br>
    <input type="button" name="submit" value="submit" onclick="myFunction()">
  </form>
  <br><br>

  <p>Your number will appear here.</p>
  <p id="demo"> </p>
</body>

</html>

Bee · Accepted Answer · 2018-04-19 02:12:52Z

It can be achieved by different ways. You can grab the value of the input fields on form submit by using document.getElementById("idofelement").value;

function myFunction() {
  var day = document.getElementById("day").value;
  var mon = document.getElementById("month").value;
  if (day <= 16) {
    day = 1;
  } else {
    day = 0;
  }
  var final = (mon * 2) - day;
  // I want this equation to take the number of the month, and multiply it by two. If it is the earlier half of the month then I would like it to subtract one. Then have it edit the html with the id="demo"
  document.getElementById("demo").innerHTML = final;
}

Please enter the month and day. <br> <br>

<form id="md">
  Month<br>
  <input type="number" id="month" value="4" min="1" max="12"> <br> <br> Day
  <br>
  <input type="number" id="day" value="18" min="1" max="31"><br><br>
  <input type="button" value="submit" name="submit" onclick="myFunction()">
</form>
<br><br>

<p>Your number will appear here.</p>
<p id="demo"> </p>

Collectives™ on Stack Overflow

How do I communcate between an HTML form and javascript?

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related