Форма отправки не отображается в Firebase - PullRequest
Новая
       1

Форма отправки не отображается в Firebase

1 голос
/ 18 марта 2020

Я делаю HTML форму и пытаюсь сохранить результаты в базе данных. Вот изображение моего макета Firebase: enter image description here

Однако, когда я отправляю форму, записи не go попадают в 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>
          <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" />
              <div class="validation"></div>
            </div>
          </div>
          <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
              <textarea class="form-control" id="message" name="message" rows="5" placeholder="Message"></textarea>
              <div class="validation"></div>
            </div>
            <center><button id="formbutton" type="submit" class="btn btn-primary btn-submit">SUBMIT</button></center>
          </div>
        </form>
      </div>
    </section>

Обратите внимание, что в теге <head> в файле HTML я называю это: 

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

И в самом начале <body> я называю это: 

 <script src="index.js"></script>

А вот мой JS код в индексе. js: 

var config = {
    // my config details
  };

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

  $(window).load(function () {
    $("#markerForm").submit(submit);
  });

Пожалуйста, дайте мне знаю в чем проблема. спасибо

1 Ответ

3 голосов
/ 19 марта 2020

При назначении типа submit вашей кнопке ваша форма отправляется до запуска метода Firebase push().

Изменение типа на button и присоединение к нему события click Кнопка, как следует, должна сделать трюк:

HTML

<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 (index. 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();
  });

Подробнее о типах кнопок см. в спецификации W3 .

Также не забудьте обернуть jquery код в $( document ).ready(), см. https://learn.jquery.com/using-jquery-core/document-ready/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...