Question

所以我建立了一个测验应用程序，人们可以在其中创建测验，我希望更好地了解流星如何处理动态表单。测验将类似于“你是哪个星球大战角色？”＃39;

然后用户将填写“描述性名词”。像Chewbacca，R2D2等，以创建测验。但是，我希望用户能够通过单击添加按钮来选择多少个描述性名词来添加更多选项。我可能想出如何更改名称属性，例如＆quot; descriptionptive-noun2＆＃39;，＆＃39; descriptive-noun3＆＃39;在HTML方面，我无法弄清楚如何为提交事件做这件事。这些也将具有与它们相关联的图像。有没有办法可以将它作为数组提交，或者我怎样才能将这些动态提交到数据库？谢谢！

HTML：

    <div class="control-group noun">            
        <label class="control-label" for="descriptive-noun"></label>
        <div class="controls">
            <input name="descriptive-noun" type="text" value=""/>
        </div>
    </div>

    <div class="control-group noun">            
        <label class="control-label" for="descriptive-noun"></label>
        <div class="controls">
            <input name="descriptive-noun" type="text" value=""/>
        </div>
    </div>

JavaScript的：

Template.quizSubmit.events({ 
'submit form': function(e) {
    e.preventDefault();

    var quiz = {      
      title: $(e.target).find('[name=title]').val(),
      descriptive_noun1: $(e.target).find('[name=descriptive-noun').val(),
      descriptive_noun2: $(e.target).find('[name=descriptive-noun').val()
    }

    quiz._id = Quizzes.insert(quiz);
    Router.go('quizItemDetails', quiz);
  }

});

Answer 1

我认为这确实是关于HTML表单的问题。

首先，您的HTML需要包含<form>元素。该表单将包含您创建的<input>字段。如您所知，您可以动态添加新的<input>元素。

<form id='form'>
  <input name="descriptive-noun1" type="text" value=""/>
  <input name="descriptive-noun2" type="text" value=""/>
  <input name="descriptive-noun3" type="text" value=""/>
  <button id="submit" type="submit">Submit</button> 
</form>

然后，在JavaScript方面，您可以获得类似这样的数据

Template.quizSubmit.events({
  'submit' : function(event) {
     var formData = $('#form').serializeArray()
     event.preventDefault(); 
  }
});

变量formData将包含一个对象数组，其中包含每个元素的名称和值。然后，您可以将它们插入数据库。

在MeteorJS中动态添加表单域

1 个答案: