表单标签中的按钮不能调用js函数

Question

我在表单中有type button。我试图调用函数onclick事件，但它不会工作。有很多这样的问题，但没有一个适合我。我的代码看起来像这样

function reg(event) {
if(document.getElementById("repass").value !== document.getElementById("pass").value){
event.preventDefault();
alert("Passwords do not match");  
}
} 

function reset() {
alert("done");
}

<form action="../index.ejs" method="post" >
<div class="registration-popup" id="regpopup">
<div class="content">   
<h1 id="h1">Create new account</h1>
<div class="input">
<input type="text" placeholder="First Name" class="inp"  id="name"/>
</div>
<div class="input">
<input type="text" placeholder="Second Name" class="inp" id="secname"/>
</div>
<div class="input">
<input type="text" placeholder="Username" class="inp" id="username" />
</div>
<div class="input">
<input type="tel" placeholder="Phone Number" class="inp" id="phone" />
</div>
<div class="input">
<input type="text" placeholder="Address" class="inp" id="addres" />
</div>
<div class="input">
<input type="password" placeholder="Password" class="inp" id="pass" />
</div>
<div class="input">
<input type="password" placeholder="Repeat password" class="inp" id="repass" />
</div>
<input type="submit" id="register" value="Register" onclick="reg(event)" >
<input type="button" id="reset" value="Reset" onClick="reset()" >
</div>
</div>
</form>

当我简单地注释掉表单标签时，它开始工作，所以问题一定在那里。

Answer 1

function reg(event) {
if(document.getElementById("repass").value !== document.getElementById("pass").value){
event.preventDefault();
alert("Passwords do not match");  
}
} 

function Reset() {
alert("done");
}

<form action="../index.ejs" method="post" >
<div class="registration-popup" id="regpopup">
<div class="content">   
<h1 id="h1">Create new account</h1>
<div class="input">
<input type="text" placeholder="First Name" class="inp"  id="name"/>
</div>
<div class="input">
<input type="text" placeholder="Second Name" class="inp" id="secname"/>
</div>
<div class="input">
<input type="text" placeholder="Username" class="inp" id="username" />
</div>
<div class="input">
<input type="tel" placeholder="Phone Number" class="inp" id="phone" />
</div>
<div class="input">
<input type="text" placeholder="Address" class="inp" id="addres" />
</div>
<div class="input">
<input type="password" placeholder="Password" class="inp" id="pass" />
</div>
<div class="input">
<input type="password" placeholder="Repeat password" class="inp" id="repass" />
</div>
<input type="submit" id="register" value="Register" onclick="reg(event)" >
<input type="button" id="reset" value="Reset" onClick="Reset()" >
</div>
</div>
</form>

请使用与reset()不同的名称，因为它是重置表单的保留关键字。

Answer 2

因为除非密码不匹配，否则您不会调用event.preventDefault()，一旦用户单击提交，他们将被重定向离开页面，表单将被发送到../index.ejs。当<form>标签不存在时，submit按钮在点击时不会重定向到任何地方。

为了保留<form>标签，无论如何调用event.preventDefault()。如果您仍然想在后台提交表单数据，您可以通过fetch()这样做，例如:

async function reg(event) {
event.preventDefault();
if(document.getElementById("repass").value !== document.getElementById("pass").value) {
alert("Passwords do not match");
return;  
}
const formData = new FormData();
formData.append("name", document.getElementById("name").value);
// The rest of your form fields...
const response = await fetch("../index.ejs", {
method: "POST",
body: formData
});
} 

function Reset() {
alert("done");
}

<form action="../index.ejs" method="post" >
<div class="registration-popup" id="regpopup">
<div class="content">   
<h1 id="h1">Create new account</h1>
<div class="input">
<input type="text" placeholder="First Name" class="inp"  id="name"/>
</div>
<div class="input">
<input type="text" placeholder="Second Name" class="inp" id="secname"/>
</div>
<div class="input">
<input type="text" placeholder="Username" class="inp" id="username" />
</div>
<div class="input">
<input type="tel" placeholder="Phone Number" class="inp" id="phone" />
</div>
<div class="input">
<input type="text" placeholder="Address" class="inp" id="addres" />
</div>
<div class="input">
<input type="password" placeholder="Password" class="inp" id="pass" />
</div>
<div class="input">
<input type="password" placeholder="Repeat password" class="inp" id="repass" />
</div>
<input type="submit" id="register" value="Register" onclick="reg(event)" >
<input type="button" id="reset" value="Reset" onClick="reset()" >
</div>
</div>
</form>

你也在重置按钮上使用onClick="reset()"。您应该使用onclick="reset()"，或者更好，在JavaScript中添加一个事件侦听器:

document.getElementById("reset").addEventListener("click", reset);