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
formelement. element bind to listen events fires. - we have
inputfirstnameid 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
buttonelement. 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
addpersonproperty oftemplateobject, i.e. referring precisely template defined above. - the event
submit formmeans fires when user submits form. it's not simple button click. can fired either[type=submit]element or pressingreturnkey in form field. - the function bound event has 2 parameters:
eventobject ,templateinstance object. actually, no need use latter.eventobject sufficient 99% time. - we
console.logvalue ofevent.target.firstname.event.targetobject contains elements children of event target. since we're listening form's event, target form,event.targetobject contains form's children. it's possible access form's childrennames, henceevent.target.firstname. - the
valueproperty of particular target child extractsvalueattribute of dom element. input fields have values.event.target.firstname.valueexpression return whatever has been typed field @ moment event has been fired. - and
event.preventdefault()not redirected whatever url definedactionof 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