javascript - Why is my submit form not being executed in my Meteor app? -
i've got html in meteor app:
<template name="addperson"> . . . <input id="inputbuttonperson" name="inputbuttonperson" type="submit" value="save person"> </template>
...and javascript event handler form submit:
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; . . .
...yet "submit" button not firing; see no alert, nor console log text, nor there record added mongodb after mash submit button (inputbuttonperson).
why doesn't template's submit button event handler respond clicking of submit button?
the information provided not sufficient. i'll try construct whole picture out of put question.
let's pretend have template:
<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>
important:
- there
form
element. element bind to listen events fires. - we have
input
firstname
id can refer later. - we don't bind value explicitly, however, it's possible bind reactive data source.
- i use syntax put submit element, although, use
button
element. doesn't matter.
and define event listeners:
template.addperson.events({ 'submit form': function (event, template) { console.log('reached addperson.submit form'); console.log(event.target.firstname.value); event.preventdefault(); } });
few more things take account:
- we refer
addperson
property oftemplate
object, i.e. referring precisely template defined above. - the event
submit form
means fires when user submits form. it's not simple button click. can fired either[type=submit]
element or pressingreturn
key in form field. - the function bound event has 2 parameters:
event
object ,template
instance object. actually, no need use latter.event
object sufficient 99% time. - we
console.log
value ofevent.target.firstname
.event.target
object contains elements children of event target. since we're listening form's event, target form,event.target
object contains form's children. it's possible access form's childrenname
s, henceevent.target.firstname
. - the
value
property of particular target child extractsvalue
attribute of dom element. input fields have values.event.target.firstname.value
expression return whatever has been typed field @ moment event has been fired. - and
event.preventdefault()
not redirected whatever url definedaction
of form.
this setup works perfectly. please code , see particular point have missed out. either misplace elements in form hierarchy, feel according problem you're having.
Comments
Post a Comment