Почему моя форма отправки не выполняется в моем приложении Meteor?

Question

Я получил этот HTML в моем Метеор приложение:

<template name="addPerson"> 
    . . . 
    <input id="inputbuttonPerson" name="inputbuttonPerson" type="submit" value="Save Person"> 
</template> 

... и этот обработчик события Javascript для отправки формы: кнопка

Template.addPerson.events({'submit form': function(event, template) { 
    alert('reached addPerson.submit form'); 
    console.log('reached addPerson.submit form'); 
    event.preventDefault(); 
    var firstname = template.find('#firstName').value; 
    . . . 

... все же «представить» является не стрельба; Я не вижу ни предупреждения, ни текста консольного журнала, ни записи, добавленной в MongoDB после того, как я заторможу кнопку отправки (inputbuttonPerson).

Почему обработчик событий кнопки отправки шаблона не отвечает на нажатие кнопки отправки?

Answer 1

Предоставленная вам информация недостаточна. Я постараюсь построить всю картину из того, что вы вложили в вопрос.

Давайте представим, что у вас есть шаблон:

<template name="addPerson"> 
    <form action="" class="form" method=""> 
     <input type="text" class="form-control" id="firstName" name="firstName"> 
     <input type="submit" class="btn" id="inputbuttonPerson" name="inputbuttonPerson"> 
    </form> 
</template> 

Важно:

1. Существует на самом деле form элемент. Этот элемент - это то, что вы связываете, чтобы слушать события, которые он запускает.
2. У нас есть input с firstName id, поэтому мы можем обратиться к нему позже.
3. Мы не привязываем какое-либо значение к нему явно, однако его можно связать с реактивным источником данных.
4. Я использую ваш синтаксис, чтобы поместить элемент submit, хотя я лично использовал бы элемент button. Но это не имеет значения.

а затем определяют слушатели событий:

Template.addPerson.events({ 
    'submit form': function (event, template) { 
     console.log('reached addPerson.submit form'); 
     console.log(event.target.firstName.value); 
     event.preventDefault(); 
    } 
}); 

несколько вещей, чтобы принять во внимание:

1. Мы имеем в виду addPerson свойство Template объекта, то есть в виду именно в шаблоне определены выше.
2. Событие submit form, что означает, что оно срабатывает только при отправке пользователем формы. Это не простой щелчок на кнопке. Он может быть запущен либо с помощью элемента [type=submit], либо нажатием клавиши return в любой форме.
3. Функция, связанная с событием, имеет два параметра: event объект и template объект экземпляра. На самом деле, нет необходимости использовать последний. Просто event объект достаточно 99% времени.
4. We console.log значение event.target.firstName. Объект event.target содержит все элементы, являющиеся дочерними объектами события. Поскольку мы слушаем событие формы, целью является форма, поэтому объект event.target содержит дочерние элементы формы. Доступ к детям формы можно получить по их name с, следовательно event.target.firstName.
5. Свойство value данного целевого ребенка извлекает атрибут value элемента DOM. Поля ввода имеют значения. Выражение event.target.firstName.value вернет все, что было введено в поле в момент, когда было запущено событие.
6. И event.preventDefault(), чтобы не перенаправить ни на какой URL-адрес, как action формы.

Эта установка работает отлично. Просмотрите свой код и посмотрите, какой конкретный момент вы пропустили. Вы можете либо скомпоновать элементы в иерархии форм, это то, что я считаю вероятным в соответствии с вашей проблемой.