CODEWITHSUNDEEP
javascripthtml
DerekS
DerekS

Reputation: 69

How do I communcate between an HTML form and javascript?

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>

Upvotes: 0

Views: 65

Answers (3)

CertainPerformance
CertainPerformance

Reputation: 371193

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.

Upvotes: 2

Bee
Bee

Reputation: 124

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>

Upvotes: 1

Jonathan Queipo
Jonathan Queipo

Reputation: 66

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>

Upvotes: 2

Related Questions