如何从Meteor中的动态创建输入中获取价值？

Question

I have created a custom form and added some jquery for dynamic inputs, but I can't get values from these generated inputs ( Elements, Link, Image ). Here are my form and code.

Template This is my template for this form

<form id="workForm" class="workAdd">
<label>Title</label>
<input type="text" name="title" id="title" class="form-control">
<label>Live Link</label>
<input type="text" name="llink" id="llink" class="form-control">
<label>Elements Used In This Project</label>
<div class="row" id="eleContainer">
    <div class="eleRow">
        <div class="col s6 m6 l6">
            <label>Element</label>
            <input type="text" name="elements[]" id="elementsid[]" class="form-control">
        </div>
        <div class="col s6 m6 l6">
            <label>Link</label>
            <input type="text" name="elinks[]" id="elinksid[]" class="form-control" >
        </div>
    </div>
</div><!--row-->
<div class="row">
    <div class="col s6 m12 center">
        <a class="btn-floating waves-effect waves-light" id="addElements"><i class="fa fa-plus"></i></a>
    </div>
</div>
<div class="row" id="imgContainer">
    <div class="imgRow">
        <label>Image</label>
        <input type="text" name="image[]" id="imageid[]" class="form-control" >
    </div>
</div>
<div class="row">
    <div class="col s6 m12 center">
        <a class="btn-floating waves-effect waves-light" id="addImages"><i class="fa fa-plus"></i></a>
    </div>
</div>
<label>Detail</label>
<textarea id="detail" class="materialize-textarea" name="detail" data-length="120"></textarea>

<button type="submit" id="work-submit" thisId="" class="btn btn-primary">Submit</button>

Meteor And this is my submit event I have created for this form.

Template.addworkTemp.events({
"submit .workAdd": function(event) {

    var title = event.target.title.value;
    var llink = event.target.llink.value;
    var elements = event.target.elements.value;
    var elinks = event.target.elinks.value;
    var images = event.target.images.value;
    var detail = event.target.detail.value;
    return false;

Answer 1

There's a good tutorial on meteor forms that might be useful to you. This tutorial is based on blaze which is what you're using.

Firstly you can attach your handler to the form instead of to the workform class.

Template.addWorkTemp.events({
  'submit form'(event) {
  ...
  }
});

Then you should prevent the default form action:

Template.addWorkTemp.events({
  'submit form'(event) {
    event.preventDefault();
    ...
  }
});

The event object has a target property which has properties for every field based on the name attached to them in the html.

Template.addWorkTemp.events({
  'submit form'(event) {
    event.preventDefault();
    console.log(event.target.llink.value);
    ...
  }
});

I have no idea why you're appending [] to the field names. I'm not sure those are valid in that context.

There's a related answer that shows how to access the form elements via the template object which is an optional second parameter to your event handler. That might also help you.

When I'm debugging things like this I normally set a breakpoint (using the browser's development tools) at the first line of the event handler then inspect the event to make sure I understand what's inside.