<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
form {
/* Center the form on the page */
margin: 0 auto;
width: 500px;
/* Form outline */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
form li + li {
margin-top: 1em;
}
label {
/* Uniform size & alignment */
display: inline-block;
width: 90px;
text-align: right;
}
input,
textarea,
select,
button {
/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
font: 1em sans-serif;
/* Uniform text field size */
width: 300px;
box-sizing: border-box;
/* Match form field borders */
border: 1px solid #999;
}
input:focus,
textarea:focus {
/* Additional highlight for focused elements */
border-color: #000;
}
textarea {
/* Align multiline text fields with their labels */
vertical-align: top;
/* Provide space to type some text */
height: 5em;
}
.button {
/* Align buttons with the text fields */
padding-left: 90px; /* same size as the label elements */
}
</style>
<title>Begin Production</title>
</head>
<body>
<form id="newProcess" method="post">
<ul>
<li>
<label for="process">Processs:</label>
<select id="process" name="process">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</li>
<li>
<label for="name">Supervisor:</label>
<select id="supervisor" name="user_name">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">b/option>
<option value="d">c</option>
<option value="e">d</option>
</select>
</li>
<li>
<label for="name">Operator 1:</label>
<input type="text" id="op1" name="op1">
</li>
<li>
<label for="name">Operator 2:</label>
<input type="text" id="op2" name="op2">
</li>
<li>
<label for="name">Operator 3:</label>
<input type="text" id="op3" name="op3">
</li>
<li>
<label for="batch">Batch:</label>
<input type="text" id="batch" name="bNum">
</li>
<li>
<label for="product">Product:</label>
<input type="text" id="product" name="product">
</li>
<li class="button" >
<button type="submit" id="submit">Start Process</button>
</li>
<!-- <li class="button">
<button type="submit" formmethod="get" formaction="/main.html">Cancel</button>
</li> -->
</ul>
</form>
<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-database.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.4/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>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var process, supervisor, op1, op2, op3, batch, product;
function getValues(){
process = document.getElementById('process').value;
supervisor = document.getElementById('supervisor').value;
op1 = document.getElementById('op1').value;
op2 = document.getElementById('op2').value;
op3 = document.getElementById('op3').value;
batch = document.getElementById('batch').value;
product = document.getElementById('product').value;
}
document.getElementById('newProcess').addEventListener('submit', pushForm);
function pushForm(){
getValues();
ref = firebase.database().ref().child('testing');
var newRef = ref.push();
newRef.set({
Process: process,
Supervisor: supervisor,
Operator1: op1,
Operator2: op2,
Operator3: op3,
BatchNum: batch,
ProductName: product
});
}
// document.getElementById('submit').onclick = function(){
// getValues();
// firebase.database().ref('newProcess').set({
// Process: process,
// Supervisor: supervisor,
// Operator1: op1,
// Operator2: op2,
// Operator3: op3,
// BatchNo: batch,
// ProductName: product
// });
// }
</script>
</body>
</html>
As per the title, for some reason my code is not writing into my realtime database. This is supposed to be a simple form. I've tried refering to multiple sources and have confirmed that the javascript is actually running.
But for some reason, the firebase part doesn't work at all. I think I'm not connected to firebase at all.
question from:
https://stackoverflow.com/questions/65913302/html-form-not-writing-to-firebase-realtime-database 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
