无法从 html 表单上传到 firebase 数据库
Unable to upload to firebase database from html form
我正在努力弄清楚我尝试使用以下代码将数据上传到 firebase 时出了什么问题，但数据没有保存在 firebase 中。
当我点击提交时没有任何反应但是成功消息出现
有人可以帮帮我吗
我的java脚本代码fbdb.js是
// xxxxxxxxxx Submitting data to firebase xxxxxxxxxx
function uploadata (){
var jbid = document.getElementById('jobid');
var orin = document.getElementById('ori');
var recv = document.getElementById('recvdt');
var requnby = document.getElementById('reqn');
var wksrc = document.getElementById('wsrc');
var wktyp = document.getElementById('wtyp');
var furn = document.getElementById('fur');
var custm = document.getElementById('cust');
var strt = document.getElementById('stdt');
var endd = document.getElementById('enddt');
var remar = document.getElementById('rema');
var database = firebase.database();
var firebaseRef = database.ref();
var userData = {
job: jbid,
daterec: recv,
requn: requnby,
cat: wksrc,
comm: wktyp,
equipment: furn,
customer: custm,
startdt: strt,
enddt: endd,
rmarks: remar
}
firebaseRef.child('todo').push(userData);
swal(document.getElementById('jobid'));
swal('Your data is successfully uploaded to server!',
).then((value) => {
setTimeout(function(){
window.location.replace("./logpage.html");
}, 1000)
});
};
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="../css/style.css">
<!-- Sweet Alert JavaScript -->
<script src="../js/sweetalert2.js"></script>
<!-- Nunito Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
<title>Log Book | CamsFusion89</title>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row mx-1">
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 text-center mt-5 pb-4 text-primary">
<h1 class="h1">Daily Work Log Book & Planner</h1>
</div>
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 bg-white shadow mb-5 border border-primary">
<div class="row">
<div class="col-lg-6 col-md-6 p-4 bg-primary divCover">
<img src="../images/firebase_logo.png" alt="Firebase cover image">
</div>
<div class="col-lg-6 col-md-6 p-lg-5 p-md-5 px-3 py-4">
<div id="logForm" method="post">
<h2 class="h2 text-center text-dark mb-3">Log Book Entry</h2>
<div class="item">
<!-- Data Entry Start -->
<div class="form-group">
<label for="jobid">Unique Job ID<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="jobid" onblur=""placeholder="Unique Job ID">
</div>
<div class="form-group">
<label for="orgi">Originator<span class="text-danger ml-1">*</span></label>
<br>
<input list="orgi" name="Originator" class="form-control" onblur=""placeholder="Originator">
<datalist id="orgi">
<option value="Nalini Ranjan Muduli">
<option value="M V Narendra">
<option value="Iswar Toppo">
</datalist>
</div>
<div class="form-group">
<label for="recvdt">Date of Received<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="recvdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="reqn">Requisition By<span class="text-danger ml-1">*</span></label>
<br>
<input list="reqn" name="Requisition" class="form-control" onblur=""placeholder="Requisition By">
<datalist id="reqn">
<option value="Department A">
<option value="Department B">
<option value="Department C">
<option value="Department D">
<option value="Department E">
</datalist>
</div>
<div class="form-group">
<label for="wsrc">Work Source (Business Segment)<span class="text-danger ml-1">*</span></label>
<br>
<input list="wsrc" name="Work Source (Business Segment)" class="form-control" onblur=""placeholder="Work Source (Business Segment)">
<datalist id="wsrc">
<option value="Steel-Domestic">
<option value="Steel-Export">
<option value="Steel-GSB">
<option value="Non Ferrous-Domestic">
<option value="Non Ferrous-Export">
<option value="Non Ferrous-GSB">
<option value="Engineering">
<option value="Miscellaneous">
</datalist>
</div>
<div class="form-group">
<label for="wtyp">Work Type<span class="text-danger ml-1">*</span></label>
<br>
<input list="wtyp" name="Work Type" class="form-control" onblur=""placeholder="Work Type" >
<datalist id="wtyp">
<option value="New">
<option value="Revision">
<option value="Correction">
<option value="Proposal">
</datalist>
</div>
<div class="form-group">
<label for="fur">Furnace/Equipment<span class="text-danger ml-1">*</span></label>
<br>
<input list="fur" name="Furnace/Equipment" class="form-control" onblur=""placeholder="Furnace/Equipment">
<datalist id="fur">
<option value="Steel-Teeming Ladle">
<option value="Hot Metal Ladle">
<option value="Corex Ladle">
<option value="BOF">
<option value="EAF">
<option value="AOD">
<option value="RH Degasser">
<option value="Snorkel">
<option value="Slide Gate Mechanism">
<option value="Torpedo Ladle Car">
<option value="Brick Shape">
<option value="Petro-Chemicals">
<option value="Tap Hole">
</datalist>
</div>
<div class="form-group">
<label for="cust">Customer Name<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="cust" onblur=""placeholder="Customer Name">
</div>
<div class="form-group">
<label for="stdt">Started On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="stdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="enddt">End On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="enddt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="rema">Remarks<span class="text-danger ml-1">*</span></label>
<textarea class="form-control" id="rema" rows="5" onblur=""placeholder="Remarks"></textarea>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="uploadata()">
Submit<small></small></button>
</div>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="gohome()">
Cancel & Go Back<small></small></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCnBlyACmhW_mmr0tU5IITOtHWwU68LRYs",
authDomain: "camsfusion89auth.firebaseapp.com",
databaseURL: "https://camsfusion89auth.firebaseio.com",
projectId: "camsfusion89auth",
storageBucket: "camsfusion89auth.appspot.com",
messagingSenderId: "629330978244",
appId: "1:629330978244:web:235676b5e28b8c3f8bb091",
measurementId: "G-PPYS5Y0TWP"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- Custom JavaScript -->
<script src="../js/fbdb.js"></script>
</body>
</html>
我正在努力弄清楚我尝试使用以下代码将数据上传到 firebase 时出了什么问题，但数据没有保存在 firebase 中。当我点击提交时没有任何反应但是出现了成功消息有人可以帮助我吗
在写这个答案时，我改变了很多东西：
- 数据列表没有 return 值，输入有 source。
document.getElementById('ori').value;改为orgi- 从元素中得到
.value
- 已添加
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script> 以便能够使用 swal
// xxxxxxxxxx Submitting data to firebase xxxxxxxxxx
function uploadata (){
var jbid = document.getElementById('jobid').value;
var orin = document.getElementById('orgi').value;
var recv = document.getElementById('recvdt').value;
var requnby = document.getElementById('reqn').value;
var wksrc = document.getElementById('wsrc').value;
var wktyp = document.getElementById('wtyp').value;
var furn = document.getElementById('fur').value;
var custm = document.getElementById('cust').value;
var strt = document.getElementById('stdt').value;
var endd = document.getElementById('enddt').value;
var remar = document.getElementById('rema').value;
var database = firebase.database();
var firebaseRef = database.ref();
var userData = {
job: jbid,
daterec: recv,
requn: requnby,
cat: wksrc,
comm: wktyp,
equipment: furn,
customer: custm,
startdt: strt,
enddt: endd,
rmarks: remar
};
console.log(userData);
firebaseRef.child('todo').push(userData);
swal(document.getElementById('jobid'));
swal('Your data is successfully uploaded to server!',
).then((value) => {
setTimeout(function(){
window.location.replace("./logpage.html");
}, 1000)
});
};
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="../css/style.css">
<!-- Sweet Alert JavaScript -->
<script src="../js/sweetalert2.js"></script>
<!-- Nunito Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
<title>Log Book | CamsFusion89</title>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row mx-1">
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 text-center mt-5 pb-4 text-primary">
<h1 class="h1">Daily Work Log Book & Planner</h1>
</div>
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 bg-white shadow mb-5 border border-primary">
<div class="row">
<div class="col-lg-6 col-md-6 p-4 bg-primary divCover">
<img src="../images/firebase_logo.png" alt="Firebase cover image">
</div>
<div class="col-lg-6 col-md-6 p-lg-5 p-md-5 px-3 py-4">
<div id="logForm" method="post">
<h2 class="h2 text-center text-dark mb-3">Log Book Entry</h2>
<div class="item">
<!-- Data Entry Start -->
<div class="form-group">
<label for="jobid">Unique Job ID<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="jobid" onblur=""placeholder="Unique Job ID">
</div>
<div class="form-group">
<label for="orgi">Originator<span class="text-danger ml-1">*</span></label>
<br>
<input list="orgi-list" id="orgi" name="Originator" class="form-control" onblur=""placeholder="Originator">
<datalist id="orgi-list">
<option value="Nalini Ranjan Muduli">
<option value="M V Narendra">
<option value="Iswar Toppo">
</datalist>
</div>
<div class="form-group">
<label for="recvdt">Date of Received<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="recvdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="reqn">Requisition By<span class="text-danger ml-1">*</span></label>
<br>
<input list="reqn-list" id="reqn" name="Requisition" class="form-control" onblur=""placeholder="Requisition By">
<datalist id="reqn-list">
<option value="Department A">
<option value="Department B">
<option value="Department C">
<option value="Department D">
<option value="Department E">
</datalist>
</div>
<div class="form-group">
<label for="wsrc">Work Source (Business Segment)<span class="text-danger ml-1">*</span></label>
<br>
<input list="wsrc-list" id="wsrc" name="Work Source (Business Segment)" class="form-control" onblur=""placeholder="Work Source (Business Segment)">
<datalist id="wsrc-list">
<option value="Steel-Domestic">
<option value="Steel-Export">
<option value="Steel-GSB">
<option value="Non Ferrous-Domestic">
<option value="Non Ferrous-Export">
<option value="Non Ferrous-GSB">
<option value="Engineering">
<option value="Miscellaneous">
</datalist>
</div>
<div class="form-group">
<label for="wtyp">Work Type<span class="text-danger ml-1">*</span></label>
<br>
<input list="wtyp-list" id="wtyp" name="Work Type" class="form-control" onblur=""placeholder="Work Type" >
<datalist id="wtyp-list">
<option value="New">
<option value="Revision">
<option value="Correction">
<option value="Proposal">
</datalist>
</div>
<div class="form-group">
<label for="fur">Furnace/Equipment<span class="text-danger ml-1">*</span></label>
<br>
<input list="fur-list" id="fur" name="Furnace/Equipment" class="form-control" onblur=""placeholder="Furnace/Equipment">
<datalist id="fur-list">
<option value="Steel-Teeming Ladle">
<option value="Hot Metal Ladle">
<option value="Corex Ladle">
<option value="BOF">
<option value="EAF">
<option value="AOD">
<option value="RH Degasser">
<option value="Snorkel">
<option value="Slide Gate Mechanism">
<option value="Torpedo Ladle Car">
<option value="Brick Shape">
<option value="Petro-Chemicals">
<option value="Tap Hole">
</datalist>
</div>
<div class="form-group">
<label for="cust">Customer Name<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="cust" onblur=""placeholder="Customer Name">
</div>
<div class="form-group">
<label for="stdt">Started On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="stdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="enddt">End On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="enddt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="rema">Remarks<span class="text-danger ml-1">*</span></label>
<textarea class="form-control" id="rema" rows="5" onblur=""placeholder="Remarks"></textarea>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="uploadata()">
Submit<small></small></button>
</div>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="gohome()">
Cancel & Go Back<small></small></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCnBlyACmhW_mmr0tU5IITOtHWwU68LRYs",
authDomain: "camsfusion89auth.firebaseapp.com",
databaseURL: "https://camsfusion89auth.firebaseio.com",
projectId: "camsfusion89auth",
storageBucket: "camsfusion89auth.appspot.com",
messagingSenderId: "629330978244",
appId: "1:629330978244:web:235676b5e28b8c3f8bb091",
measurementId: "G-PPYS5Y0TWP"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- Custom JavaScript -->
<script src="../js/fbdb.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</body>
</html>
让我知道这是怎么回事。
我正在努力弄清楚我尝试使用以下代码将数据上传到 firebase 时出了什么问题，但数据没有保存在 firebase 中。 当我点击提交时没有任何反应但是成功消息出现 有人可以帮帮我吗
我的java脚本代码fbdb.js是
// xxxxxxxxxx Submitting data to firebase xxxxxxxxxx
function uploadata (){
var jbid = document.getElementById('jobid');
var orin = document.getElementById('ori');
var recv = document.getElementById('recvdt');
var requnby = document.getElementById('reqn');
var wksrc = document.getElementById('wsrc');
var wktyp = document.getElementById('wtyp');
var furn = document.getElementById('fur');
var custm = document.getElementById('cust');
var strt = document.getElementById('stdt');
var endd = document.getElementById('enddt');
var remar = document.getElementById('rema');
var database = firebase.database();
var firebaseRef = database.ref();
var userData = {
job: jbid,
daterec: recv,
requn: requnby,
cat: wksrc,
comm: wktyp,
equipment: furn,
customer: custm,
startdt: strt,
enddt: endd,
rmarks: remar
}
firebaseRef.child('todo').push(userData);
swal(document.getElementById('jobid'));
swal('Your data is successfully uploaded to server!',
).then((value) => {
setTimeout(function(){
window.location.replace("./logpage.html");
}, 1000)
});
};
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="../css/style.css">
<!-- Sweet Alert JavaScript -->
<script src="../js/sweetalert2.js"></script>
<!-- Nunito Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
<title>Log Book | CamsFusion89</title>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row mx-1">
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 text-center mt-5 pb-4 text-primary">
<h1 class="h1">Daily Work Log Book & Planner</h1>
</div>
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 bg-white shadow mb-5 border border-primary">
<div class="row">
<div class="col-lg-6 col-md-6 p-4 bg-primary divCover">
<img src="../images/firebase_logo.png" alt="Firebase cover image">
</div>
<div class="col-lg-6 col-md-6 p-lg-5 p-md-5 px-3 py-4">
<div id="logForm" method="post">
<h2 class="h2 text-center text-dark mb-3">Log Book Entry</h2>
<div class="item">
<!-- Data Entry Start -->
<div class="form-group">
<label for="jobid">Unique Job ID<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="jobid" onblur=""placeholder="Unique Job ID">
</div>
<div class="form-group">
<label for="orgi">Originator<span class="text-danger ml-1">*</span></label>
<br>
<input list="orgi" name="Originator" class="form-control" onblur=""placeholder="Originator">
<datalist id="orgi">
<option value="Nalini Ranjan Muduli">
<option value="M V Narendra">
<option value="Iswar Toppo">
</datalist>
</div>
<div class="form-group">
<label for="recvdt">Date of Received<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="recvdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="reqn">Requisition By<span class="text-danger ml-1">*</span></label>
<br>
<input list="reqn" name="Requisition" class="form-control" onblur=""placeholder="Requisition By">
<datalist id="reqn">
<option value="Department A">
<option value="Department B">
<option value="Department C">
<option value="Department D">
<option value="Department E">
</datalist>
</div>
<div class="form-group">
<label for="wsrc">Work Source (Business Segment)<span class="text-danger ml-1">*</span></label>
<br>
<input list="wsrc" name="Work Source (Business Segment)" class="form-control" onblur=""placeholder="Work Source (Business Segment)">
<datalist id="wsrc">
<option value="Steel-Domestic">
<option value="Steel-Export">
<option value="Steel-GSB">
<option value="Non Ferrous-Domestic">
<option value="Non Ferrous-Export">
<option value="Non Ferrous-GSB">
<option value="Engineering">
<option value="Miscellaneous">
</datalist>
</div>
<div class="form-group">
<label for="wtyp">Work Type<span class="text-danger ml-1">*</span></label>
<br>
<input list="wtyp" name="Work Type" class="form-control" onblur=""placeholder="Work Type" >
<datalist id="wtyp">
<option value="New">
<option value="Revision">
<option value="Correction">
<option value="Proposal">
</datalist>
</div>
<div class="form-group">
<label for="fur">Furnace/Equipment<span class="text-danger ml-1">*</span></label>
<br>
<input list="fur" name="Furnace/Equipment" class="form-control" onblur=""placeholder="Furnace/Equipment">
<datalist id="fur">
<option value="Steel-Teeming Ladle">
<option value="Hot Metal Ladle">
<option value="Corex Ladle">
<option value="BOF">
<option value="EAF">
<option value="AOD">
<option value="RH Degasser">
<option value="Snorkel">
<option value="Slide Gate Mechanism">
<option value="Torpedo Ladle Car">
<option value="Brick Shape">
<option value="Petro-Chemicals">
<option value="Tap Hole">
</datalist>
</div>
<div class="form-group">
<label for="cust">Customer Name<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="cust" onblur=""placeholder="Customer Name">
</div>
<div class="form-group">
<label for="stdt">Started On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="stdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="enddt">End On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="enddt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="rema">Remarks<span class="text-danger ml-1">*</span></label>
<textarea class="form-control" id="rema" rows="5" onblur=""placeholder="Remarks"></textarea>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="uploadata()">
Submit<small></small></button>
</div>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="gohome()">
Cancel & Go Back<small></small></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCnBlyACmhW_mmr0tU5IITOtHWwU68LRYs",
authDomain: "camsfusion89auth.firebaseapp.com",
databaseURL: "https://camsfusion89auth.firebaseio.com",
projectId: "camsfusion89auth",
storageBucket: "camsfusion89auth.appspot.com",
messagingSenderId: "629330978244",
appId: "1:629330978244:web:235676b5e28b8c3f8bb091",
measurementId: "G-PPYS5Y0TWP"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- Custom JavaScript -->
<script src="../js/fbdb.js"></script>
</body>
</html>
我正在努力弄清楚我尝试使用以下代码将数据上传到 firebase 时出了什么问题，但数据没有保存在 firebase 中。当我点击提交时没有任何反应但是出现了成功消息有人可以帮助我吗
在写这个答案时，我改变了很多东西：
- 数据列表没有 return 值，输入有 source。
document.getElementById('ori').value;改为orgi- 从元素中得到
.value - 已添加
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>以便能够使用swal
// xxxxxxxxxx Submitting data to firebase xxxxxxxxxx
function uploadata (){
var jbid = document.getElementById('jobid').value;
var orin = document.getElementById('orgi').value;
var recv = document.getElementById('recvdt').value;
var requnby = document.getElementById('reqn').value;
var wksrc = document.getElementById('wsrc').value;
var wktyp = document.getElementById('wtyp').value;
var furn = document.getElementById('fur').value;
var custm = document.getElementById('cust').value;
var strt = document.getElementById('stdt').value;
var endd = document.getElementById('enddt').value;
var remar = document.getElementById('rema').value;
var database = firebase.database();
var firebaseRef = database.ref();
var userData = {
job: jbid,
daterec: recv,
requn: requnby,
cat: wksrc,
comm: wktyp,
equipment: furn,
customer: custm,
startdt: strt,
enddt: endd,
rmarks: remar
};
console.log(userData);
firebaseRef.child('todo').push(userData);
swal(document.getElementById('jobid'));
swal('Your data is successfully uploaded to server!',
).then((value) => {
setTimeout(function(){
window.location.replace("./logpage.html");
}, 1000)
});
};
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="../css/style.css">
<!-- Sweet Alert JavaScript -->
<script src="../js/sweetalert2.js"></script>
<!-- Nunito Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
<title>Log Book | CamsFusion89</title>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row mx-1">
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 text-center mt-5 pb-4 text-primary">
<h1 class="h1">Daily Work Log Book & Planner</h1>
</div>
<div class="col-lg-10 col-md-10 offset-lg-1 offset-md-1 bg-white shadow mb-5 border border-primary">
<div class="row">
<div class="col-lg-6 col-md-6 p-4 bg-primary divCover">
<img src="../images/firebase_logo.png" alt="Firebase cover image">
</div>
<div class="col-lg-6 col-md-6 p-lg-5 p-md-5 px-3 py-4">
<div id="logForm" method="post">
<h2 class="h2 text-center text-dark mb-3">Log Book Entry</h2>
<div class="item">
<!-- Data Entry Start -->
<div class="form-group">
<label for="jobid">Unique Job ID<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="jobid" onblur=""placeholder="Unique Job ID">
</div>
<div class="form-group">
<label for="orgi">Originator<span class="text-danger ml-1">*</span></label>
<br>
<input list="orgi-list" id="orgi" name="Originator" class="form-control" onblur=""placeholder="Originator">
<datalist id="orgi-list">
<option value="Nalini Ranjan Muduli">
<option value="M V Narendra">
<option value="Iswar Toppo">
</datalist>
</div>
<div class="form-group">
<label for="recvdt">Date of Received<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="recvdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="reqn">Requisition By<span class="text-danger ml-1">*</span></label>
<br>
<input list="reqn-list" id="reqn" name="Requisition" class="form-control" onblur=""placeholder="Requisition By">
<datalist id="reqn-list">
<option value="Department A">
<option value="Department B">
<option value="Department C">
<option value="Department D">
<option value="Department E">
</datalist>
</div>
<div class="form-group">
<label for="wsrc">Work Source (Business Segment)<span class="text-danger ml-1">*</span></label>
<br>
<input list="wsrc-list" id="wsrc" name="Work Source (Business Segment)" class="form-control" onblur=""placeholder="Work Source (Business Segment)">
<datalist id="wsrc-list">
<option value="Steel-Domestic">
<option value="Steel-Export">
<option value="Steel-GSB">
<option value="Non Ferrous-Domestic">
<option value="Non Ferrous-Export">
<option value="Non Ferrous-GSB">
<option value="Engineering">
<option value="Miscellaneous">
</datalist>
</div>
<div class="form-group">
<label for="wtyp">Work Type<span class="text-danger ml-1">*</span></label>
<br>
<input list="wtyp-list" id="wtyp" name="Work Type" class="form-control" onblur=""placeholder="Work Type" >
<datalist id="wtyp-list">
<option value="New">
<option value="Revision">
<option value="Correction">
<option value="Proposal">
</datalist>
</div>
<div class="form-group">
<label for="fur">Furnace/Equipment<span class="text-danger ml-1">*</span></label>
<br>
<input list="fur-list" id="fur" name="Furnace/Equipment" class="form-control" onblur=""placeholder="Furnace/Equipment">
<datalist id="fur-list">
<option value="Steel-Teeming Ladle">
<option value="Hot Metal Ladle">
<option value="Corex Ladle">
<option value="BOF">
<option value="EAF">
<option value="AOD">
<option value="RH Degasser">
<option value="Snorkel">
<option value="Slide Gate Mechanism">
<option value="Torpedo Ladle Car">
<option value="Brick Shape">
<option value="Petro-Chemicals">
<option value="Tap Hole">
</datalist>
</div>
<div class="form-group">
<label for="cust">Customer Name<span class="text-danger ml-1">*</span></label>
<input type="text" class="form-control" id="cust" onblur=""placeholder="Customer Name">
</div>
<div class="form-group">
<label for="stdt">Started On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="stdt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="enddt">End On<span class="text-danger ml-1">*</span></label>
<input type="date" class="form-control" id="enddt" onblur=""placeholder="DD/MM/YYYY">
<i class="fas fa-calendar-alt"></i>
</div>
<div class="form-group">
<label for="rema">Remarks<span class="text-danger ml-1">*</span></label>
<textarea class="form-control" id="rema" rows="5" onblur=""placeholder="Remarks"></textarea>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="uploadata()">
Submit<small></small></button>
</div>
</div>
<div class="col-lg-12 col-md-12 text-center">
<button type="button" class="btn btn-outline-primary btn-block text-uppercase mb-3" onclick="gohome()">
Cancel & Go Back<small></small></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyCnBlyACmhW_mmr0tU5IITOtHWwU68LRYs",
authDomain: "camsfusion89auth.firebaseapp.com",
databaseURL: "https://camsfusion89auth.firebaseio.com",
projectId: "camsfusion89auth",
storageBucket: "camsfusion89auth.appspot.com",
messagingSenderId: "629330978244",
appId: "1:629330978244:web:235676b5e28b8c3f8bb091",
measurementId: "G-PPYS5Y0TWP"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- Custom JavaScript -->
<script src="../js/fbdb.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</body>
</html>
让我知道这是怎么回事。