javascript - 当动态创建表单时，如何从 Meteor Event 中的 HTML 表单获取值？

Question

Template.dpVar.events = {
        'click .addproduct' : function  (err) {
            console.log("testing");
            console.log(result);
            for (i = 0; i < result.length; i++) {
                var Temp_Name = result[i];
               This is the problem //var Temp_Val = document.getElementById(Temp_Name).value
                console.log("temp name is ", Temp_Name);

               productDB.insert({ Temp_Name:Temp_Val });
               console.log("temp val is ", Temp_Val);
            }

        }
}

HTML

<template name="dpVar">
  <h1>variants</h1> 

  <table class="table table-responsive table-bordered">
    <tbody>
    {{#each variant}}
      {{#each VARIENTS}}
        {{#if $eq this.DATATYPE "Text"}}
          <tr>
            <td class="center">{{this.NAME}}</td>
            <td>
              <input type="text" id={{this.NAME}}>
             </td> 

          </tr>
        {{/if}}

        {{#if $eq this.DATATYPE "price"}}
          <tr>
            <td class="center">{{this.NAME}}</td>
            <td><input type="text" id={{this.NAME}}></td> 
          </tr>
        {{/if}}

        {{#if $eq this.DATATYPE "color"}}
          <tr>
            <td class="center">{{this.NAME}}</td>
            <td>
            <div>
              <select>
                <option>Color</option>
                <option>Green</option>
                <option>White</option>
                <option>Red</option>
                <option>Blue</option>
              </select>
            </div>
            </td> 
          </tr>
        {{/if}}

        {{#if $eq this.DATATYPE "boolean"}}
          <tr>
            <td class="center">{{this.NAME}}</td>
            <td><input type="radio" id={{this.NAME}}></td> 
          </tr>
        {{/if}}

        {{#if $eq this.DATATYPE "checkbox"}}
          <tr>
            <td class="center">{{this.NAME}}</td>
            <td><input type="checkbox" id={{this.NAME}}></td> 
              </tr>
        {{/if}}
        {{#if $eq this.DATATYPE "string"}}
          <tr>
            <td class="center">{{this.NAME}}</td>
            <td><input type="text" id={{this.NAME}}></td> 
          </tr>
        {{/if}}
        {{#if $eq this.DATATYPE "date"}}
          <tr>
            <td class="center">{{this.NAME}}</td>
            <td><input data-provide="datepicker" type="text" id={{this.NAME}}></td> 
          </tr>
        {{/if}}
      {{/each}}
    {{/each}}
    </tbody>
  </table>

  <button class="btn btn-success addproduct" id="CreateNewProduct">Create new product</button>   
</template>

Answer 1

点击事件中的 result 变量是什么？如果我理解正确的话，result 变量是表单元素的列表？

在 Meteor 中处理表单的正确方法是通过提交表单事件。另外，不要将变量名称定义为 Temp_Name 或 Temp_Val，这违反约定。根据约定命名变量:tempName 和 tempVal。约定很重要!了解有关约定的更多信息:http://www.w3schools.com/js/js_conventions.asp

我发现您在点击事件中使用了名为 err 的参数。您可以根据需要命名参数，但 err 会令人困惑。它应该命名为 event 或 evt 因为它实际上是一个事件对象，而不是错误对象。

所以正确的代码是:

Template.dpVar.events = {
    'submit .add-product-form' : function  (evt) {
        evt.preventDefault(); //prevent form to change URL
        var form = evt.target; //this is the .add-product-form element
        console.log("testing", form);
        console.log(result);
        for (i = 0; i < result.length; i++) {
            var tempName = result[i];
            var tempVal = form[tempName].value;
            console.log("temp name is ", tempName);

            productDB.insert({ tempName: tempVal });
            console.log("temp val is ", tempVal);
        }
    }
}

编辑:我可以看到您使用 forEach 来查找动态值并将其插入数据库。我不知道为什么要这样做，但是当 HTML 中不存在名称为 tempName 的输入时，form[tempName] 可能会未定义。在访问其属性 value 之前，您应该检查 form[tempName] 是否未定义:

Template.dpVar.events = {
    'submit .add-product-form' : function  (evt) {
        evt.preventDefault(); //prevent form to change URL
        var form = evt.target; //this is the .add-product-form element
        console.log("testing", form);
        console.log(result);
        for (i = 0; i < result.length; i++) {
            var tempName = result[i];
            if (form[tempName] !== void 0) {
                var tempVal = form[tempName].value;
                console.log("temp name is ", tempName);

                productDB.insert({ tempName: tempVal });
                console.log("temp val is ", tempVal);
            }
        }
    }
}

现在在 HTML 中添加表单，使用 name 属性作为输入而不是 ID，这样我们就可以通过 JavaScript 中的名称访问表单输入(evt.目标[inputName].value)

此外，还为 select 元素的选项项提供值。这是您的新 HTML:

<template name="dpVar">
  <h1>variants</h1>

  <!-- here is our form -->
  <form class="add-product-form">
    <table class="table table-responsive table-bordered">
      <tbody>
      {{#each variant}}
        {{#each VARIENTS}}
          {{#if $eq this.DATATYPE "Text"}}
            <tr>
              <td class="center">{{this.NAME}}</td>
              <td>
                <input type="text" name={{this.NAME}}>
               </td>

            </tr>
          {{/if}}

          {{#if $eq this.DATATYPE "price"}}
            <tr>
              <td class="center">{{this.NAME}}</td>
              <td><input type="text" name={{this.NAME}}></td>
            </tr>
          {{/if}}

          {{#if $eq this.DATATYPE "color"}}
            <tr>
              <td class="center">{{this.NAME}}</td>
              <td>
              <div>
                <select name={{this.NAME}}>
                  <option>Color</option>
                  <option value="Green">Green</option>
                  <option value="White">White</option>
                  <option value="Red">Red</option>
                  <option value="Blue">Blue</option>
                </select>
              </div>
              </td>
            </tr>
          {{/if}}

          {{#if $eq this.DATATYPE "boolean"}}
            <tr>
              <td class="center">{{this.NAME}}</td>
              <td><input type="radio" name={{this.NAME}}></td>
            </tr>
          {{/if}}

          {{#if $eq this.DATATYPE "checkbox"}}
            <tr>
              <td class="center">{{this.NAME}}</td>
              <td><input type="checkbox" name={{this.NAME}}></td>
                </tr>
          {{/if}}
          {{#if $eq this.DATATYPE "string"}}
            <tr>
              <td class="center">{{this.NAME}}</td>
              <td><input type="text" name={{this.NAME}}></td>
            </tr>
          {{/if}}
          {{#if $eq this.DATATYPE "date"}}
            <tr>
              <td class="center">{{this.NAME}}</td>
              <td><input data-provide="datepicker" type="text" name={{this.NAME}}></td>
            </tr>
          {{/if}}
        {{/each}}
      {{/each}}
      </tbody>
    </table>

    <!-- here I added type="submit" for button, so it submits the form -->
    <button class="btn btn-success addproduct" id="CreateNewProduct" type="submit">Create new product</button>
  </form>
</template>