How to input if radio button is true or false into Firebase database?
Question
I have managed to push all text box input into Firebase but when I use the same method for the radio button I get: "Uncaught Error: Reference.push failed: first argument contains undefined in property 'Tires.runflat'" And I can't figure out how any variable is undefined so I am very confused about this although I am sure it is something simple.
html:
<body>
<div class="container">
<div class="content" style="background-color: white;">
<div id="heading">
<h1>Add A Tire<h1>
</div>
<form id="tires">
<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 class="pix">
<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>
</div>
</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" id="runflat" 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" class="treadDepthVal"> <?php echo $i;?></z>
<?php } ?>
<?php for($i=11; $i<21; $i++){ ?>
<z data-role="button" class="treadDepthVal" data-val="<?php echo $i; ?>"> <?php echo $i;?></z>
<?php } ?> <br><z data-role="button" class="treadDepthVal" data-val=".25">.25 </z>
<z data-role="button" class="treadDepthVal" data-val=".5">.5</z>
<z data-role="button" class="treadDepthVal" data-val=".75">.75</z>
</div>
</div><!--closing B -->
<div id="7C" class="inner-F"><div class="label">DOT Date</div><div class="input"><input type="text" name="dotdate" id="dotdate" required><br>
<?php for($i=0; $i <10; $i++){ ?>
<z data-role="button" class="dotDateVal" data-val="<?php echo $i; ?>"><?php echo $i;?></z>
<?php } ?>
</div></div><!--closing C -->
<div id="7D" class="inner-F"><label class="label" for="patches">Number of Patches</label>
<div class="input">
<input type="text" name="patches" id="patches" required><br>
<?php for($i=0;$i<5;$i++){?>
<z data-role="button" class="patchVal" data-val="<?php echo $i; ?>" maxlength="4"><?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" required>
</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 type="checkbox"
name="notListed" id="notListed"></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" required></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 type="checkbox" name="notListed" id="notListed"></div></div>
</div><!--closing div#9-->
<input type="submit" id="submit" value="Add This Tire">
</form>
</div>
</div> <!-- closing container -->
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="/Emily-Projects/auth/tire/new-add-a-tire.js"></script>
javascript:
var config = {
apiKey: "AIzaSyAjzWcrR4nvdb4BtP1kMeBPx_-lGeYVkAg",
authDomain: "cutdb-41c5d.firebaseapp.com",
databaseURL: "https://cutdb-41c5d.firebaseio.com",
projectId: "cutdb-41c5d",
storageBucket: "cutdb-41c5d.appspot.com",
messagingSenderId: "768551466581"
};
firebase.initializeApp(config);
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
//Add a Tire to Firebase
//vars for elements/inputs
var width = document.getElementById("width");
var aspect = document.getElementById("aspect");
var rim = document.getElementById("rim");
var manufacturer = document.getElementById("manufacturer");
var model = document.getElementById("model");
var weight = document.getElementById("weight");
var trim = document.getElementById("trim");
var cost = document.getElementById("cost");
var runflat = document.getElementById("runFlat")
var tread = document.getElementById("tread");
var dotdate = document.getElementById("dotdate");
var patches = document.getElementById("patches");
var retailPrice = document.getElementById("retailPrice");
var wholesalePrice = document.getElementById("wholesalePrice");
var notListed = document.getElementById("notListed");
var wholesaleOnly = document.getElementById("wholesaleOnly");
//RYDER PLEASE
//insert the pictures into the DB
//make a variable that accesses the pictures input
//insert the radio button value into the DB (input name: runflat)
//make a variable that accesses the radio button
//make the "tread depth" decimal buttons (.25, .5, and .75) append to the
number chosen from whole number buttons (1-20) to all insert into single
cell of the table and show in the input#tread
//make a radio button required
//figure out how to append the four inputs of the DOT DATE together to make
one 4-digit number and show in the input#dotdate
//checkbox inputs for notListed, wholesaleOnly
//easy buttons
//classes : width-sm, aspectVal, rimVal, manVal, modelVal, trimVal, treadDepthVal, dotDateVal, patchVal
$('.width-sm').click(function(){
$(width).val($(this).data('val')).trigger('change');
})
$('.aspectVal').click(function(){
$(aspect).val($(this).data('val')).trigger('change');
})
$('.rimVal').click(function(){
$(rim).val($(this).data('val')).trigger('change');
})
$('.manVal').click(function(){
$(manufacturer).val($(this).data('val')).trigger('change');
})
$('.modelVal').click(function(){
$(model).val($(this).data('val')).trigger('change');
})
$('.trimVal').click(function(){
$(trim).val($(this).data('val')).trigger('change');
})
//MAKE WORK
$('.patchVal').click(function(){
$(patches).val($(this).data('val')).trigger('change');
})
//APPEND THESE???
$('.treadDepthVal').click(function(){
$(tread).val($(this).data('val')).trigger('change');
})
$('.dotDateVal').click(function(){
$(dotdate).val($(this).data('val')).trigger('change');
})
//btns
var submitBtn = document.getElementById("submit");
//Function: submitClick();
var form = document.getElementById("tires");
$(form).on('submit', event => {
event.preventDefault();
window.alert("works");
const w = $(width).val();
const a = $(aspect).val();
const r = $(rim).val();
const m = $(manufacturer).val();
const mo = $(model).val();
const sw = $(weight).val();
const t = $(trim).val();
const c = $(cost).val();
const rf = $(runflat).val();
const td = $(tread).val();
const d = $(dotdate).val();
const p = $(patches).val();
const rp = $(retailPrice).val();
const wp = $(wholesalePrice).val();
firebase.database().ref('/Tires').push({
"width": w,
"aspect": a,
"rim": r,
"manufacturer": m,
"model": mo,
"weight": sw,
"trim": t,
"cost": c,
"runflat": rf,
"tread": td,
"dotdate": d,
"patches": p,
"retailprice": rp,
//"wp": wp
});
});
//picture code
var j = 0;
function previewFiles() {
if (j < 9) {
j++;
alert(j);
var preview = document.querySelector('#preview');
var files = document.querySelector('input[type=file]').files;
function readAndPreview(file) {
// Make sure `file.name` matches our extensions criteria
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
var reader = new FileReader();
reader.addEventListener("load", function() {
var image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
preview.appendChild(image);
}, false);
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
} else {
alert("I want to get in here");
document.getElementById("browse").disabled = true;
}
}
} else {
// No user is signed in.
alert("User is not Signed In");
}
});
1 answers
solution1
1 ACCPTED 2017-12-10 03:10:18
The line:
var runflat = document.getElementById("runFlat")
should be changed to:
var runflat = document.getElementById("runflat")
This is because IDs in JavaScript are case-sensitive.
On a side note, I don't think the line const rf = $(runflat).val(); will work. It will simply set rf to "on" every time. The more correct way to do it would be something like:
const rf = $("input[id='runflat']:checked").val();
This will set rf to "on" if the radio button is checked and to undefined if it is not. If you want to change these values you can use the Elvis operator:
const rf = $("input[id='runflat']:checked").val() ? "yes" : "no";
Now rf will be set to "yes" if the radio button is checked and to "no" if it is not.
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
Toggle true/false state on complete button in ReactJs using firebase database
Get true or false for radio button in Javascript
Firebase Realtime Database Snapshot Not Returning True or False
how to insert radio button value in firebase database using javascript
AngularJS How would it be possible to update all radio button values to false when one is selected as true?
Checking if checked radio button is returning true but should be false
Radio button ng-model to true/false (checked/unchecked)
Making a simple true / false flag for each radio button
Identifying which radio button was clicked in firebase database
True and false radio buttons in react
Related Tags