提交按钮问题

Question

我怎样才能有一个提交按钮，它实际上是在表单中并提交数据，这里的问题是如果我在循环中移动提交按钮，它会出现每个请求的输入字段，我怎样才能停止它并且只有一个输入字段末尾的提交按钮。

const div = document.querySelector(".addHere");

document.querySelector(".btn").addEventListener("click", addInputs);

function addInputs() {

const inputValue = parseInt(document.querySelector(".inputValue").value);

  if (isNaN(inputValue)) {
    alert("Wrong input");
  } else {
    for (let i = 1; i <= inputValue; i++) {
      const form = document.createElement("form");
      form.method = "post";
      form.action = "#";

      const input1 = document.createElement("input");
      input1.type = "text";
      input1.maxLength = "12";
      input1.className = "factor";
      input1.required = true;

      const input2 = document.createElement("input");
      input2.type = "text";
      input2.maxLength = "1";
      input2.className = "priority";
      input2.required = true;

      const br = document.createElement("br");

      form.appendChild(br.cloneNode());
      form.appendChild(input1);
      form.appendChild(input2);
      form.appendChild(br.cloneNode());

      div.appendChild(form);
    }

    const sub = document.createElement("button");
    sub.type = "submit";
    sub.value = "Submit";
    sub.className = "subButton";
    sub.textContent = "Submit";

    div.appendChild(sub);
  }
}

<div class="addHere"></div>
<div class="inputs">
  <input type="text" maxlength="1" class="inputValue" placeholder="insert numbers:" />
  <button class="btn">+</button>
</div>

Answer 1

• 将提交按钮放在 HTML 中
• 使用 CSS :empty 确定元素是否没有后代。如果为空，则使用#forms:empty ~ #submit { display: none; } 隐藏按钮提交

// UTILITY FUNCTIONS:
const ELNew = (sel, attr) => Object.assign(document.createElement(sel), attr || {});
const ELS   = (sel, EL) => (EL || document).querySelectorAll(sel);
const EL    = (sel, EL) => (EL || document).querySelector(sel);

// APP:
const EL_forms = EL("#forms");
const EL_value = EL("#value");
const EL_add   = EL("#add"); // be more specific, add IDs to your elements

EL_add.addEventListener("click", addInputs);

const customForm = () => {
  const form = ELNew("form",  {method:"post", action:"#"});
  const inpA = ELNew("input", {type:"text", maxLength:"12", className:"factor", required:true});
  const inpB = ELNew("input", {type:"number", maxLength:"1", className:"priority", required:true});
  form.append(inpA, inpB);
  return form;
}

function addInputs() {
  const times = parseInt(EL_value.value, 10);
  if (isNaN(times)) return alert("Wrong input");
  const DF_forms = [...Array(times)].reduce((DF) => (DF.append(customForm()), DF), new DocumentFragment);
  EL_forms.append(DF_forms);
  EL_value.value = ""; // Reset input value
}

#forms:empty ~ #submit { display: none; }
#forms form {padding-bottom: 5px;}

<div id="forms"></div>
<input type="text" maxlength="1" id="value" placeholder="Insert number:" />
<button id="add" class="btn">+</button><br>
<button id="send" type="button" value="Submit">Submit</button>

如果你想用 JS 来切换你的按钮可见性：

/* UTILITY */
.u-none {display:none !important;}

EL("#send").classList.toggle("u-none", !EL("form", EL_forms));

Answer 2

• 正确拼写功能
• 将 const inputValue 移到函数内部
• 将表单移到循环之外
• 仅当提交不存在时才创建。

const div = document.querySelector(".addHere");

document.querySelector(".btn").addEventListener("click", addInputs);

function addInputs() {
  const inputValue = parseInt(document.querySelector(".inputValue").value);
  if (isNaN(inputValue)) {
    alert("Wrong input");
    return;
  }
  const form = document.createElement("form");
  form.method = "post";
  form.action = "#";
  for (let i = 1; i <= inputValue; i++) {
    const input1 = document.createElement("input");
    input1.type = "text";
    input1.maxLength = "12";
    input1.className = "factor";
    input1.required = true;

    const input2 = document.createElement("input");
    input2.type = "text";
    input2.maxLength = "1";
    input2.className = "priority";
    input2.required = true;

    const br = document.createElement("br");

    form.appendChild(br.cloneNode());
    form.appendChild(input1);
    form.appendChild(input2);
    form.appendChild(br.cloneNode());

    div.appendChild(form);
  }

  let sub = document.getElementById("sub") || document.createElement("button");
  if (!sub.id) { // it is a new button
    sub.id = "sub";
    sub.type = "submit";
    sub.value = "Submit";
    sub.className = "subButton";
    sub.textContent = "Submit";
  }
  form.appendChild(sub); // moves if exists

}

<div class="addHere"></div>
<div class="inputs">
  <input type="text" maxlength="1" class="inputValue" placeholder="insert numbers:" />
  <button class="btn">+</button>
</div>