I am working on a school project that makes an anonymous board in which everyone in the school can participate. The problem that I faced is that after posting one post, I cannot post any other post. It is not uploaded to firebase either and should alert "submission complete!" after posting a form, but It doesn't.
It should work in this way: submit a form submitted information pushed into firebase database, read data from firebase database write data from firebase to html if click "delete" button, it delete post and firebase data after checking post password. the code is in below:
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "---",
authDomain: "---",
databaseURL: "---",
projectId: "---",
storageBucket: "---",
messagingSenderId: "---",
appId: "---
};
firebase.initializeApp(firebaseConfig);
var control_key = firebase.database().ref("boardform");
document.getElementById("boardform").addEventListener("submit", submitForm);
function submitForm(e) {
e.preventDefault();
var name = getElementVal('name');
var content = getElementVal('content');
var pwd = getElementVal('pwd');
saveMsg(name, content, pwd);
}
const saveMsg = (name, content, pwd) => {
var newContactForm = control_key.push();
newContactForm.set({
name:name,
content: content,
pwd: pwd
});
alert("submition complete!");
}
const getElementVal = (id) => {
return document.getElementById(id).value;
}
// listen for incoming messages
control_key.on("child_added", function (snapshot) {
var html = "";
// give each message a unique ID
html += "<div id='message-" + snapshot.key + "' class = 'container'>";
// show delete button if message is sent by me
html += "<div class='textcontainer'>";
html += "<h3>";
html += snapshot.val().name;
html += "</h3>";
html += "</div>";
html += "<div class='textcontainer'>";
html += "<p>";
html += snapshot.val().content;
html += "</p>";
html += "</div>";
html += "<div class='deletecontainer'>";
html += "<button data-id='" + snapshot.key + "' onclick='deleteMessage(this);' class='deleteButton' >";
html += "Delete";
html += "</button>";
html += "</div>";
html += "</div>";
document.getElementById("requests").innerHTML += html;
});
function deleteMessage(self) {
// get message ID
var pwdFromUser = prompt("password of the post?");
var messageId = self.getAttribute("data-id");
var starCountRef = firebase.database().ref('boardform/' + messageId + '/pwd');
starCountRef.on('value', (snapshot) => {
if (snapshot.val() == pwdFromUser){
control_key.child(messageId).remove();
}
});
};
// delete message
//control_key.child(messageId).remove();
// attach listener for delete message
control_key.on("child_removed", function (snapshot) {
// remove message node
document.getElementById("message-" + snapshot.key).innerHTML = "This post has been removed";
});.inputbox{
text-align: center;
padding: 10px;
}
.container{
border: 3px solid gray;
margin:auto;
width:50%;
padding:10px;
margin-top: 50px;
background-color:white;
box-shadow: 5px 5px 10px gray;
}
.textcontainer{
text-align: center;
padding: 10px;
border-bottom: 2px solid #A9A9A9;
}
.deletecontainer{
text-align: center;
padding: 10px;
}
.main{
padding-bottom:30px;
}
.header{
background-color:background-color: #D0B8B3;
text-align: center;
}
#opening{
font-family: "Helvetica", sans-serif;
}
.button {
border-radius: 4px;
background-color: #78141c;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 170px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
input{
width:350px;
}
html{
}
.namail{
border-top:0px;
border-left:0px;
border-right:0px;
}
.namail:focus{
outline:solid 0px red;
}
.ending{
margin:10px;
text-align: center;
color:gray;
}
.deleteButton{
border-radius: 4px;
background-color: #FFFFFF;
border: 2px solid #78141c;
color: #000000;
text-align: center;
font-size: 28px;
padding: 20px;
width: 170px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.deleteButton:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
background-color: #78141c;
color: #FFFFFF;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="msgboard.css">
<meta charset="utf-8">
<link rel="icon" href="---" sizes="32x32" />
<title>valor Annynymous Board</title>
</head>
<body>
<div class="header">
<a href="index.html">
<img src="school.png" alt="school">
</a>
<h1 id = "opening">Annonymous Board</h1>
</div>
<hr>
<div class="main" id = "requests">
<div class="container">
<form class="" action="" method="post" id = "boardform">
<div class = "inputbox">
<h4>Name</h4>
<input class = "namail" type = "text" id = "name" placeholder = "your name (can submit as annonnymous)">
</div>
<div class = "inputbox">
<h4>PWD</h4>
<input class = "namail" type = "text" id = "pwd" placeholder = "pwd (in case you want to delete)">
</div>
<div class = "inputbox">
<h4>Board Content</h4>
<textarea name="paragraph_text" cols="50" rows="10" id = "content" ></textarea>
</div>
<div class = "inputbox">
<button class = "button" type = "submit"> <span>Post</span> </button>
</div>
</form>
</div>
</div>
<hr>
<div class="ending">
<p>© 2022 --- Club</p>
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/firebase/7.14.1-0/firebase.js"></script>
<script src ="msgboardjs.js"></script>
</body>
</html>