javascript - 通过单击按钮栏添加文本区域 4

标签 javascript jquery html ruby-on-rails-4 erb

我在表单中列出了 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 %>

最佳答案

使用 javascript/coffeescript 设置非常简单,

既然是 Rails 让我们使用 coffeescript,

您的 app/assets/javascripts 文件夹下应该有一个名为 quizzes.js.coffee 的 coffeescript 文件,如果没有,您可以创建它。

(还要确保在您的 app/assets/javascripts/application.js 中您需要该文件或者您有 require_tree 。

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

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

你的 html 应该是这样的:

<button id="js-add-question-row">+</button>
<form action="" method="" id="someform">
    <textarea name="quiz[content][0]"></textarea>
</form>

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

关于javascript - 通过单击按钮栏添加文本区域 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21111122/

相关文章:

javascript - AngularJS 中的嵌套模块

javascript - Jquery Slider 不适用于移动设备

javascript - 如何将控制台错误显示为验证错误?

python - 用 Mechanize 打开网页后,如何继续提交

javascript - Chrome 扩展消息在后台和内容脚本之间传递

javascript - 为多个站点创建登录表单

javascript - 从数据库获取值并显示在 html 表中(包括 PHP)

javascript - 如何为 WebStorm 配置 eslint 缩进?

javascript - 将 CSS 设置为动态创建的类

html - 更改滚动条元素的颜色