通過單擊按鈕添加文本區域 - 導軌4

我有一個表單中的5個問題文本字段的列表，供用戶輸入問題。我希望用戶能夠通過點擊「+」按鈕添加問題。通過單擊按鈕添加文本區域 - 導軌4

我該怎麼做？

我有這樣一個例子：

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

來源

2014-01-14 ben

爲別人誰可能尋求解決同樣的問題的原因，請檢查這些導軌，強制轉換： [196- nested-model-form-part-1]（http://railscasts.com/episodes/196-nested-model-form-part-1?view=comments）[197-nested-model-form-part-2] （http://railscasts.com/episodes/197-nested-model-form-part-2）。希望他們幫助。 – ben

-1

創建隱藏的輸入字段（陣列），並在其推填充輸入字段的值

來源

2014-01-14 14:38:38

這是很容易建立與javascript/coffeescript，

既然是Rails讓我們使用coffeescript,

你應該有一個咖啡腳本文件在你的app/assets/javascripts摺疊呃名爲quizzes.js.coffee，如果不是，你可以創建它。

（還要確保裏面你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/

來源

2014-01-14 14:39:57 gmaliar

它的工作，但你的方式。你能稍微解釋一下，以便我編輯它來產生與其他文字相同的text_fields？ – ben

@ben他的方式使用模板，所以如果你的模板與其他模板相同，那麼這就是他們是如何確切的text_fields。我有一個類似的答案，重複而不是使用模板 –

@TMP，請張貼它。謝謝 – ben

或許這將幫助：

添加與ID #samplehRefButton一個href鏈接，在5問題測驗頁面。
把你的服務器代碼爲額外的問題在「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/

來源

2014-01-14 14:41:31 celerno

該方法包括使用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 
}

來源

2014-01-25 07:17:23

通過單擊按鈕添加文本區域 - 導軌4

回答

相關問題