title: How to trigger a function with a input button click
body: <p>I am wondering how to have my input fields submit their data after a input button is clicked, I currently have it setup so that it works when you type enter.</p>
  
  <p><strong>js</strong></p>
  
  <pre><code>Messages = new Meteor.Collection('messages');
  
  if (Meteor.is_client){
  
     ////////// Helpers for in-place editing //////////
  
    // Returns an event_map key for attaching "ok/cancel" events to
    // a text input (given by selector)
    var okcancel_events = function (selector) {
      return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
    };
  
    // Creates an event handler for interpreting "escape", "return", and "blur"
    // on a text field and calling "ok" or "cancel" callbacks.
    var make_okcancel_handler = function (options) {
      var ok = options.ok || function () {};
      var cancel = options.cancel || function () {};
  
      return function (evt) {
        if (evt.type === "keydown" &amp;&amp; evt.which === 27) {
          // escape = cancel
          cancel.call(this, evt);
        } else if (evt.type === "keyup" &amp;&amp; evt.which === 13) {
          // blur/return/enter = ok/submit if non-empty
          var value = String(evt.target.value || "");
          if (value)
            ok.call(this, value, evt);
          else
            cancel.call(this, evt);
        }
      };
    };//added as test
  
      Template.entry.events = {};
  
      Template.entry.events[okcancel_events('#messageBox')] = make_okcancel_handler({
        ok:function(text, event){
          var nameEntry = document.getElementById('name');
          if(nameEntry.value != ""){
            var ts = Date.now() / 1000;
            Messages.insert({name: nameEntry.value, message: text, time: ts});
            event.target.value = "";
          }//if statment ends
        }
      });
  
  
    Template.messages.messages = function () {
      return Messages.find({}, { sort: {time: -1} });
    };
  }
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;head&gt;
    &lt;title&gt;tutorial&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
   {{&gt; entry}}
  
   {{&gt; messages}}
  &lt;/body&gt;
  
  &lt;template name="entry"&gt;
      &lt;p&gt;
      &lt;input type="text" id="name" placeholder="your name"&gt;
      &lt;input type="text" id="messageBox" placeholder="your message"&gt;
      &lt;input type="button" id="submit"&gt;
      &lt;/p&gt;
  &lt;/template&gt;
  
  &lt;template name="messages"&gt;
      {{#each messages}}
          {{&gt; message}} &lt;!--echo of message template--&gt;
      {{/each}}
  &lt;/template&gt;
  
  &lt;template name="message"&gt;
      &lt;p&gt;&lt;strong&gt;{{name}}:&lt;/strong&gt;{{message}}&lt;/p&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I get the following error with that code </p>
  
  <pre><code>Your app is crashing. Here's the latest log.
  
  
  app/tuts.js:58
    Template.messages.messages = function () {
    ^^^^^^^^
  SyntaxError: Unexpected identifier
      at /Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:113:21
      at Array.forEach (native)
      at Function._.each._.forEach (/usr/local/meteor/lib/node_modules/underscore/underscore.js:79:11)
      at run (/Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:99:7)
  Exited with code: 1
  Your application is crashing. Waiting for file change.
  </code></pre>
  
  <p>I Did the following below but still getting a error</p>
  
  <pre><code> if (Meteor.isServer) {
    Template.entry.events({
      'click #submit': function() {
          var nameEntry = document.getElementById('name');
          if(nameEntry.value != ""){
              var ts = Date.now() / 1000;
              Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
          }
      }
  }
  }
  </code></pre>
  
  <p>error</p>
  
  <pre><code>Your app is crashing. Here's the latest log.
  
  
  app/tuts.js:57
  }
  ^
  SyntaxError: Unexpected token }
      at /Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:113:21
      at Array.forEach (native)
      at Function._.each._.forEach (/usr/local/meteor/lib/node_modules/underscore/underscore.js:79:11)
      at run (/Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:99:7)
  Exited with code: 1
  Your application is crashing. Waiting for file change.
  </code></pre>
  
  <p><strong>Here is the entire js file</strong> </p>
  
  <pre><code>Messages = new Meteor.Collection('messages');
  
  if (Meteor.is_client){
  
     ////////// Helpers for in-place editing //////////
  
    // Returns an event_map key for attaching "ok/cancel" events to
    // a text input (given by selector)
    var okcancel_events = function (selector) {
      return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
    };
  
    // Creates an event handler for interpreting "escape", "return", and "blur"
    // on a text field and calling "ok" or "cancel" callbacks.
    var make_okcancel_handler = function (options) {
      var ok = options.ok || function () {};
      var cancel = options.cancel || function () {};
  
      return function (evt) {
        if (evt.type === "keydown" &amp;&amp; evt.which === 27) {
          // escape = cancel
          cancel.call(this, evt);
        } else if (evt.type === "keyup" &amp;&amp; evt.which === 13) {
          // blur/return/enter = ok/submit if non-empty
          var value = String(evt.target.value || "");
          if (value)
            ok.call(this, value, evt);
          else
            cancel.call(this, evt);
        }
      };
    };//added as test
  
      Template.entry.events = {};
  
      Template.entry.events[okcancel_events('#messageBox')] = make_okcancel_handler({
        ok:function(text, event){
          var nameEntry = document.getElementById('name');
          if(nameEntry.value != ""){
            var ts = Date.now() / 1000;
            Messages.insert({name: nameEntry.value, message: text, time: ts});
            event.target.value = "";
          }//if statment ends
        }
      });
  
      if (Meteor.isServer) {
    Template.entry.events({
      'click #submit': function() {
          var nameEntry = document.getElementById('name');
          if(nameEntry.value != ""){
              var ts = Date.now() / 1000;
              Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
          }
      }
  });
  }
  
  
  
  
    Template.messages.messages = function () {
      return Messages.find({}, { sort: {time: -1} });
    };
  }
  </code></pre>
  
  <p><strong>Here is the entire html file</strong>
      
        tutorial
      </p>
  
  <pre><code>&lt;body&gt;
   {{&gt; entry}}
  
   {{&gt; messages}}
  &lt;/body&gt;
  
  &lt;template name="entry"&gt;
      &lt;p&gt;
      &lt;input type="text" id="name" placeholder="your name"&gt;
      &lt;input type="text" id="messageBox" placeholder="your message"&gt;
      &lt;input type="button" id="submit"&gt;
      &lt;/p&gt;
  &lt;/template&gt;
  
  &lt;template name="messages"&gt;
      {{#each messages}}
          {{&gt; message}} &lt;!--echo of message template--&gt;
      {{/each}}
  &lt;/template&gt;
  
  &lt;template name="message"&gt;
      &lt;p&gt;&lt;strong&gt;{{name}}:&lt;/strong&gt;{{message}}&lt;/p&gt;
  &lt;/template&gt;
  </code></pre>