Как через форму передать данные в firebase?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-firestore.js"></script>

<script>
  // Ваш код конфигурации Firebase
  var firebaseConfig = {
    apiKey: "Ваш apiKey",
    authDomain: "Ваш authDomain",
    projectId: "Ваш projectId",
    storageBucket: "Ваш storageBucket",
    messagingSenderId: "Ваш messagingSenderId",
    appId: "Ваш appId"
  };

  // Инициализация Firebase
  firebase.initializeApp(firebaseConfig);

  // Получение ссылки на Firestore
  var db = firebase.firestore();
</script>

1
2
3
4
5

<form id="myForm">
  <input type="text" id="name" placeholder="Имя"><br>
  <input type="email" id="email" placeholder="Email"><br>
  <button type="submit">Отправить</button>
</form>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<script>
  // Функция для отправки данных в Firebase
  function sendData() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;

    // Запись данных в Firestore
    db.collection("users").add({
      name: name,
      email: email
    })
    .then(function(docRef) {
        console.log("Документ успешно записан с идентификатором: ", docRef.id);
    })
    .catch(function(error) {
        console.error("Ошибка записи документа: ", error);
    });

    // Сброс значений формы
    document.getElementById("myForm").reset();
  }

  // Добавление обработчика события для отправки данных при отправке формы
  document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // предотвращает обычное поведение формы (перезагрузку страницы)
    sendData(); // отправка данных в Firebase
  });
</script>