Во-первых, я супер новичок в 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>