表单提交未显示在 Firebase 中

Question

我正在制作一个 HTML 表单并尝试将结果存储在 firebase 中。这是我的 Firebase 布局的图片：但是，当我提交表单时，条目不会进入 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>请让我知道问题是什么。谢谢

Answer 1

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();

  });