如何阻止页面在提交表单时刷新？

Question

我正在尝试将学生的详细信息添加到 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();
});

Answer 1

如果您不想提交表单，更好的方法是将事件添加到表单提交而不是附加事件，将 onclick 事件添加到您的按钮并在其中运行您的 Javascript 。

 <button class="btn-mar" id="add_btn" onclick="addStud()">Create</button>

 function addStud(){ const studet = document.querySelector('#stu-det-form'); 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(); }

Answer 2

你的代码绝对没问题。 您似乎没有将 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>

如何阻止页面在提交表单时刷新？

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-06-06 07:15:54

解决方案2
1 2020-06-06 07:39:06

如何阻止页面在提交表单时刷新？

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-06-06 07:15:54

解决方案2 1 2020-06-06 07:39:06

解决方案1
1 已采纳 2020-06-06 07:15:54

解决方案2
1 2020-06-06 07:39:06