我的用户表格如下:
<!DOCTYPE html>
<html>
<head>
<title>Firebase Web Basics</title>
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>
<body onload="retrieveUser()">
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">User Details</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="index.html">Home</a> <a class="mdl-navigation__link" href="acess_points.html">Access Points</a> <a class="mdl-navigation__link" href="events.html">Events</a> <a class="mdl-navigation__link" href="holidays.html">Holiday</a> <a class="mdl-navigation__link" href="notification.html">Notifications</a> <a class="mdl-navigation__link" href="organization.html">Organizations</a> <a class="mdl-navigation__link" href="timestamps.html">Time Stamps</a> <a class="mdl-navigation__link" href="users.html">Users</a>
</nav>
</div>
</header>
<div>
<div class="container">
<div class="col-md-5">
<form id="form" name="form">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="uEmail" type="email"> <label class="mdl-textfield__label" for="sample3">Email</label>
</div><br>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="fName" type="text"> <label class="mdl-textfield__label" for="sample3">First Name</label>
</div><br>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="lName" type="text"> <label class="mdl-textfield__label" for="sample3">Last Name</label>
</div><br>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="password" type="password"> <label class="mdl-textfield__label" for="sample3">Password</label>
</div><br>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="tName" type="text"> <label class="mdl-textfield__label" for="sample3">Team Name</label>
</div><br>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="sample3">SSID</label><br>
<select id="ssId" multiple>
</select>
</div><br>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="sample3">Organization Id</label><br>
<select id="org_id">
</select>
</div><br>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="submitButton" onclick="submitClickUser()" type="submit" value="Submit">Submit</button>
</form>
</div>
<div class="col-md-7">
<table class="mdl-data-table mdl-js-data-table">
<thead>
<tr>
<th>User Id</th>
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Password</th>
<th>Team Name</th>
<th>SSID</th>
<th>BSSID</th>
</tr>
</thead>
<tbody id="table_body"></tbody>
</table>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/3.7.0/firebase.js">
</script>
<script>
// Initialize Firebase
var config = {
apiKey: "*********",
authDomain: "**************",
databaseURL: "***************",
storageBucket: "**************",
messagingSenderId: "************"
};
firebase.initializeApp(config);
</script>
<script src="user.js" type="text/javascript">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
</script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js">
</script>
</body>
</html>
user.js
这样的文件:
//User Details
var userEmail = document.getElementById("uEmail");
var firstName = document.getElementById("fName");
var lastName = document.getElementById("lName");
var passwd = document.getElementById("password");
var teamName = document.getElementById("tName");
var organization_id = document.getElementById("org_id");
var submitButton = document.getElementById("submitButton");
function submitClickUser() {
// user info to firebase
var uEmail = userEmail.value;
var fName = firstName.value;
var lName = lastName.value;
var password = passwd.value;
var tName = teamName.value;
var firebaseRef = firebase.database().ref().child("users");
var newPostRef = firebaseRef.push();
newPostRef.set({
Email: uEmail,
FirstName: fName,
LastName: lName,
Password: password,
TeamName: tName
});
var key = newPostRef.key;
var ss_id = document.getElementById("ssId");
for (var i = 0; i < ss_id.options.length; i++) {
if (ss_id.options[i].selected == true) {
var query = firebase.database().ref('/access_points').orderByChild('SSID').equalTo(ss_id.options[i].value);
alert(ss_id.options[i].value);
query.on('value', data => {
alert(query);
data.forEach(userSnapshot => {
var user = userSnapshot.val();
var key1 = userSnapshot.key;
var firebaseRef2 = firebase.database().ref().child("users/" + key).child("AccessPoint").child(key1).set({
SSID: user.SSID,
BSSID: user.BSSID
});
alert("Values inserted");
});
});
}
}
// organization input
var value = organization_id.value;
var query = firebase.database().ref('/organization').orderByChild('OrganizationName').equalTo(value);
query.on('value', data => {
data.forEach(userSnapshot => {
var key1 = userSnapshot.key;
var firebaseRef2 = firebase.database().ref().child("users/" + key).child("OrganizationId").set(key1);
alert("Values inserted");
});
});
}
// Retrieve multiple user
function retrieveUser() {
// collecting keys in an array for users
var rootRef2 = firebase.database().ref().child("access_points");
var keys1 = [];
rootRef2.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.val();
keys1.push(childKey.SSID);
});
var i;
for (i = 0; i < keys1.length; i++) {
$("#ssId").append("<option>" + keys1[i] + "</option>");
}
});
// collecting keys in an array for organization
var rootRef3 = firebase.database().ref().child("organization");
var keys2 = [];
rootRef3.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.val();
keys2.push(childKey.OrganizationName);
});
var i;
for (i = 0; i < keys2.length; i++) {
$("#org_id").append("<option>" + keys2[i] + "</option>");
}
});
}
问题是当我为SSID输入多个select时,表单将所有数据放在firebase中但是当我只选择多个选项时,选择函数SubmitClickUser()中的firebase查询停止工作。它与javascript有关,我意外地在电子邮件字段中输入了名称,因此在给出电子邮件验证错误时,查询适用于单个选择。 有人可以弄清楚什么是错的?