我正在尝试使用firebase数据库来存储表单提交的信息。我在一个页面上工作（提交到firebase）但以下代码抛出错误：Uncaught TypeError: $(...).dialog is not a function并且不提交到数据库。我试过切换javascripts的顺序，但它没有帮助。我已经尝试将代码修改为更像是有效的页面，但它不起作用。
<?php
$tireWidths = array("6.4", "7", "7.5", "8", "8.75", "9.5", "24", "25", "26", "27", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "42", "70", "80", "90", "100", "110", "120", "130", "140", "145", "150", "155", "160", "165", "170", "175", "180", "185", "190", "195", "200", "205", "210", "215", "220", "225", "230", "235", "240", "245", "250", "255", "260", "265", "270", "275", "280", "285", "290", "295", "300", "305", "315", "325", "335", "345", "355", "375" );
$width100s = array("145", "155", "165", "175", "185", "195");
$width200s = array("205", "215", "225", "235", "245", "255", "265", "275", "285", "295");
$width300s = array("305", "315", "325", "335", "345", "355", "375");
$aspects = array("7.5", "8", "8.5", "9.5", "10.5", "11.5", "12.5", "13.5", "14", "14.5", "15.5", "16.5", "18.5", "20", "25", "30", "35", "40", "45", "50", "55", "60", "64", "65", "68", "70", "75", "80", "85", "90", "95");
$aspectsTop = array("7.5", "8", "8.5", "9.5", "10.5", "11.5", "12.5", "13.5", "14", "14.5", "15.5", "16.5", "18.5");
$aspectsBottom = array( "20", "25", "30", "35", "40", "45", "50", "55", "60", "64", "65", "68", "70", "75", "80", "85", "90", "95");
$rimDiameter = array("8", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33","34");
$rimDiaTop = array("8", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20");
$rimDiaBottom = array("21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34");
$manufacturers = array("Atlas", "Avon", "BFGoodRich", "Bridgestone", "Continental", "Cooper", "Dayton", "Dunlop", "Faiken", "Firestone", "Fuzion", "GT Radial", "General Tire", "Gladiator", "Geostar", "Hankook", "Hercules", "Hoosier", "Kumho", "LTR", "Landsail", "Lee", "Mastercraft", "Maxxis", "Medalist", "Michelin", "Mickey Thompson", "Milestar", "Minos", "Monarch", "Nanakang", "Nexen", "Nitto", "Paccmark", "Pathfinder", "Pirelli", "Primewell", "Remington", "Riken", "Roadmaster", "Sailun", "Sigma", "Sumittomo", "Summit", "Toyo", "Uniroyal", "Vanderbilt", "Vitour", "Vogue", "Vortex", "Vredestein", "Wanli", "Westlake", "Windforce", "Yokohama", "Zenna");
$manufacturersOne = array("Atlas", "Avon", "BFGoodRich", "Bridgestone", "Continental", "Cooper", "Dayton", "Dunlop", "Faiken");
$manufacturersTwo = array("Firestone", "Fuzion", "GT Radial", "General Tire", "Gladiator", "Geostar", "Hankook", "Hercules");
$manufacturersThree = array("Hoosier", "Kumho", "LTR", "Landsail", "Lee", "Mastercraft", "Maxxis", "Medalist", "Michelin", "Mickey Thompson");
$manufacturersFour = array("Milestar", "Minos", "Monarch", "Nanakang", "Nexen", "Nitto", "Paccmark", "Pathfinder", "Pirelli", "Primewell");
$manufacturersFive = array("Remington", "Riken", "Roadmaster", "Sailun", "Sigma", "Sumittomo", "Summit", "Toyo", "Uniroyal");
$manufacturersSix = array("Vitour", "Vogue", "Vortex", "Vredestein", "Wanli", "Westlake", "Windforce", "Yokohama", "Zenna");
?>
<div class="container">
<header>
<a href="/">
<div class="d-inline"><img src=""></div>
<h1 class="d-inline">Cheapest Used Tires</h1>
</a>
</header>
<nav class="navbar navbar-default navbar-toggleable-md navbar-expand-lg navbar-inverse bg-inverse justify-content-between">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav content-justify-center">
<a class="nav-item nav-link" href="/tire-dealers.php">Tire Dealers</a>
<a class="nav-item nav-link" href="/why-used.php">Why Used?</a>
<a class="nav-item nav-link" href="/tire-knowledge.php">Tire Knowledge</a>
<a class="nav-item nav-link" href="/tire-products.php">Tire Products</a>
<a class="nav-item nav-link" href="/contact-us.php">Contact Us</a>
</div>
</div>
</nav>
<div class="main-content small-margin small-padding">
<h1>Add A Tire</h1>
<form method="post">
<div id="width" class="full-width bottom-border">
<h3 class="td-underline">Width</h3>
<select required class="d-inline width-10" name="tire-width" id="tire-width">
<option value="">---</option>
<?php
foreach ($tireWidths as $width) {
?>
<option value="<?php echo $width;?>"><?php echo $width;?></option>
<?php }
?>
</select>
<div id="width-100s" class=" d-inline width-90 justify-content">
<?php foreach ($width100s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
<div id="width-200s d-block justify-content">
<?php
foreach ($width200s as $width){ ?>
<z data-role="button" data-val="<?php echo $width;?>" class="width-sm"><?php echo $width?></z>
<?php } ?>
</div>
<div id="width-300s d-block justify-content">
<?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 id="aspect" class="full-width bottom-border">
<h3 class="td-underline">Aspect</h3>
<select required class="d-inline width-10" name="tire-aspect" id="tire-aspect">
<option value="">---</option>
<?php
foreach ($aspects as $aspect) {
?>
<option value="<?php echo $aspect;?>"><?php echo $aspect;?></option>
<?php }
?>
</select>
<div id="tens-teens" class="d-inline-block width-90">
<?php foreach ($aspectsTop as $a){ ?>
<z data-role="button" data-val="<?php echo $a;?>" class="aspectVal"><?php echo $a;?></z>
<?php } ?>
</div>
<div id="twenty-plus" class="d-inline-block width-90">
<?php foreach ($aspectsBottom as $a){ ?>
<z data-role="button" data-val="<?php echo $a;?>" class="aspectVal"><?php echo $a;?></z>
<?php } ?>
</div>
</div>
<div id="rim-diameter" class="full-width bottom-border">
<h3 class="td-underline">Rim Diameter</h3>
<select id="tire-rim" name="tire-rim" class="width-10">
<option value="">---</option>
<?php foreach ($rimDiameter as $rim){ ?>
<option value="<?php echo $rim;?>"><?php echo $rim;?></option>
<?php } ?>
</select>
<div id="tens-teens" class="d-inline width-90">
<?php foreach ($rimDiaTop as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="rimVal"><?php echo $r;?></z>
<?php }?>
</div>
<div id="tens-teens" class="d-inline width-90">
<?php foreach ($rimDiaBottom as $r) { ?>
<z data-role="button" data-val="<?php echo $r;?>" class="rimVal"><?php echo $r;?></z>
<?php }?>
</div>
</div>
<div id="manufacturer" class="full-width bottom-border">
<h3 class="td-underline">Manufacturer</h3>
<select class="width-10 d-inline" name="tire-manufacturer" id="tire-manufacturer">
<option value="">---</option>
<?php foreach ($manufacturers as $m) { ?>
<option value="<?php echo $m;?>"><?php echo $m;?></option>
<?php } ?>
</select>
<div id="easy-manufacturers" class="width-90 d-inline" name="tire-manufacturer" id="tire-manufacturer">
<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>
<div id="model" class="bottom-border">
<h3 class="td-underline">Model</h3>
<select class="disabled" name="tire-model" id="tire-model">
</select>
</div>
<div id="trim" class="bottom-border">
<h3 class="td-underline">Trim</h3>
<select class="disabled" name="tire-trim" id="tire-trim">
</select>
</div>
<div id="pix" class="bottom-border">
<h3 class="td-underline">Tire Pictures</h3>
<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>
</div>
<div style="position: relative;">
<div id="run-flat" class="bottom-border width-25">
<h3 class="td-underline">Run Flat</h3>
<radio name="tire-run-flat" id="tire-run-flat">
</div>
<div id="tread-depth" class="width-25 bottom-border">
<!-- make clicking inputs the selections into the "tread-depth" variable to be submitted in the form-->
<h3 class="td-underline">Tread Depth</h3>
<input type="text" id="tread-depth" name="tread-depth">
<div id="whole-num" class="full-width">
<div id="ten-tread" class="justify-content">
<z data-role="button" data-val="1" class="treadDepth">1</z>
<z data-role="button" data-val="2" class="treadDepth">2</z>
<z data-role="button" data-val="3" class="treadDepth">3</z>
<z data-role="button" data-val="4" class="treadDepth">4</z>
<z data-role="button" data-val="5" class="treadDepth">5</z>
<z data-role="button" data-val="6" class="treadDepth">6</z>
<z data-role="button" data-val="7" class="treadDepth">7</z>
<z data-role="button" data-val="8" class="treadDepth">8</z>
<z data-role="button" data-val="9" class="treadDepth">9</z>
<z data-role="button" data-val="10" class="treadDepth">10</z>
</div>
<div id="teens-tread">
<z data-role="button" data-val="11" class="treadDepth">11</z>
<z data-role="button" data-val="12" class="treadDepth">12</z>
<z data-role="button" data-val="13" class="treadDepth">13</z>
<z data-role="button" data-val="14" class="treadDepth">14</z>
<z data-role="button" data-val="15" class="treadDepth">15</z>
<z data-role="button" data-val="16" class="treadDepth">16</z>
<z data-role="button" data-val="17" class="treadDepth">17</z>
<z data-role="button" data-val="18" class="treadDepth">18</z>
<z data-role="button" data-val="19" class="treadDepth">19</z>
<z data-role="button" data-val="20" class="treadDepth">20</z>
</div>
</div>
<div id="decimal-num" class="">
<z data-role="button" data-val=".25" class="treadDepthDec">.25</z>
<z data-role="button" data-val=".5" class="treadDepthDec">.5</z>
<z data-role="button" data-val=".75" class="treadDepthDec">.75</z>
</div>
</div>
<div id="dot-date" class="width-25 bottom-border"> <!--FIND REGEXP TO HAVE ONLY ONE DIGIT BETWEEN 0-9, create function to append the four numbers together-->
<h3 class="td-underline">Dot Date</h3>
<input type="text" pattern="" id="week-one">
<input type="text" pattern="" id="week-two">
<input type="text" pattern="" id="year-one">
<input type="text" pattern="" id="year-two">
</div>
<div id="patches" class="width-25 bottom-border"> <!-- radio group, 0-4-->
<h3 class="td-underline">Number of Patches</h3>
</div>
</div>
<div id="ship-weight" class="bottom-border">
<h3 class="td-underline">Shipping Weight</h3>
<input name="tire-ship-weight" id="tire-ship-weight">
</div>
<div id="prices" class="bottom-border">
<div id="retail" class="bottom-border">
<div id="retail-price" class="border width-7 d-inline">
<!--wants checkboxes on the "price" boxes,
if retail is unchecked alert "You have deselected the retail section, this tire will not be listed on CheapestUsedTires. Please click okay to continue."
if checked, require price. if uncheck, do not require -->
<label for="retail-price-input" class="td-underline d-inline">Retail Price</label><br>
<input id="retail-price-input" name="retail-price" class="d-inline" type="text" pattern="">
<!-- insert small q mark that shows a pop up with an explanation -->
</div>
<div class="cut-comm width-7 d-inline">
C.U.T. Commission<br>
- $4.99
</div>
<div class="cc-fee width-7 d-inline">
- 3% Credit Card Fee
</div>
<div id="no-bb" class="width-7 d-inline">
N/A
</div>
<div id="retail-shipping" class="width-7 d-inline">
- $<?php echo $retailShipCost; ?>
</div>
<div id="retail-payout" class="width-7 d-inline">
= $<?php echo $retailPayOut; ?>
</div>
<div id="not-retail" class="width-7 d-inline">
Do not list this tire on Cheapest Used Tires.
<input type="checkbox">
</div>
</div>
<div id="wholesale">
<div id="wholesale-price" class="width-7 d-inline">
<label for="wholesale-price-input" class="td-underline">Wholesale Price</label>
<input id="wholesale-price-input">
</div>
<div class="cut-comm width-7 d-inline" style="width: 14.2%;">
- $4.99 (C.U.T. Commission)
</div>
<div class="cc-fee width-7">
- 3% Credit Card Fee
</div>
<div id="buyer-bucks" class="width-7 d-inline">
- $3.00 Buyer Bucks
</div>
<div id="wholesale-shipping" class="width-7 d-inline">
- $<?php echo $wholesaleShipCost; ?>
</div>
<div id="wholesale-payout" class="width-7 d-inline">
= $<?php echo $wholsalePayOut; ?>
</div>
<div id="wholesale-only" class="width-7 d-inline">
Wholesale Only
<input type="checkbox" name="wholesale-only" id="wholesale-only">
</div>
</div>
</div>
<button type="button" id="submitBtn" onclick="submitClick()">Click Me!</button>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Include Firebase Library -->
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script src="/OldFile.js"></script>
<?php include $_SERVER['DOCUMENT_ROOT'] . "../inc/footer.php";?>
JAVASCRIPT
// file: script.js
$(document).ready(function(){
//initialize the firebase app
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);
var submitBtn = document.getElementById("submitBtn");
var tireWidth = document.getElementById("tire-width");
var tireAspect = document.getElementById("tire-aspect");
var tireRim = document.getElementById("tire-rim");
var tireManufacturer = document.getElementById("tire-manufacturer");
var treadDepth = document.getElementById("tread-depth");
var treadDepthDec = 0;
$('.width-sm').click(function(){
$('#tire-width').val($(this).data('val')).trigger('change');
})
$('.aspectVal').click(function(){
$('#tire-aspect').val($(this).data('val')).trigger('change');
})
$('.rimVal').click(function(){
$('#tire-rim').val($(this).data('val')).trigger('change');
})
$('.manVal').click(function(){
$('#tire-manufacturer').val($(this).data('val')).trigger('change');
})
//TRY TO GET THIS TO FILL IN INPUT TYPE TEXT//
//$('.treadDepth').click(function(){
// $('#tread-depth').change($(this).data('val'));
//})
//$('.treadDepthDec').click(function(){
// $('treadDepthDec').val($(this).data('val')).trigger('change');
//})
function submitClick(){
var tireInput = firebase.database().ref('NewTire');
var tireWidthVal = tireWidth.value;
var tireAspectVal = tireAspect.value;
var tireRimVal = tireRim.value;
var tireManVal= tireManufacturer.value;
//var treadVal = treadDepth.value + treadDepthDec.value;
//This is for replacing a value instead of adding to DB.
//firebaseRef.child("Tire Width").set(tireWidthVal);
function saveInput(tireWidthVal, tireAspectVal){
var newTireInput = tireInput.push();
newTireInput.set({
tireWidthVal: tireWidthVal,
tireAspectVal: tireAspectVal,
tireRimVal: tireRimVal,
tireManVal: tireManVal,
//treadVal: treadVal
});
}
saveInput(tireWidthVal, tireAspectVal, tireRimVal, tireManVal);
}
//Tire pics logic
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;
}
}
})