如何使我的重置按钮在没有表单的HTML工作?

Question

这是我的代码

我已经尝试使用javascript与onClick，但然后我的提交按钮不会工作。然后我试着把它改成普通的按钮，还是不行。我试着把它放进表格里，但还是不行。我不知道如何重置表单的按钮。这是我的学校作业，我还是一个学生，所以请帮助我。我将非常感谢你的帮助。

Answer 1

表单类型:reset和submit需要一个上下文。我的意思是你必须把所有的输入都包装在一个表单里。<form>....</from>。然后reset有上下文来重置他的上下文/表单中的所有字段。

如果你不想使用form，你可以用Javascript来实现。

function reset() {
document.getElementById('input_1').value = ''
document.getElementById('input_2').value = ''
}

<input id="input_1" value="Hello"><br/>
<input id="input_2" value="World">
<br/>
<button onclick="reset()">RESET</buton>

Answer 2

您应该使用javascriptreset你的inputs

注意:请记住，当使用表单时，回车键也可以工作

<div>
<div id="like-form">
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
</div>
<button type="button" id="like-reset">
Reset
</button>
</div>

您可以使用Ajax提交但reset

document.getElementById("like-reset").addEventListener("click" () => {
// forEach
[].slice.call(document.getElementById("like-form").children).forEach(input => {
input.value = "";
});
// For
const inputs = document.getElementById("like-form").children;
for (let i = 0; i < inputs.length; i++) {
inputs[i].value = "";
}
});

Answer 3

你应该在表单内设置所有输入和重置按钮。像这样:

<form>
<input type="text">
<input type="reset" value="Reset">
</form>

这样就可以了。