使用JavaScript向Cloud Firestore提交表单数据

Question

晚上好火鸡社区！希望您过得愉快！我正在为非营利组织建立一个网站，并希望获得一些帮助。我正在使用firebase托管服务页面上有一个表单，并希望使用JavaScript将表单数据提交给Firestore。当我单击“提交”按钮时，浏览器控制台显示其捕获了用户的输入，但并未将其发送到Firestore数据库。有人可以把我指向正确的道路吗？将不胜感激。以下是我到目前为止所拥有的：

firebase.js

import {
    initializeApp
} from "firebase/app";
import {
    getAnalytics
} from "firebase/analytics";
import {
    getFirestore,
    collection,
    getDocs
} from "firebase/firestore";


// TODO: Add SDKs for Firebase products that you want to use

// https://firebase.google.com/docs/web/setup#available-libraries


// Your web app's Firebase configuration

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {

    apiKey: "***********",

    authDomain: "***********",

    projectId: "***********",

    storageBucket: "***********",

    messagingSenderId: "***********",

    appId: "***********",

    measurementId: "***********"

};


// Initialize Firebase

const app = initializeApp(firebaseConfig);

// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(app);


const analytics = getAnalytics(app);

partnerscripts.js

import {
    collection,
    addDoc
} from "firebase/firestore";

//Get Form Values
const prefix = document.getElementById('prefixes').value
const firstName = document.getElementById('givenName').value
const lastName = document.getElementById('surName').value
const title = document.getElementById('title').value
const organization = document.getElementById('organization').value
const website = document.getElementById('website').value
const email = document.getElementById('email').value
const phone = document.getElementById('areaCode').value + '-' + document.getElementById('lead3') + '-' + document.getElementById('last4')
const interests = `${document.getElementById('selectAll').value}\n${document.getElementById('bolPantry').value}\n${document.getElementById('FeedMySheep').value}\n${document.getElementById('GiftedShop').value}\n${document.getElementById('GoodNews').value}\n${document.getElementById('KingdomsFlock').value}\n${document.getElementById('OutdooBazaar').value}`

const description = document.getElementById('description')

const submitButton = document.getElementById('submit')

submitButton.addEventListener("click", (e) => {
    try {
    const docRef = await addDoc(collection(db, "partnerRequests"), {
        prefix: prefix,
        FirstName: firstName,
        LastName: lastName,
        Title: title,
        Organization: organization,
        Website: website,
        Email: email,
        PhoneNumber: phone,
        Interests: interests,
        TellUsWhy: description

    });
    console.log("Document written with ID: ", docRef.id);
    } catch (e) {
    console.error("Error adding document: ", e);
    }
})

合作伙伴.html

<form id="partnerForm" autocomplete="on">
    <div class="w3-row w3-padding-large" id="row1">
    <div class="w3-container w3-quarter">
        <label for="prefix">Prefix:</label><br>
        <select class="w3-white" id="prefixes" name="prefix">
        <option value="not-selected"></option>
        <option value="mr">Mr.</option>
        <option value="mrs_and_ms">Mrs. / Ms.</option>
        </select>
    </div>
    <div class="w3-container  w3-quarter">
        <label for="givenName">First Name:</label>
        <input class="w3-white" style="max-width: 100%;" type="text" id="givenName"    name="gname" required>
    </div>
    <div class="w3-container w3-content w3-quarter">
        <label for="surName">Last Name:</label>
        <input class="w3-white" style="max-width: 100%;" type="text" id="surName" name="sname" required>
    </div>
    <div class="w3-container w3-quarter">
        <label for="Title">Title:</label>
        <input class="w3-white" style="max-width: 100%;" type="text" id="title" name="title">
    </div>
    </div>


    <div class="w3-row w3-padding-large" id="row3">
    <div class="w3-container w3-cell w3-left-align w3-half w3-mobile">
        <h2>Areas of Interest</h2>
        <input type="checkbox" id="selectAll" name="interests" value="all">
        <label for="selectAll">All Aspects of C.O.M.E.</label><br><br>
        <input type="checkbox" id="bolPantry" name="interests" value="bolPantry">
        <label for="bolPantry">Bread of Life Pantry</label><br><br>
        <input type="checkbox" id="FeedMySheep" name="interests" value="FeedMySheep">
        <label for="FeedMySheep">Feed My Sheep</label><br><br>
        <input type="checkbox" id="GiftedShop" name="interests" value="GiftedShop">
        <label for="GiftedShop">Gifted Shop</label><br><br>
        <input type="checkbox" id="GoodNews" name="interests" value="GoodNewsGiveaway">
        <label for="GoodNewsGiveaway">Good News Giveaway</label><br><br>
        <input type="checkbox" id="KingdomsFlock" name="interests" value="KingdomsFlock">
        <label for="KingdomsFlock">Kingdom's Flock</label><br><br>
        <input type="checkbox" id="OutdoorBazaar" name="interests" value="OutdoorBazaar">
        <label for="OutdoorBazaar">Outdoor Bazaar</label><br>

    </div>
    <div class="w3-container w3-cell w3-half w3-mobile">
        <p>Please describe your proposed partnership below.<br>Please include what <em>you and/or your organization</em>
        <br>(are/is) hoping to gain from our partnership,<br> what you are able to contribute, <br> how our missions and goals are aligned, <br> and any other details that will aid in getting to know you.
        </p>

        <textarea class="w3-white w3-col" style="height:200px; align-content:left;" cols="100" id="description" name="tellUsWhy" wrap="hard" required></textarea>
    </div>
    </div>
    <input class="w3-btn submit form w3-white w3-border we-border-black w3-round-xxlarge w3-hover-deep-purple" id="submit" type="submit" value="Submit">
</form>
<script src="firebase.js"></script>
<script src="partnerScripts.js"></script>