Firebase: Data not submitting to database on certain page
Question
I have two pages that need to submit to the database; a user registration page and a tire-input page. The user registration page works. The tire-input page does not. The tire page will show the alert inside the "submitClick()" but doesn't input anything into the database. If there is anymore information that you need, let me know. Thanks in advance.
I've tried working with the rules:
Current (letting the user-registration work, but not the tire-input)
{
"rules": {
"users": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
}
}
}
Not letting anything work:
{
"rules": {
"users": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
},
"Tires": {
".read": true,
".write": true
}
}
}
HTML code (tire):
<?php
require ($_SERVER['DOCUMENT_ROOT'] . '/Emily-Projects/variables.php');
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../inc/styles/css.css">
</head>
<body>
<div class="container">
<div class="content" style="background-color: white;">
<div id="heading">
<h1>Add A Tire<h1>
</div>
<form>
<div id="1" class="form-sections">
<div class="input-div">
<label for="width" class="label">Width</label>
<select name="width" id="width" type="select" class="input">
<option value="">---</option>
<?php foreach ($tireWidths as $width) {?>
<option value="<?php echo $width;?>"><?php echo $width;?></option>
<?php } ?>
</select></div>
<div class="easy-div">
<div>
<?php foreach ($width100s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
<div>
<?php foreach ($width200s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
<div>
<?php foreach ($width300s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
</div>
</div> <!-- closing div#1-->
<div id="2" class="form-sections">
<div class="input-div">
<label for="aspect" class="label">Aspect Ratio</label>
<select class="input" name="aspect" id="aspect">
<option value="">---</option>
<?php foreach ($aspects as $aspect) {?>
<option value="<?php echo $aspect;?>"><?php echo $aspect;?></option>
<?php }?>
</select>
</div>
<div class="easy-div">
<div>
<?php foreach ($aspectsTop as $a){ ?>
<z data-role="button" data-val="<?php echo $a;?>" class="aspectVal"><?php echo $a;?></z>
<?php } ?>
</div>
<div>
<?php foreach ($aspectsBottom as $a){ ?>
<z data-role="button" data-val="<?php echo $a;?>" class="aspectVal"><?php echo $a;?></z>
<?php } ?>
</div>
</div>
</div> <!-- closing div#2-->
<div id="3" class="form-sections">
<div class="input-div">
<label class="label" for="rim">Rim Diameter</label>
<select id="rim" name="rim" class="input">
<option value="">---</option>
<?php foreach ($rimDiameter as $rim){ ?>
<option value="<?php echo $rim;?>"><?php echo $rim;?></option>
<?php } ?>
</select>
</div>
<div class="easy-div">
<div>
<?php foreach ($rimDiaTop as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="rimVal"><?php echo $r;?></z>
<?php }?>
</div>
<div>
<?php foreach ($rimDiaBottom as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="rimVal"><?php echo $r;?></z>
<?php }?>
</div>
</div>
</div> <!-- closing div#3-->
<div id="4" class="form-sections">
<div class="input-div">
<label class="label" for="manufacturer">Manufacturer</label>
<select class="input" name="manufacturer" id="manufacturer">
<option value="">---</option>
<?php foreach ($manufacturers as $m) { ?>
<option value="<?php echo $m;?>"><?php echo $m;?></option>
<?php } ?>
</select>
</div>
<div class="easy-div">
<div id="manu-group-one">
<?php foreach ($manufacturersOne as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-two">
<?php foreach ($manufacturersTwo as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-three">
<?php foreach ($manufacturersThree as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-four">
<?php foreach ($manufacturersFour as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-five">
<?php foreach ($manufacturersFive as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="manu-group-six">
<?php foreach ($manufacturersSix as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="manVal"><?php echo $r;?></z>
<?php }?>
</div>
</div>
</div> <!-- closing div#4-->
<div id="5" class="form-sections">
<div id="5a" class="inner-B"><div class="input-div"><label class="label" for="model">Model</label>
<select id="model" name="model" class="input">
<option value="">---</option>
<option value="test">Test</option>
</select>
</div>
<div class="easy-div">EASY BUTTONS</div>
</div><!--closing A -->
<div id="5B" class="inner-A"><label class="label" for="weight">Shipping Weight</label><input type="text" name="weight" id="weight" class="input"></div><!--closing B -->
</div> <!-- closing div#5-->
<div id="6" class="form-sections">
<div id="6A" class="inner-C">
<div class="input-div">
<label class="label" for="trim">Trim</label>
<select name="trim" id="trim" class="input" >
<option value="">---</option>
<option value="test">Test</option>
</select>
</div>
<div class="easy-div">EASY BUTTONS</div>
</div><!--closing A -->
<div id="6B" class="inner-D">
<label class="label" for="cost">Tire Cost</label>
<input name="cost" id="cost" class="input">
</div><!--closing B -->
<div id="6C" class="inner-E">PICTURES</div><!--closing C -->
</div> <!-- closing div#6-->
<div id="7" class="form-sections">
<div id="7A" class="inner-D">
<div class="label">Run Flat?</div>
<div class="input"><input type="radio" name="runflat" value="yes"> Yes <input type="radio" name="runflat" value="no"> No </div>
</div><!--closing A -->
<div id="7B" class="inner-F">
<div class="label">Tread Depth</div>
<div class="input">
<input type="text" name="tread" id="tread" ><br><br>
<?php for($i=1; $i<11; $i++){ ?>
<z data-role="button" > <?php echo $i;?></z>
<?php } ?>
<?php for($i=11; $i<21; $i++){ ?>
<z data-role="button" > <?php echo $i;?></z>
<?php } ?> <z data-role="button" >.25 </z>
<z data-role="button" >.5</z>
<z data-role="button" >.75</z>
</div>
</div><!--closing B -->
<div id="7C" class="inner-F"><div class="label">DOT Date</div><div class="input">INPUT</div></div><!--closing C -->
<div id="7D" class="inner-F"><label class="label" for="patches">Number of Patches</label>
<div class="input"><?php for($i=0;$i<5;$i++){?>
<z data-role="button" ><?php echo $i;?></z>
<?php
}?></div></div> <!--closing D-->
</div> <!-- closing div#7-->
<div id="8" class="form-sections">
<div id="8A" class="inner-G"><div class="label">Retail Price</div>
<input type="text" id="retailPrice" name="retailPrice" class="input">
</div>
<div id="8B" class="inner-G"><div class="label">C.U.T. Share</div><div class="input">- $4.99 </div></div>
<div id="8C" class="inner-G"><div class="label">C.C. Fee</div><div class="input"><?php echo $ccfee;?></div></div>
<div id="8D" class="inner-G">Not Applicable</div>
<div id="8E" class="inner-G"><div class="label">Shipping Est.</div><div class="input"><?php echo $shipEst;?></div></div>
<div id="8F" class="inner-G"><div class="label">My Pay Out</div><div class="input"><?php echo $payOutRetail;?></div></div>
<div id="8G" class="inner-G"><div class="label">Tire NOT listed on Cheapest Used Tires</div><div class="input">INPUT</div></div>
</div> <!-- closing div#8-->
<div id="9" class="form-sections">
<div id="9A" class="inner-G"><div class="label">Wholesale Price</div>
<input type="text" id="retailPrice" name="retailPrice" class="input"></div>
<div id="9B" class="inner-G"><div class="label">C.U.T. Share</div><div class="input">- $4.99</div></div>
<div id="9C" class="inner-G"><div class="label">C.C. Fee</div><div class="input"><?php echo $ccfee;?></div></div>
<div id="9D" class="inner-G"><div class="label">Buyer's Bucks</div><div class="input">- $3.00</div></div>
<div id="9E" class="inner-G"><div class="label">Shipping Est.</div><div class="input"><?php echo $shipEst;?></div></div>
<div id="9F" class="inner-G"><div class="label">My Pay Out</div><div class="input"><?php echo $payOutWS;?></div></div>
<div id="9G" class="inner-G"><div class="label">Wholesale ONLY</div><div class="input">INPUT</div></div>
</div><!--closing div#9-->
<input type="submit" id="submit" onclick="submitClick()"value="Add This Tire">
</form>
</div>
</div> <!-- closing container -->
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="/Emily-Projects/new-add-a-tire.js"></script>
</body>
</html>
Tire JS:
//File: new-add-a-tire.js
// Initialize Firebase
var config = {
apiKey: "AIzaSyCLpexd_9jOLjwcraume8RDXqag8mUSyMY",
authDomain: "funoto-a67ec.firebaseapp.com",
databaseURL: "https://funoto-a67ec.firebaseio.com",
projectId: "funoto-a67ec",
storageBucket: "funoto-a67ec.appspot.com",
messagingSenderId: "270438905275"
};
firebase.initializeApp(config);
//Add a Tire to Firbase
var width = document.getElementById("width");
var aspect = document.getElementById("aspect");
var rim = document.getElementById("rim");
var manufacturer = document.getElementById("manufacturer");
var submitBtn = document.getElementById("submit");
//Function: submitClick();
function submitClick(){
window.alert("Works");
var firebaseRef = firebase.database().ref();
firebaseRef.child("Tires").set("some value");
}
1 answers
solution1
0 2017-11-23 06:38:50
I am following the official doc try this
function submitClick(){
window.alert("Works");
var firebaseRef = firebase.database();
firebaseRef.ref("Tires").set({tire: "round"});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
No data entry into firebase database on page redirection
How to redirect to a certain page after submitting a form
Firebase query not submitting variables into firebase database using Javascript
Submitting data from text box to Firebase not working
Send data to database via fetch and subsequently display this data to html page via fetch again without submitting form or refreshing the page
Why is firebase's Realtime Database not loading data when page refreshes
Display real-time data to a web page through Firebase Database
Does onsubmit executes before submitting data to database?
Submitting form data with php with no page reload?
Submitting form data with javascript (No page reload)
Related Tags