javascript - 表单值未插入 Meteor 应用程序中

Question

  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);
            data = {};
            var len=result.length;
            console.log("len is",len);
            for (i = 0; i <= result.length; i++) {
                alert(i);
                alert(result[i])
                var tempName = result[i];
                if (form[tempName] !== void 0) {
                    alert("IF")
                    var tempVal = result[tempName].value;
                    console.log("temp name is ", tempName);
                    data[tempName] = tempVal;
                    console.log("temp val is ", tempVal);
                }
            }
            productDB.insert(data);
        }
    }

控制台输出:

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" class="variables" name="{{this.NAME}}" value={{this.NAME}}>
                </td>

            </tr>
            {{/if}}

            {{#if $eq this.DATATYPE "price"}}
            <tr>
                <td class="center">{{this.NAME}}</td>
                <td><input type="text" name="{{this.NAME}}" value={{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>

问题:

数据库条目应该是{“品牌”:，“价格”:，等等}

当前数据库:正在创建空白条目。

Answer 1

我编写了类似的应用程序，它对我有用。

productDB = new Mongo.Collection('productDB');

if (Meteor.isClient) {
  result = ['Brand', 'Color', 'Price'];
  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);
        data = {};
        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);
                data[tempName] = tempVal;
                console.log("temp val is ", tempVal);
            }
        }
        productDB.insert(data);
    }
  }
}

HTML:

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

  <!-- here is our form -->
  <form class="add-product-form">
    <table class="table table-responsive table-bordered">
      <tbody>
            <tr>
              <td class="center">Color</td>
              <td>
                <input type="text" name="Color">
               </td>

            </tr>

            <tr>
              <td class="center">Brand</td>
              <td><input type="text" name="Brand"></td>
            </tr>
      </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>