javascript - 我的表格未提交到Firebase Firestore(My form is not being submitted to firebase firestore)

Question

I intend on using firebase firestore as a backend service to store data, authenticate users and hide content from users that aren't signed in. From tutorials I was watching and using, I was able to connect my site to firebase, and after the codes I had written, the form on the page supposed to submit to firestore but then I get no response and no error message also, I don't know what to do.(我打算将Firebase Firestore用作后端服务来存储数据，验证用户并向未登录的用户隐藏内容。从我正在观看和使用的教程中，我能够将我的网站连接到Firebase，并在编码之后我已经写好了页面上的表单应该提交给Firestore，但是后来我没有回应，也没有错误消息，我不知道该怎么办。)

I've checked for solutions to my particular issue but I haven't seen any so far.(我已经检查过解决特定问题的方法，但到目前为止还没有看到。) This is the form(这是表格) <form id="signup-form" class="form form-horizontal"> <!-- Investment Plan Info Modal --> <div class="modal fade" id="planInfoModal_starter" tabindex="-1" role="dialog" aria-labelledby="planInfoModal_starterLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <!-- modal header --> <div class="modal-header text-center"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button> <h4 class="modal-title" id="planInfoModal_starterLabel"> <font color=""> STARTER ACCOUNT </font> </h4> </div> <!-- modal body --> <div class="modal-body" style="font-size:15px; line-height:20px;"> <div class="" style="margin-bottom:;"> <div class=" "> <div class=" "> <div style="min-height:;" class=""> <div class="plan_item"> <i class="fa fa-circle-o"></i> Minimum Investment: $500 </div> <div class="plan_item"> <i class="fa fa-circle-o"></i> Maximum Investment: $9999 </div> <div class="plan_item"> <i class="fa fa-circle-o"></i> On Weekly ROI Model: 200% weekly </div> <div class="plan_item"> <i class="fa fa-circle-o"></i> On Compounding ROI Model: 400% weekly </div> <div class="plan_item"> <i class="fa fa-circle-o"></i> Referral Commission: 5% on referred users' first deposits and 1.5% on subsequents. </div> </div> <br> </div> </div> </div> </div> <!-- modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /. this modal ends--> <div class="modal fade" id="planInfoModal_basic" tabindex="-1" role="dialog" aria-labelledby="planInfoModal_basicLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <!-- modal header --> <div class="modal-header text-center"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times; </button> <h4 class="modal-title" id="planInfoModal_basicLabel"> <font color=""> BASIC ACCOUNT </font> </h4> </div> <!-- modal body --> <div class="modal-body" style="font-size:15px; line-height:20px;"> <div class="" style="margin-bottom:;"> <div class=" "> <div class=" "> <div style="min-height:;" class=""> <div class="plan_item"> <i class="fa fa-circle-o"></i> Minimum Investment: $10,000 </div> <div class="plan_item"> <i class="fa fa-circle-o"></i> Maximum Investment: $99,999 </div> <div class="plan_item"> <i class="fa fa-circle-o"></i> On Weekly ROI Model: 300% weekly </div> <div class="plan_item"> <i class="fa fa-circle-o"></i> On Compounding ROI Model: 500% weekly </div> <div class="plan_item"> <i class="fa fa-circle-o"></i> Referral Commission:5% on referred users' first deposits and 1.5% on subsequents</div> </div> <br> </div> </div> </div> </div> <!-- modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /. this modal ends--> <input type="hidden" name="investment_plan" value="basic"> <input type="hidden" name="investment_planID" value="2"> <input type="hidden" name="min_capital" value="10000"> <input type="hidden" name="max_capital" value="72000"> <div class="form-group"> <div class="col-sm-2"></div> <div class="col-sm-8"> <h4> Chosen Investment Plan: <a href="javascript:void(0)" class="btn btn-warning" style="text-align: center; background:; color: #fff; padding: 10px; font-size:120%; margin-bottom:20px;" data-toggle="modal" data-target="#planInfoModal_basic"> BASIC ACCOUNT </a> &nbsp; &nbsp; &nbsp; &nbsp; <a href="....signup.html">Change Plan?</a> </h4> </div> </div>

Answer 1

You're on the right path, you just need to call firestore's .add() method and pass an object representing your form data as a parameter(您所走的路是正确的，您只需要调用firestore的.add()方法并传递一个表示表单数据的对象作为参数即可)

Update your event listener with the following:(使用以下更新您的事件侦听器：) //Signup const signupForm = document.querySelector("#signup-form"); signupForm.addEventListener("submit", e => { e.preventDefault(); // feel free to change the object keys to match your data model db.add({ investment_capital: signupForm["invest-capital"].value, roi_model: signupForm["ROI-modl"].value, investment_funding_medium: signupForm["depost-id"].value, firstname: signupForm["first-name"].value, othernames: signupForm["other-names"].value, country: signupForm["country"].value, city: signupForm["city"].value, email: signupForm["email"].value, phone: signupForm["phone"].value, password: signupForm["password"].value, retypepassword: signupForm["retypepassword"].value, referreremail: signupForm["referreremail"].value }) .then(function(docRef) { // data was added successfully console.log("Document written with ID: ", docRef.id); }) .catch(function(error) { // an error occurred when adding the data console.error("Error adding document: ", error); }); }); See the docs for additional detail(请参阅文档以获取更多详细信息)