如何在Meteor中点击单击单选按钮

Question

我是Meteor的新手，我正在尝试构建一个简单的应用程序。我目前有一个带有4个无线电选项和​​一个提交按钮的表单。当用户单击提交按钮时，我想知道他们选择了哪个无线电选项。我不知道怎么开始。谁能帮我？下面是我的html和javascript代码：

<form class="form-horizontal well mystery-form">
    <fieldset class="col-md-offset-1">
      <h2>{{question}}</h2>
      <br>
      <div class="form-group">
        <div class="col-md-10 mystery-form">
          {{#each answers}}
          <div class="radio">
            <label>
              <input type="radio" name="mysteryForm" checked="" 
                     style="margin-bottom: 0; margin-top: 0;">
              {{answer}}
            </label>
          </div>
          {{/each}}
          <br>
          <button type="reset" class="btn btn-default">Back</button>
          <!-- Hide this when the answer is correct -->
          <button type="submit" class="btn btn-primary">Check Answer</button>
          <!-- Show only if the answer is correct -->
          <button class="btn btn-primary">Next</button>
        </div>
      </div>
    </fieldset>
  </form>

JS：

Template.mystery.events({
"submit .mystery-form": function(event) {

 // no idea what to do here

}
});

Answer 1

语义

您可能希望删除整个包装.radio元素。这是不必要的。尝试使用尽可能少的元素。它表现更好，使调试更容易。

检索已检查的input

传递给event-map回调的事件对象具有属性target。在你的情况下是.mystery-form。因此，您可以使用简单的jQuery选择器来查找已选中的元素：

$('input[name="mysteryForm"]:checked', event.target)

这将为您提供名称为mysteryForm的选中值。这很安静。问题是检索值。这样做会有点混乱。所以我只是将其作为data-属性传递给元素：

<input type="radio" name="mysteryForm" checked="" style="margin-bottom: 0; margin-top: 0;" data-answer="{{ answer }}" >

现在你可以这样做：

$('input[name="mysteryForm"]:checked', event.target).data('answer')

Answer 2

首先，您可能希望阻止正常的表单提交并避免重新加载页面。在构建单页面应用程序时，您需要自己完成表单提交逻辑。此外，通过表单提交重新加载页面在此类应用程序中没有任何意义。

其次，您必须实际收集数据，然后使用这些数据执行您想要的操作。

把它们放在一起就可以得到这样的结果：

Template.mystery.events({
  "submit .mystery-form": function(event, template) {

    //1. prevent default behavior (form submission)
    event.preventDefault();

    //2. get your data
    //either by name (HTML name attribute)
    var inputValue = template.mysteryForm.value;
    //or by id (HTML id attribute)
    var inputValue = template.find('#myId').value;

    //3. Do whatever you want (method call for example?)
    Meteor.call('myMethod', inputValue, function(error, result) {
      //wait for the call result...
    });
  }
});