如何在HTML表单和JavaScript之间进行通信?

时间:2018-04-19 01:48:30

标签: javascript html

我一直在努力创建一个HTML网站,我可以在这里输入一个月和一天,并输出一个特定的数字(我工作时的卡号)。

概念如下:

用户输入值和总和。 sumbit按钮激活Javascript函数,该函数获取输入的信息并通过等式运行它以输出所需的数字。输出打印在页面上。

当Javascript尝试理解输入时,问题就出现了。我到处寻找,但我似乎无法找到我正在寻找的问题的答案。

我目前正在学习HTML和Javascript。我知道用PHP做这个是可能的(也更实用),但我开始想知道这个设置是否可行。

这是我的源代码:(详细说明问题的评论)



<!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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

您应该将一个处理程序附加到表单提交,以便您可以运行从表单中获取所需值的函数。请勿尝试在正文正下方的script标记中进行任何计算 - 表单尚未创建,也尚未填写。

例如:

&#13;
&#13;
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;
});
&#13;
<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>
&#13;
&#13;
&#13;

如果您可以更改HTML,请将最后一个输入更改为<input type="submit"> - 这样,单击它将提交表单,您可以收听表单提交而不是单击按钮。请注意,如果您这样做,则必须确保使用preventDefault,否则页面将被替换。

答案 1 :(得分:2)

您有几个语法问题......但主要问题是您没有从输入中获取实际值。您可以在.value

之后使用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>

答案 2 :(得分:1)

可以通过不同方式实现。您可以使用 document.getElementById(“idofelement”)获取表单提交时输入字段的值。值;

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>