Question

首先，我是JavaScript的新手。我创建了一个表单，可以根据用户输入的数字动态添加html输入和选择框。

我现在试图弄清楚如何检索输入到此动态创建表单中的数据。

我知道JS无法发送电子邮件。

有没有解决的办法？是否可以让我获得用户输入的替代方法？也许我可以使用一些简单的附加语言来完成此任务？

任何帮助将不胜感激。非常感谢！

var $ = function(id) {
  return document.getElementById(id);
};


window.onload = function() {
  $("add-number").onclick = function() {
    var hatVar = document.getElementById("number").value;
    var numberOfHats = parseInt(hatVar);

    var i = 0;

    for (i = 0; i < numberOfHats; i++) {
      container.appendChild(document.createTextNode(" Last Name" + (i + 1)));
      var lastName = document.createElement("input");
      lastName.className = "Last-Name";
      lastName.type = "text";
      container.appendChild(lastName);
      container.appendChild(document.createElement("br"));

      var dropOp = ["S/M", "L/XL"];

      container.appendChild(document.createTextNode(" Size" + (i + 1)));
      var size = document.createElement("select");
      size.className = "size";
      size.options[size.options.length] = new Option('S/M', 'Value1');
      size.options[size.options.length] = new Option('L/XL', 'Value2');
      container.appendChild(size);
      container.appendChild(document.createElement("br"));
    }

    var btn = document.createElement("button");
    btn.innerHTML = "Submit Order";
    btn.className = "btn";
    container.appendChild(btn);

    btn.onclick = function() {
      console.log(lastName.value);
    }


  }

};

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  margin: 0 auto;
  width: 450px;
  padding: 0 2em 1em;
}

h1 {
  color: black;
}

label {
  width: 11em;
  text-align: right;
  padding-right: .5em;
  padding-bottom: .5em;
}

input {
  margin-left: 0em;
  margin-bottom: .5em;
}

fieldset {
  margin-bottom: 1em;
}

#filldetails {
  margin-top: 1em;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>ABIT Hat Order</title>
  <link rel="stylesheet" href="hats.css">
  <script src="hats.js"></script>
</head>

<body>
  <main>
    <h1>ABIT Hats</h1>
    <p> Please enter the number of hats you would like to order.</p>
    <input type="text" name="number" id="number"><br>
    <input type="button" name="add-number" id="add-number" value="Submit">
    <div id="container" />
  </main>
</body>

</html>

通过电子邮件发送动态创建的JS表单数据

0 个答案: