Hello all, I have created a Web Form to upload data(Rich Text) to Firebase Database,
But sometimes data is entered to Database and other Times the Fields in the Database is completely Empty. Can Anyone suggest me the solution as I am new to Web Dev.
Here is my WebForm Code (Rich Text is only in Description):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Firebase</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="container">
<h2>Job Adder</h2>
<div class="alert alert-success success-message" style="display:none;">Form submitted successfully.</div>
<form id="contactForm">
<div class="form-group">
<label for="exampleFullName">Enter Date :</label>
<input type="text" class="form-control fullname" id="exampleFullName" placeholder="Enter Date here" required>
</div>
<div class="form-group">
<label for="post">Enter Post :</label>
<input type="text" class="form-control post" id="post" placeholder="Enter Job Post here" required>
</div>
<div class="form-group">
<label for="exampleEmail">Title :</label>
<input type="text" class="form-control email" id="exampleEmail" placeholder="Enter Title here" required>
</div>
<div class="form-group">
<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<label for="exampleSubject">Description :</label>
<textarea type="text" class="ckeditor" id="exampleSubject" placeholder="Enter description here" cols="0" rows="10" required>
</textarea>
</div>
<div class="form-group">
<label for="salary">Salary :</label>
<input type = "text" class="form-control salary" id="salary" placeholder="Enter salary here" required>
</div>
<div class="form-group">
<label for="exampleMessage">Apply here:</label>
<input type = "text" class="form-control message" id="exampleMessage" placeholder="Enter direct link here" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-database.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Here is my Javascript code :
var firebaseConfig = {
apiKey: "AIzaoYRpaXDGoM",
authDomain: "web-adder.firebaseapp.com",
databaseURL: "https://web-adder.firebaseio.com",
projectId: "web-adder",
storageBucket: "web-adder.appspot.com",
messagingSenderId: "1049",
appId: "1:1066659099549:web:2162a723574",
measurementId: "G-4PFY"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Reference messages collection
var messagesRef = firebase.database().ref('WebView Test');
// .child("Categories").child("Academic Jobs");
$('#contactForm').submit(function(e) {
e.preventDefault();
var newMessageRef = messagesRef.push();
newMessageRef.set({
date: $('.fullname').val(),
post: $('.post').val(),
title: $('.email').val(),
description: $('.ckeditor').val(),
salary: $('.salary').val(),
link: $('.message').val()
});
$('.success-message').show();
$('#contactForm')[0].reset();
// CKEDITOR.instances.msg.setData('');
window.location.reload();
});
Aucun commentaire:
Enregistrer un commentaire