Question

我希望能够在提交时找到courseAmount输入字段的数字值，然后生成新的输入字段（hourForm表单下方的initialForm表单}）通过javascript中的onsubmit方法，然后在提交hourForm表单时从每个生成的输入字段中检索值，并将这些值放入数组中。

但是，我在使用javascript实际生成输入字段时遇到了困难，我怀疑我在检索courseAmount输入的值并将其移植到我的{时遇到了困难{1}}功能，但我不确定这是否是问题。

这是我的HTML：

createInput()

这是我的Javascript：

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <form id="initialForm" method="post" onsubmit="createInput()" action="">
    <label>Number of hours for which you would like to study</label>
    <input type="number" name="overallHours" id="overallHours" class="stored" min="1" max="20" step="1" value="1"/>
    <label>Number of courses you would like to study for</label>
    <input type="number" name="courseAmount" id="courseAmount" class="stored" min="1" max="20" step="1" value="1"/>
    <input type="submit" class="submitStudy" value="Submit"/>
  </form>
  <form id="hourForm" method="post" onsubmit="calcHours">
    <label>State the desired time spent working in each course</label>
  </form>
</body>

有人可以帮我把这个Javascript搞定吗？我的JSFiddle尝试是徒劳的，因为JSFiddle并不善待重新加载页面的表单。

谢谢！

Answer 1

从关于innerHTML的mdn页面：＆＃34;删除所有元素的子节点，解析内容字符串并将结果节点指定为元素的子节点。＆＃34; https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML

一般来说，你根本不想使用innerHTML。几乎总有一种更好的方法。在这种情况下，这将是createElement和appendChild。

此外，没有＆＃34; onsubmit＆＃34;方法。你所谓的是一个HTML属性，它注册了提交事件的处理程序。 http://www.quirksmode.org/js/introevents.html

然而，使用html属性有其严重的缺点：http://www.quirksmode.org/js/events_advanced.html

考虑到所有这些，我会做的是：http://jsfiddle.net/ashnur/rwod4z1d/

HTML：

<form id="initialForm" method="post" action="">
    <label>Number of hours for which you would like to study</label>
    <input type="number" name="overallHours" id="overallHours" class="stored" min="1" max="20" step="1" value="1" /><hr>
    <label>Number of courses you would like to study for</label>
    <input type="number" name="courseAmount" id="courseAmount" class="stored" min="1" max="20" step="1" value="1" /><hr>
    <input type="submit" class="submitStudy" value="Submit" />
</form>
<form id="hourForm" method="post" >
    <label>State the desired time spent working in each course</label><hr>
</form>

JS：

var notedOverallHours = document.getElementById("overallHours").value * 60;
var courseNumberTotal = document.getElementById("courseAmount").value;
var counter = 0;

var initialForm = document.getElementById("initialForm");
var hourForm = document.getElementById("hourForm");

initialForm.addEventListener('submit', createInput);
hourForm.addEventListener('submit', calcHours);

function calcHours() {}

function createInput(ev) {
    ev.preventDefault(); // this is not needed if you are using a bare button and the click event
    var newForm = document.getElementById("hourForm");
    initialForm.style.display = "none";
    hourForm.style.display = "block";

    for (i = 0; i <= courseNumberTotal; i++) {
        addControl(newForm, "Course #" + (counter + 1));
        counter++;
    }
    var submit = document.createElement('input');
    submit.type = 'submit';
    submit.value = 'submit';
    newForm.appendChild(submit);
}

function addControl(form, labelText) {
    var label = document.createElement('label');
    var input = document.createElement('input');
    var hr = document.createElement('hr');
    input.type = 'number';
    input.name = 'courseHours';
    input.classname = 'newInputs';
    input.min = '1';
    input.max = '9';
    input.step = '1';
    input.value = '1';
    label.textContent = labelText;
    form.appendChild(label);
    form.appendChild(input);
    form.appendChild(hr);


}

Answer 2

当调用createInput()函数时，您没有获得所需的结果，因为您在循环的每次迭代中重置newForm.innerHTML，然后在结束时再次重置=。您应该使用+=来附加所需的文本而不是替换现有文本，而不是使用// Replacing the contents of newForm.innerHTML newForm.innerHTML = "foo"; // Appending to newForm.innderHTML (You want to do this) newForm.innerHTML += "foo";。

createInput()

另一个问题是，当您按下提交时，页面会在onsubmit能够获得所需结果之前重新加载。您很可能希望停止实际提交的页面，从而在按下提交按钮时重新加载。为此，您可以将表单的"return createInput()"属性更改为return false;，然后将行createInput()添加到{{1}}函数的末尾，以向浏览器指示您不希望提交表格。

Answer 3

正如Tobias正确指出的那样，您的表单提交事件可以继续，这会导致页面刷新并重置＆＃34;重置＆＃34;所有纯JavaScript数据。此外，您不会在表单提交时（在用户输入金额后）捕获您的值（notedOverallHours和courseNumberTotal），而是在您的页面初始化时（之前用户输入任何内容）。

所以，要解决这个问题，首先要对HTML进行微小修改：

...
<form id="initialForm" method="post" action="">
...

请注意，我从表单中删除了onsubmit属性。我们可以通过JavaScript本身的事件捕获它。

接下来将一个事件监听器附加到您的表单，阻止它提交并调用您的createInput()函数：

document.getElementById("initialForm").addEventListener('submit', function (e) {
  e.preventDefault();
  createInput();
});

这将附加一个eventListener，用于监听submit元素上的initialForm事件。第一个参数是您要侦听的事件类型（在这种情况下为submit），第二个参数是您要触发的回调。

回调函数总是获取传入的事件（e参数）。通过在此事件上调用preventDefault，我们可以阻止它冒泡并实际导致页面刷新。

接下来我们调用createInput()函数，经过一些修改，它看起来像这样：

function createInput() {
  var notedOverallHours = document.getElementById("overallHours").value * 60; 
  var courseNumberTotal = document.getElementById("courseAmount").value;
  var newForm = document.getElementById("hourForm");

  document.getElementById("initialForm").style.display = "none";
  document.getElementById("hourForm").style.display = "block";

  // Add our elements
  for (i = 1; i <= courseNumberTotal; i++) {
    var child = document.createElement('li');
    child.innerHTML = "<label>Course #" + (i) + "</label>" + "<input type='number' name='courseHours-"+ i+"' class='newInputs' min='1' max='9' step='1' value='1'/>";
    newForm.appendChild(child);
  }

  // Add our button
  var button = document.createElement('li');
  button.innerHTML = "<input type='submit' value='submit'/>";
  newForm.appendChild(button);
}

正如您所看到的，我捕获了notedOverallHours函数中的courseNumberTotal和createInput()变量，因此它们将携带在表单中设置的任何值提交活动。

然后我们迭代每个课程编号。我们首先创建一个元素（在我们的例子中为innerHTML），而不是替换li，并用HTML字符串填充该元素。接下来，我们将此子元素附加到父表单。

在循环内部，我删除了counter变量，因为您只需在循环中使用i的值，无需创建额外的变量。我还为name的每个孩子添加了i属性，以免发生任何名称冲突。

在我们的函数结束时，我们只需创建并附加一个包含提交按钮的新li元素。

您可以通过使用label函数实际创建input和createElement元素并使用纯JavaScript设置器单独设置其属性和text，而不是将li元素中的所有内容转储到此处，以便让事情变得更加简单。我会把它留作练习:)）

我用这个确切的代码here创建了一个粗略的JSFiddle。

如何使用Javascript动态生成输入字段，然后使用它们的值？

3 个答案: