Question

我在表单中列出了5个问题文本字段，供用户输入问题。我希望用户能够通过单击“+”按钮添加问题。

我该怎么做？

我有一个样本：

<%= simple_form_for(@quiz, html: {class: 'form-vertical' }) do |f| %>
    <%= render 'shared/error_messages_question' %>
    <%= f.input_field :content, :rows => 3, :style => "width:80%", :placeholder => "enter your question."  %>
<% end %>

Answer 1

使用javascript/coffeescript，

进行设置非常简单

因为它是Rails，所以我们使用coffeescript，

您应该在名为app/assets/javascripts的{{1}}文件夹下有一个coffeescript文件，否则您可以创建它。

（另外请确保您quizzes.js.coffee内的文件需要app/assets/javascripts/application.js

现在在文件中你可以有这样的东西：

require_tree .

你的HTML应该是这样的：

$ ->
  template = "<textarea name='quiz[content][INDEX]'></textarea>"
  index = $('textarea').length
  $('#js-add-question-row').click ->
    compiled_textarea = $(template.replace("INDEX", index))
    $('#someform').append(compiled_textarea)
    index = index + 1

我添加了一个javascript jsfiddle，向您展示它是如何工作的http://jsfiddle.net/vjZ3g/

Answer 2

也许这会有所帮助：

在5个问题的测验页面中添加ID为#samplehRefButton的href链接。
将您的服务器代码添加到“rails_question_page”
添加此脚本

代码：

<script>
$('#samplehRefButton').click(function (e) {
           e.preventDefault;
           $.get('your_rails_question_page', 
                            function (data) 
                            { $('#divQuestionsContainer').append(data); });
            });
</script>

参考：http://api.jquery.com/jquery.get/

Answer 3

此方法涉及使用javascript复制文本区域元素并增加其索引。它可能有点复杂，但它有点需要

http://jsfiddle.net/tprats108/9nfpP/1/

$(document).ready(function() {
  $("#js-add-question-row").click(function() {
    addQuestion();
  });
});

function addQuestion() {
  var question = $("textarea:last").clone();
  question = updateQuestion(question);
  question.insertAfter("textarea:last");
}

// This part substitutes out the index number and then increments the last by one
function updateQuestion(question) {
  var old_name = question.attr("name");
  var result = /\[[\d]+\]/.exec(old_name).toString();
  var old_index = result.slice(1, -1);
  var new_index = (parseInt(old_index, 10) + 1).toString();
  var new_name = old_name.replace(old_index, new_index);
  question.attr("name", new_name);
  return question
}

Answer 4

创建隐藏的输入字段（数组）并在其中推送填充的输入字段的值

通过单击按钮导轨4添加文本区域

4 个答案: