javascript - 通过电子邮件发送动态创建的 JS 表单数据
问题描述
首先,我对 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>
解决方案
推荐阅读
- php - 使用 PHP,如何在不使用 while 循环的情况下逐行获取数据
- html - 如何为 SVG 制作动画
滚动标签 - java - 引起:com.rabbitmq.client.ShutdownSignalException:通道错误;协议方法:
- c# - 如何将元素添加到 Html.ActionLink 对象
- php - .htaccess 代码在本地运行良好,但不能在 cpanel 上运行
- android - 在 RecyclerView 中正确突出显示所选项目
- google-colaboratory - 测试 notebook 是否在 Google Colab 上运行
- linux - 具有许多源文件夹的 makefile
- ansible - 为什么通过 Ansible 创建液滴会抱怨“dopy”依赖失败?
- java - JavaFX PropertyValueFactory 用于 HashMap 的值