我在这个 html 上遇到了很多麻烦。我正在尝试向提交按钮添加事件侦听器，以便最终可以更改文档以显示表单信息。问题是，当填写表单时，按钮侦听器不执行任何操作！ （它可以在 jsfiddle 和其他类似的东西中工作，但不能作为独立文件工作，这让我相信我以某种方式错误地设置了我的文件，可能弄乱了脚本标签）。我尝试了很多事情，包括移动脚本标签、尝试让事件侦听器提交表单以及输入类型按钮，但仍然一无所获。有人可以帮忙吗？
我的HTML：
<!DOCTYPE html>
<html>
<head>
<title>Form Project</title>
<style type="text/css" rel="stylesheet">
#but{text-align:center;}
td{text-align:right;}
span{padding=0; margin=0;float:left;}
</style>
</head>
<body>
<form id="formId">
<table border = "1">
<tr>
<th>Provide your contact information</th>
<th>Provide your login access information</th>
</tr>
<tr>
<td><label><span>First Name:</span> <input type = "text" placeholder = "Enter First Name" required/></label></td>
<td><label><span>Login ID:</span> <input type = "text" placeholder = "type a login ID" required/></label> </td>
</tr>
<tr>
<td><label><span>Middle Name:</span> <input type="text" placeholder ="type your middle name"/></label></td>
<td><label><span>Password:</span> <input type="password" placeholder ="password" required/></label></td>
</tr>
<tr>
<td><label><span>Last Name:</span> <input type="text" placeholder="Last Name" required/></label></td>
<td id="but"><label><button type="submit" id="displayButton">Display Info</button></label></td>
</tr>
<tr>
<td><label><span>Street Address:</span> <input type="text" placeholder="address" required/></label></td>
</tr>
<tr>
<td><label for ="Citylist"><span>City:</span>
<input type = "text" id ="citylist"
placeholder="Select a city" list = "cities" required/>
<datalist id= "cities">
<option value = "Bronx"/>
<option value = "Brooklyn"/>
<option value = "Queens"/>
<option value = "Manahttan"/>
<option value = "Staten Island"/>
</datalist>
</label>
</td>
</tr>
<tr>
<td><label for ="StateList"><span>State:</span>
<input type = "text" id ="State"
placeholder="Select a city" list = "states" required/>
<datalist id= "states">
<option value = "New York"/>
<option value = "New Jersey"/>
<option value = "California"/>
<option value = "Virginia"/>
<option value = "Maine"/>
</datalist>
</td>
</tr>
<tr>
<td><label><span>Zip code:</span> <input type="text" placeholder="Type your zipcode" maxlength="5" required/></label></td>
</tr>
<tr>
<td>
<label><span>Phone</span>
<input type ="tel" placeholder="(123)456-789"
pattern="\(\{3}) +\d{3}-\d{4}" required/>
</label>
</td>
</tr>
<tr>
<td>
<label><span>Email:</span>
<input type="email" placeholder="[email protected] /cdn-cgi/l/email-protection" required/>
</label>
</td>
</tr>
<tr>
<td>
<label><span>Birth Date:</span>
<input type="date" required/>
</label>
</td>
</tr>
</table>
</form>
<script type="text/javascript" src="form.js"></script>
</body>
</html>
我的 JS，仅针对事件侦听器进行了简化：
var button = document.getElementById("displayButton");
//var form = document.getElementById("formId");
//form.addEventListener("submit",function(){console.log("something1"); return false;},false);
button.addEventListener("click", function(){console.log("something"); return false;},false);
function formDisplay(){
console.log("check");
}
当整个表单未填写时，它会起作用，但如果所有必填字段都已填写，则控制台不会显示“某些内容”。
我建议使用submit事件来处理用户无需单击提交按钮即可提交表单的情况。
正如其他人所说，你需要使用evt.preventDefault()停止提交表单。
下面的示例将在允许提交表单之前检查所有内容是否有效。
var form = document.getElementById("formId");
form.addEventListener("submit", function(evt) {
for(var i = 0; i < form.elements.length; i++) {
var el = form.elements[i];
if (!el.checkValidity()) {
evt.preventDefault();
console.log('Fix the form!');
return;
}
}
});
#but {
text-align:center;
}
td {
text-align:right;
}
span {
float:left;
margin=0;
padding=0;
}
<form id="formId">
<table border="1">
<tr>
<th>Provide your contact information</th>
<th>Provide your login access information</th>
</tr>
<tr>
<td>
<label><span>First Name:</span> <input type = "text" placeholder = "Enter First Name" required/></label>
</td>
<td>
<label><span>Login ID:</span> <input type = "text" placeholder = "type a login ID" required/></label>
</td>
</tr>
<tr>
<td><label><span>Middle Name:</span> <input type="text" placeholder ="type your middle name"/></label></td>
<td><label><span>Password:</span> <input type="password" placeholder ="password" required/></label></td>
</tr>
<tr>
<td><label><span>Last Name:</span> <input type="text" placeholder="Last Name" required/></label></td>
<td id="but"><label><button type="submit" id="displayButton">Display Info</button></label></td>
</tr>
<tr>
<td><label><span>Street Address:</span> <input type="text" placeholder="address" required/></label></td>
</tr>
<tr>
<td><label for ="Citylist"><span>City:</span>
<input type = "text" id ="citylist"
placeholder="Select a city" list = "cities" required/>
<datalist id= "cities">
<option value = "Bronx"/>
<option value = "Brooklyn"/>
<option value = "Queens"/>
<option value = "Manahttan"/>
<option value = "Staten Island"/>
</datalist>
</label>
</td>
</tr>
<tr>
<td><label for ="StateList"><span>State:</span>
<input type = "text" id ="State"
placeholder="Select a city" list = "states" required/>
<datalist id= "states">
<option value = "New York"/>
<option value = "New Jersey"/>
<option value = "California"/>
<option value = "Virginia"/>
<option value = "Maine"/>
</datalist>
</td>
</tr>
<tr>
<td><label><span>Zip code:</span> <input type="text" placeholder="Type your zipcode" maxlength="5" required/></label></td>
</tr>
<tr>
<td>
<label><span>Phone</span>
<input type ="tel" placeholder="(123)456-789"
pattern="\(\{3}) +\d{3}-\d{4}" required/>
</label>
</td>
</tr>
<tr>
<td>
<label><span>Email:</span>
<input type="email" placeholder="[email protected] /cdn-cgi/l/email-protection" required/>
</label>
</td>
</tr>
<tr>
<td>
<label><span>Birth Date:</span>
<input type="date" required/>
</label>
</td>
</tr>
</table>
</form>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
