CODEWITHSUNDEEP
javascriptjquerymeteormeteor-blaze
CHiEZ
CHiEZ

Reputation: 7

How to use jQuery to get Input Field Value of dynamic table

I'm currently using Meteor/Blaze framework to build a table. The row in the table will change according to the selected supplier. I have added class={{_id}} to the field and q.{{_id}} , lot.{{_id}} , and exp.{{_id}} to the quantity, lot , and expire date INPUT.

I'm trying to write a Submit Events to get these value and pass it to the Mongo Database. Please suggest a good way to loop through these rows to get the value.

Website Image

enter image description here

Part of the code

receiveForm template

<template name="receiveForm">
...
<select data-placeholder="Select an option" class="sel2js form-control select select-primary" id="supplier_sel" name="supplier">
      {{#each suppliers}}
        {{> sel_supplier}}
      {{/each}}
    </select>
  </div>
  <!-- Receive Lot Table -->
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Product Name</th>
        <th>Current Quantity</th>
        <th>Unit of Measurement</th>
        <th>Receive Quantity</th>
        <th>Lot No</th>
        <th>Exp Date (DD/MM/YYYY)</th>
      </tr>
    </thead>
    <tbody>
      {{#each items}}
        {{> receiveRow2}}
      {{/each}}
    </tbody>
</table>
<div class="text-center">
  <button type="submit" class="btn btn-embossed btn-primary btn-wide" id="submitNewReceive" value="Submit">Submit</button>
  <button type="reset" class="btn btn-embossed btn-warning btn-wide" value="Reset">Reset</button>
</div>
</form>

receiveRow2 template

<template name="receiveRow2">
  <tr id="{{_id}}">
    <td class="pn">{{name}}</td>
    <td class="pq">{{totalQuantity}}</td>
    <td>{{uomid.name}} ({{uomid.unit}} {{uomid.unitname}}/{{uomid.name}})</td>
    <td><input type="text" class="form-control" name="q.{{_id}}" placeholder="Quantity" /></td>
    <td><input type="text" class="form-control" name="lot.{{_id}}" placeholder="Lot No XX/YYYY" /></td>
    <td>
      <div class="input-group datetimepicker text-primary">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" name="exp.{{_id}}" type="text" placeholder="วัน/เดือน/ปี"/>
        <hr />
      </div>
    </td>
  </tr>
</template>

JS

Template.receiveForm.events({
  'submit form': function(event, template){
    var supplierSelected = Template.instance().supplierSelected;
    items = Products.find({suppliers: supplierSelected.get()});
    event.preventDefault();
    docdate = event.target.docdate.value;
    supplier = event.target.supplier_sel.value;
    console.log("---event---");
    console.log(docdate)
    console.log(supplier)
    items.forEach(function(item){
      ????
    })
  }
})

Upvotes: 0

Views: 1962

Answers (1)

user7791047
user7791047

Reputation:

In line 4 its missing a var before items, and also in line 6, 7.

After that I think you can loop on them.(But they will come from the DB).

BUT if you want to get the input values, why would you ask for a data in MongoDB? Also I would prefer to get DB values as a promise.

var items = Promise.resolve(Products.find({suppliers: supplierSelected.get()});

and get back the items in this way:

items.then(function(item){console.log(item)})

Upvotes: 3

Related Questions