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 查找动态值并将其插入到数据库中。我不知道你为什么这样做，但是 form[tempName] 可以在 HTML 中不存在名称为 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)

另外，为选择元素的选项提供值。这是您的新 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>