提交按钮问题

问题描述

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

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>

解决方法

• 将提交按钮放在 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));

,

• 拼写正确
• 将 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>