javascript - 如何将单选按钮的 true 或 false 输入到 Firebase 数据库中？-6ren

javascript - 如何将单选按钮的 true 或 false 输入到 Firebase 数据库中？

转载作者：行者123 更新时间：2023-12-03 02:54:21

我已成功将所有文本框输入推送到 Firebase 中，但是当我对单选按钮使用相同的方法时，我得到:“未捕获错误:Reference.push 失败:第一个参数在属性‘Tires.runflat’中包含未定义”而且我无法弄清楚任何变量是如何未定义的，所以我对此感到非常困惑，尽管我确信它很简单。

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&apos;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");
   }
   });

最佳答案

行:

var runflat = document.getElementById("runFlat")

应更改为:

var runflat = document.getElementById("runflat")

这是因为 JavaScript 中的 ID 区分大小写。

顺便说一句，我认为 const rf = $(runflat).val(); 行不起作用。每次它都会简单地将 rf 设置为 "on"。更正确的方法是这样的:

const rf = $("input[id='runflat']:checked").val();

如果选中单选按钮，则将 rf 设置为 “on”；如果未选中，则设置为 undefined。如果您想更改这些值，可以使用 Elvis 运算符:

const rf = $("input[id='runflat']:checked").val() ? "yes" : "no";

现在，如果选中单选按钮，rf 将设置为“yes”，如果未选中，则设置为“no”。

关于javascript - 如何将单选按钮的 true 或 false 输入到 Firebase 数据库中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47702616/

文章推荐： javascript - js获取函数中调用对象的类

文章推荐： azure - 如何获取 Azure Web 应用实例的 IP 地址

文章推荐： MFA 服务器(本地)的 Azure MFA 状态报告

文章推荐： Javascript 序列化 POST

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何将单选按钮的 true 或 false 输入到 Firebase 数据库中？