Meteor, adding event to radio buttons disables them

Question

I have a form currently that contains a form group with the following code.

<div class="form-group">
  <label>Role</label>
  <div class="radio">
    <label>
      <input type="radio" name="role-options" id="role-foreman" value="Foreman" checked="">Foreman
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="role-options" id="role-super" value="Superintendent">Superintendent
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="role-options" id="role-admin" value="Superintendent">Admin
    </label>
  </div>
</div>

This all works as expected, but as soon as I add event handlers to the three inputs, I lose the default functionality of the form group, which is that when one radio button is pressed it becomes the only selected one.

Currently I have the following code in my event handler for the template.

"click #role-foreman": (e) ->
    console.log e
    showAddProjects = true

"click #role-super": (e) ->
    console.log e
    showAddProjects = false

"click #role-admin": (e) ->
    console.log e
    showAddProjects = false

What I am looking for is that the default behavior of the buttons remains, but then also run other code for when the button is pressed.

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

CoffeeScript has implicit returns, so your event handlers compile to JavaScript which looks like this:

"click #role-super": function(e) {
  var showAddProjects;
  console.log(e);
  return showAddProjects = false;
}

So your event handlers are returning false. When that happens, it stops the event from propagating and prevents the default behavior. To fix this, just add a return to the end of your functions like so:

'click #role-super': (e) ->
  console.log e
  showAddProjects = false
  return

edited May 23 '17 at 11:51

Community

1
1

answered Dec 30 '14 at 00:49

David Weldon

63,632
11
148
146

Also it's better to `return false` or `return undefined`. Additionally I suggest to run `e.preventDefault()` right on the first line of the function. – dr.dimitru May 12 '15 at 18:58

Meteor, adding event to radio buttons disables them

1 Answers1