javascript - 如何阻止页面在提交表单时刷新?
问题描述
我正在尝试将学生的详细信息添加到 firebase 数据库。当我单击创建按钮时,即使我在 javaScript 中使用了 e.preventDefault() ,页面也会刷新。这里有什么问题?
HTML
<div id="Add" class="workspace">
<h2 class="create">Enter Candidate Details</h2>
<form id="stu-det-form">
<input class="text1" id="cname" name="name" align="center" placeholder="Enter Candidate Full Name" required/><br>
<input class="text1" id="cfname" name="fname" align="center" placeholder="Enter Father's Name" required/>
<input class="text1" type="date" id="cdob" name="dob" align="center" placeholder="Enter DOB DD/MM/YYYY" required/><br>
<select class="select1" id="cgender" name="gender">
<option value="-Gender-">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Undisclosed">Undisclosed</option>
</select>
<input class="text1" id="caddr" name="addr"align="center" placeholder="Enter Candidate Address" required/><br>
<input class="text1" id="cphno" name="phno" align="center" placeholder="Enter Candidate Contact Number" required/><br>
<input class="text1" id="ceid" name="eid" align="center" placeholder="Enter Candidate Email Address" required/><br>
<input class="text1" id="cpwd" name="pwd" align="center" placeholder="Enter Password" required/><br>
<button class="btn-mar" id="add_btn">Create</button>
</form>
</div>
Javascript
const studet = document.querySelector('#stu-det-form');
studet.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById("cname").value;
db.collection("candidates").doc(name).set({
name: studet.name.value,
fname: studet.fname.value,
dob: studet.dob.value,
gender: studet.gender.value,
addr: studet.addr.value,
phno: studet.phno.value,
eid: studet.eid.value,
pwd: studet.pwd.value
})
.then(function(docRef) {
window.alert("Student Added Successfully");
})
.catch(function(error) {
window.alert("Error Adding Student");
});
studet.reset();
});
解决方案
你的代码绝对没问题。您似乎没有将您的 Javascript 文件引用到您的 HTML 中。如果是这种情况,请使用HTML 文件底部的脚本</body>
标记(就在结束标记上方)。在 src 属性中给出 Javascript 文件的相对路径。
<script src="script.js"></script>
我在这里发现没有其他原因,因为您的代码看起来不错。
const studet = document.querySelector('#stu-det-form');
console.log("Within the js document");
studet.addEventListener('submit', (e) => {
console.log("Form Submitted");
e.preventDefault();
const name = document.getElementById("cname").value;
// studet.reset();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="Add" class="workspace">
<h2 class="create">Enter Candidate Details</h2>
<form id="stu-det-form">
<input class="text1" id="cname" name="name" align="center" placeholder="Enter Candidate Full Name"/><br>
<input class="text1" id="cfname" name="fname" align="center" placeholder="Enter Father's Name"/>
<input class="text1" type="date" id="cdob" name="dob" align="center" placeholder="Enter DOB DD/MM/YYYY"/><br>
<select class="select1" id="cgender" name="gender">
<option value="-Gender-">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Undisclosed">Undisclosed</option>
</select>
<input class="text1" id="caddr" name="addr"align="center" placeholder="Enter Candidate Address"/><br>
<input class="text1" id="cphno" name="phno" align="center" placeholder="Enter Candidate Contact Number"/><br>
<input class="text1" id="ceid" name="eid" align="center" placeholder="Enter Candidate Email Address"/><br>
<input class="text1" id="cpwd" name="pwd" align="center" placeholder="Enter Password"/><br>
<button class="btn-mar" id="add_btn">Create</button>
</form>
</div>
<!-- Use script tag to reference your javascript file :)
<script src="./script.js"></script>
-->
</body>
</html>
推荐阅读
- excel - 如何将同一日期的多个销售的 GM% 计算为唯一日期?
- sql - 从 SQL Server 2012 中的 XML 列中提取属性
- javascript - 将列表数据从 html 传递到 python (flask)
- react-native - React Native flatlist 条件渲染
- r - R - CSV 到 ts 用于每日数据
- python - 查找最短路径中osm节点列表的方式ID
- node.js - node.js数据访问acl权限
- sql - 如何从 oracle 中的转储文件中检查表大小?
- java - 使用 MessageFormat 转义双引号
- amazon-web-services - 如何将 Glue/Athena/Quicksight 与 CloudFormation 结合使用