表单提交未显示在 Firebase 中

我正在制作一个 HTML 表单并尝试将结果存储在 firebase 中。这是我的 Firebase 布局的图片:

https://img3.mukewang.com/6508188d0001885e05400200.jpg

但是,当我提交表单时,条目不会进入 Firebase,我不知道为什么。这是我的 HTML 代码index.html:


<section id="input" class="section-padding wow fadeInUp delay-05s">

      <div class="container">

        <div class="row">

          <div class="col-md-12 text-center">

            <h2 class="service-title pad-bt15">Add a Marker</h2>

            <p class="sub-title pad-bt15">If you are in need of assistance, fill out the details below, and a marker will be<br>placed on the map for others to view and respond to.</p>

            <hr class="bottom-line">

          </div>

        </div>

      </div>

      <div class="contact-form">

        <div id="sendmessage">Your message has been sent. Thank you!</div>

        <div id="errormessage"></div>

        <form id="markerForm" method="post" role="form" class="contactForm">

          <div class="col-md-3"></div>

          <div class="col-md-3">

            <div class="form-group">

              <input type="text" name="name" class="form-control" id="name" placeholder="Your Name"  /> 

              <div class="validation"></div>

            </div>

          </div>

          <div class="col-md-3">

            <div class="form-group">

              <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" />

              <div class="validation"></div>

            </div>

          </div>

          <div class="col-md-6 col-md-offset-3">

            <div class="form-group">

              <input type="text" class="form-control" name="address" id="address" placeholder="Address"  />

              <div class="validation"></div>

            </div>

          </div>


请让我知道问题是什么。谢谢


蓝山帝景
浏览 49回答 1
1回答

慕尼黑5688855

submit通过为按钮分配类型,您的表单将在push()触发 Firebase 方法之前提交。将类型更改为button并将click事件附加到此按钮,如下所示,应该可以解决问题:超文本标记语言<form id="markerForm" method="post" role="form" class="contactForm">    //...         <center><button id="formbutton" type="button" class="btn btn-primary btn-submit">SUBMIT</button></center>      </div></form>JS(索引.js)var config = { // 我的配置详细信息 };firebase.initializeApp(config);var ref = firebase.database().ref("markers");  var submit = function () {    var name = $("#name").val();    var email = $("#email").val();    var address = $("#address").val();    var subject = $("#subject").val();    var message = $("#message").val();    ref.push({      "name": name,      "email": email,      "address": address,      "subject": subject,      "message": message    })    .then(function(ref) {      console.log(ref.parent + "/" + ref.key);    })    .catch(function(error) {      console.log(error);    })  };  $("#formbutton").click(function() {    submit();  });
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5