Размещение данных в Firebase с помощью формы - PullRequest
0 голосов
/ 04 ноября 2018

У меня есть простая форма с вводами:

<body>
    <div class="jumbotron">
    <div class="placeholder"></div>
    </div>
    <div class="container">
            <h2>Add a new Animal</h2>
    <form class="form-group" id="add-animals">
    Species: <input type="text" id="species" class="form-control">
    Name: <input type="text" id="name" class="form-control" >
    Age: <input type="text" id="age" class="form-control">
    Last Fed: <input type="date" id="last-fed" class="form-control">
    Last Shed: <input type="date" id="last-shed" class="form-control">
    Diet: <input type="text" id="diet" class="form-control">
    Basking area temperature: <input type="text" id="basking-area-temperature" class="form-control">
    Cold part temperature: <input type="text" id="cold-temperature" class="form-control">
    Humidity: <input type="text" id="humidity" class="form-control">
    Addition Info: <textarea class="form-control" id="additional-info"></textarea>
    <button id="btnCreate" class="btn btn-primary">Create</button>
    </form>
    <h3>View Current Animals</h3>
    <ol id="animal-list">

    </ol>
    </div>
    </div>
    <script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyBSuC8nqJzLe7d5jKS-_nE15kaI9Y6NIfI",
    authDomain: "repti-care-32176.firebaseapp.com",
    databaseURL: "https://repti-care-32176.firebaseio.com",
    projectId: "repti-care-32176",
    storageBucket: "repti-care-32176.appspot.com",
    messagingSenderId: "632910932105"
  };
  firebase.initializeApp(config);
  const db = firebase.firestore();
  db.settings({ timestampsInSnapshots: true }); 
</script>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>

    <script src="./scripts/main.js"></script>
</body>

И я хочу добавить новые записи в мою базу данных при отправке формы, вот мой js:

const animalList = document.querySelector('#animal-list');
const form = document.querySelector('#add-animals');


function renderAnimals(doc) {
let li = document.createElement('li');
let name = document.createElement('div');
let species = document.createElement('div');
let age = document.createElement('div');
let last_fed = document.createElement('div');
let last_shed = document.createElement('div');
let diet = document.createElement('div');
let basking_area_temp = document.createElement('div');
let cold_part_temp = document.createElement('div');
let humidity = document.createElement('div');
let additional_info = document.createElement('div');

li.setAttribute('data-id', doc.id);
name.textContent = `name: ${doc.data().name}`
species.textContent = `species: ${doc.data().species}`
age.textContent = `age: ${doc.data().age}`
last_fed.textContent = `last fed: ${doc.data().last_fed}`;
last_shed.textContent = `last shed: ${doc.data().last_shed}`;
diet.textContent = `diet: ${doc.data().diet}`;
basking_area_temp.textContent =`basking area temp: ${ doc.data().basking_area_temp}`;
cold_part_temp.textContent =  `cold part temp: ${doc.data().cold_part_temp}`;
humidity.textContent = `humidity: ${doc.data().humidity}`;
additional_info.textContent = `additional info: ${doc.data().additional_info}`;

li.appendChild(species);
li.append(name);
li.append(age);
li.append(last_fed);
li.append(last_shed);
li.append(diet);
li.append(basking_area_temp);
li.append(cold_part_temp);
li.append(humidity);
li.append(additional_info);

animalList.appendChild(li);
}

// getting data from the back end
db.collection('animals').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
    renderAnimals(doc);
  })
})

// adding data
form.addEventListener('submit', (event) => {
    event.preventDefault();
    db.collection('animals').add({
        species: form.species.value,
        name: form.name.value,
        age: form.age.value,
        last_fed: form.last_fed.value,
        last_shed: form.last_shed.value,
        diet: form.diet.value,
        basking_area_temp: form.basking_area_temp.value,
        cold_part_temp: form.cold_part_temp.value,
        humidity: form.humidity.value,
        additional_info: form.additional_info.value

    })
})

В настоящее время, когда я добавляю информацию в поля формы, выдается ошибка:

Невозможно прочитать свойство 'значение' из неопределенного в HTMLFormElement.form.addEventListener (main.js: 58)

почему мое свойство last_fed не определено и как я могу это исправить, чтобы данные публиковались в базе данных? По некоторым причинам возникает проблема только с переменными, которые имеют знак "_", если я их удаляю, все работает нормально

1 Ответ

0 голосов
/ 04 ноября 2018

Вы инициализируете form следующим образом:

const form = document.querySelector('#add-animals');

А затем в обработчике отправки вы делаете:

species: form.species.value

form.species ни на что не указывает. В DOM нет ничего, что позволяло бы вам искать поля в форме по их идентификатору.

Вам нужно будет просмотреть каждое поле из HTML с помощью селектора запросов. Итак, для этой строки:

species: document.querySelector("species").value

Обратите внимание, что проблему такого типа легко устранить, если вы поместили точку останова в код, который выдает ошибку, и установили для нее точку останова. Оттуда вы можете проверить переменную form и увидеть, что у нее нет свойства species.

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