在 MeteorJS 中动态添加表单字段 [英] Dynamically add form fields in MeteorJS

问题描述

所以我正在构建一个测验应用程序，人们可以在其中创建测验，我想更好地了解meteor 如何处理动态表单.测验将类似于你是哪个星球大战角色?"

然后用户将填写描述性名词"，如 Chewbacca、R2D2 等，以创建测验.但是，我希望用户能够通过单击添加按钮添加更多选项来选择多少个描述性名词.我可能想出如何在 HTML 方面更改名称属性，例如描述性名词2"、描述性名词3"，但我无法弄清楚如何为提交事件执行此操作.这些也将有与它们相关联的图像.有没有办法可以将它作为数组提交，或者我如何才能将这些动态提交到数据库?谢谢！

HTML:

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

<div class="控制组名词"><label class="control-label" for="descriptive-noun"></label><div class="控件"><input name="descriptive-noun" type="text" value=""/>

JavaScript:

Template.quizSubmit.events({提交表单":函数(e){e.preventDefault();变量测验 = {标题:$(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);}});

解决方案

我认为这确实是一个关于 HTML 表单的问题.

首先，您的 HTML 中需要有一个

元素.该表单将包含您创建的 字段.正如您所建议的，您可以动态添加新的 元素.

<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">提交</button></表单>

然后，在 JavaScript 端，你会像这样获取里面的数据

Template.quizSubmit.events({提交":函数(事件){var formData = $('#form').serializeArray()event.preventDefault();}});

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

So I'm building a quiz app where people can create quizzes and I'd like to get a better understanding of how meteor can handle dynamic forms. The quiz will be something like 'Which Star Wars Character are you?'

Then the user would fill in 'descriptive nouns' like Chewbacca, R2D2, etc. in order to create the quiz. However I'd like the the user to be able to choose how many descriptive nouns by clicking an add button to add more choices. I could probably figure out how to change the name attribute such as 'descriptive-noun2', 'descriptive-noun3' on the HTML side of things, but I can't figure out how to do this for the submit event. These will also have an image associated with them. Is there a way I can submit this as an array, or how else could I be able to dynamically submit these to the database? Thank you!

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);
  }

});

解决方案

I think this is really a question about HTML forms.

First, your HTML needs to have a <form> element in it. That form will contain the <input> fields that you create. As you suggest, you can add new <input> elements to the dynamically.

<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>

Then, on the JavaScript side, you get the data inside the like this

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

The variable formData will have an array of objects containing the name and value of each element. You can then insert them into a database.

这篇关于在 MeteorJS 中动态添加表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！