CODEWITHSUNDEEP
javascripthtml
Ragav
Ragav

Reputation: 15

How to stop the page from refreshing on submitting form?

I am trying to add the details of the student to the firebase database. when I click the create button the page gets refreshed even though I've used e.preventDefault() in the javaScript. What is wrong here?

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();
});

Upvotes: 1

Views: 80

Answers (2)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8078

Your code is absolutely fine. It seems you have not referenced your Javascript file into you HTML. If this is the case, use the script tag at the bottom of your HTML file (just above the closing </body> tag). Give the relative path of your Javascript file within the src attribute. 

<script src="script.js"></script>

There is no other reason, I found here, as your code seems fine.

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>

Upvotes: 1

Aakash Bhadana
Aakash Bhadana

Reputation: 312

If you don't want the form to submit then, a better approach will be to rather than attaching event to form submission, add onclick event to your button and run your Javascript inside it.

<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();
}

Upvotes: 1

Related Questions