CODEWITHSUNDEEP
javascriptjqueryhtmlruby-on-rails-4erb
ben
ben

Reputation: 6180

Adding a text area by clicking a button-rails 4

I have a list of 5 question text-fields in a form for a user to enter questions. I want a user to be able to add a question by clicking a "+" button.

how can i do this?

I have this for a sample:

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

Upvotes: 1

Views: 2701

Answers (4)

Tom Prats
Tom Prats

Reputation: 7921

This method involves using javascript to duplicate the text area element and increase its index. It might be a bit over complex, but it kinda needs to be

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
}

Upvotes: 1

celerno
celerno

Reputation: 1387

Perhaps this will help:

  • Add an href link with id #samplehRefButton in your 5 question Quiz page.
  • Put your server code for extra question in "rails_question_page"
  • Add this script

code:

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

Reference: http://api.jquery.com/jquery.get/

Upvotes: 1

gmaliar
gmaliar

Reputation: 5479

It's pretty easy to set up with javascript/coffeescript,

Since it's Rails let's use coffeescript,

You should have a coffeescript file under your app/assets/javascripts folder named quizzes.js.coffee, if not you can create it.

(Also make sure that inside your app/assets/javascripts/application.js you require that file or you have require_tree .

Now inside the file you can have something like this:

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

And your html should look something like this:

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

I added a javascript jsfiddle that shows you how it works http://jsfiddle.net/vjZ3g/

Upvotes: 2

Ivan Denysov
Ivan Denysov

Reputation: 1502

Create hidden input field(array) and push values of populated input field in it

Upvotes: -1

Related Questions