如何在.js函数中检索来自其他模板的表单的目标值

How to retrieve in a .js function the target value of a form which comes from an other template?

本文关键字:其他 表单 目标值 js 函数 检索      更新时间:2023-09-26

你好,我是Metroet的新手,由于我的.js文件中有一个Event,我想在模板中检索表单的值。当我在选择菜单中使用一个简单的值时,它就起了作用:我在事件的帮助下检索表单的值,并在函数中发送它。但现在,我使用了一个模板,该模板提供了我的集合中可显示的所有值(每个值都有#),以便为我的选择选项提供所有现有的元素。问题是,我无法从客户端成功检索表单中选择的值。谢谢你的帮助。

这是我代码的一部分:

 <template name="searchBar">
    <div class="searchBar">
    <form class="form-inline">
        <select name="make">
            {{#each makes}}
                {{>make}}
            {{/each}}
        </select>
        <select name="model">
            {{#each cars}}
                {{>model}}
            {{/each}}
        </select>
        <input type="text" name="price" placeholder="Prix maximum"/>
        <input type="text" name="quickSearch" placeholder="Mots-clés" />
        <button class="btn btn-primary btn-info" type="submit" value="Rechercher">Rechercher</button> 
    </form> 
    </div>
</template>
<template name="make"> 
  <option>{{make}}</option>
</template>
Template.searchBar.events({
    "submit form": function (event) {
      var make = event.target.make.value;
      var model = event.target.model.value;
      var price = event.target.price.value;
      var quickSearch = event.target.quickSearch.value;
      Meteor.call("findCar", make, model, price, quickSearch);
      return false;
    }
  });

findCar: function (quickSearch,make,model,price) {
    console.log("fonction called");
    console.log("make"); // It send : make instead of the real make
    var carsFound = Cars.find({make:make, model:model, price:price}).fetch(); 
    console.log(carsFound);
  }

我有时发现使用jQuery(Meteor中本机使用)选择器来查找输入值更容易,而不是使用传入的事件对象。

如果您在选择中添加了一个id:

<select name="make" id="make">
    {{#each makes}}
        {{>make}}
    {{/each}}
</select>

您可以在活动中访问它,如下所示:

$("#make").val();

提示:如果你想避免jQuery并使用内置的DOM对象,我发现在Firefox或Chrome中使用调试器真的很有帮助。它们允许您详细检查对象属性。