如何解决提交按钮问题
我怎么能有一个实际上在表单中并提交数据的提交按钮,这里的问题是,如果我将提交按钮移动到循环内,它会出现每个请求的输入字段,我怎么能停止它并且只有一个输入字段末尾的提交按钮。
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。