

form_for内にajaxのリンク付きボタンを設置したい場合、どのように記述するのが良いのでしょうか。  
本来であれば

[code]

    <%= form_for @ranking do |f| %>
            <%= f.text_area :title %>
            <%= button_to '500ポイント消費し、ランキング順位を追加する', add_ranking_path, class: 'btn btn-primary center-block', remote: true %>
    <%= end %>
    
[/code]

としたいのですが、そうするとリンクが無効になってしまいフォームが送信されてしまいます。  
ボタンを押せば、Ajaxでtextareaがもう1つ増えるような仕組みにしたいです。  
よろしくお願いします。

==追記  
サイト内のランキング記事を編集するformのerbです。

[code]

    <%= form_for(@ranking, html: {class: 'col-sm-12 col-xs-12'}) do |f| %>
        <div class="edit-rankingtop row">
          <div class="field col-sm-2 col-xs-12">
            <strong id="top_image_label">トップ画像</strong><br/>
            <% if @ranking.image.thumb %>
                <%= image_tag @ranking.image.thumb, size: '65', id: 'top_image_thumb' %>
            <% end %>
            <div class="field">
              <%= f.file_field :image %>
              <br>
              <%= f.hidden_field :image_cache %>
            </div>
          </div>
          <div class="field col-sm-10 col-xs-12">
            <%= f.label :title %>
            <br>
            <%= f.text_area :title, class: 'form-control', placeholder: '150文字以内に詰め込もう' %>
          </div>
          <br/>
    
          <div class="field">
            <%= f.hidden_field :user_id, :value => current_user.id %>
          </div>
          <div class="clearfix"></div>
        </div>
        <br/>
        <%= link_to '500ポイント消費し、ランキング順位を追加する', add_ranking_path(@ranking), class: 'btn btn-primary center-block', remote: true %>
        <div class="col-sm-10 col-xs-12 row">
          <div class="field col-sm-12">
        <% i = @ranking.posts_sum %>
           #--------------------------------
           #上のリンクを押されるとAjaxで@ranking.ranking_postsの値を＋１する。
           #同時に、元々第i位までしか編集できなかったランキングをi+1位まで編集できるように、
           #form内に新たな編集エリアを追加したい。
           #--------------------------------
            <%= f.fields_for :ranking_posts, @ranking.ranking_posts do |p| %>
                <br/>
                <h4>第<%= i %>位</h4>
    
                <%= p.hidden_field :rank, :value => i %>
    
                <div class="field">
                  <%= p.label :title %>
                  <%= p.text_field :title, class: 'form-control' %>
                </div>
    
                <div class="field">
                  <%= p.label :description %>
                  <%= p.text_area :description, class: 'form-control', id: 'edit' %>
                </div>
    
                <% i = i-1 %>
            <% end %>
          </div>
    
          <div class="actions col-sm-8 col-xs-12">
            <%= f.submit '投稿', :class => 'btn btn-success btn-block' %>
          </div>
          <% if @ranking.id %>
              <div class="col-sm-4 col-xs-12">
                <%= f.submit "削除", data: {confirm: 'このランキングを削除しますか？'}, :class => 'btn btn-danger btn-block' %>
              </div>
          <% end %>
        </div>
    <% end %>
    
[/code]

Rankingのモデル

[code]

    class Ranking < ActiveRecord::Base
      belongs_to :user
      has_many :ranking_posts, dependent: :destroy
      accepts_nested_attributes_for :ranking_posts
    end
    
[/code]

RankingPostのモデル

[code]

    class RankingPost < ActiveRecord::Base
      belongs_to :ranking
    end
    
[/code]

もともとランキングが３位までなく、３位までしか編集できなかったものを、ボタンをクリックすることによって、４位、５位とランキングが追加され、それに従い編集できるエリアも追加されるようにしたいです。


CC BY-SA 3.0
2015-02-05T09:39:55.210
5991
2015-02-06T01:07:13.880
2015-02-05T21:50:23.400
85
4971
question
ruby-on-rails html5
ボタンをクリックするとAjaxでtextareaがもう1つ増えるような仕組みを作りたい


link_to を使って、スタイルシートでボタン風に見せたら良いのでは？と思いました。  
実際、上のコードにもbootstrapっぽいクラス名が付いてますし。  
buttonタグを使いたい特別な事情があれば詳しく教えてください。

あと、textareaが増えるようにする、というのも上の説明だけだとイメージしづらいので、やりたいことや他のソースコードを詳しく教えてください。

### 追記

>
> もともとランキングが３位までなく、３位までしか編集できなかったものを、ボタンをクリックすることによって、４位、５位とランキングが追加され、それに従い編集できるエリアも追加されるようにしたいです。

ざっくりとした流れでいうと、

  1. routes.rbにajax用のルーティングを定義する
  2. controllerにajax用のアクションを定義する（おそらく「500ポイント消費し、ランキング順位を追加する」を実行する）
  3. アクションに対応するview（たとえば`add.js.erb`など）を作成し、textareaを動的に追加するJavaScriptを書く

ということになると思います。

ただし、textareaは追加できても、投稿ボタンをクリックしたときにうまく順位に対応するデータを登録するのが難しいかもしれません。

また、別のアプローチとして [nested_form](https://github.com/ryanb/nested_form)
を利用する、という作戦もありますが、これはこれでAjaxと組み合わせて使うのは大変かもしれません。

とりあえず、できるところまで自分でがんばって、「xxはできるようになったけど、xxができません。現状のコードはこれです」と解決したい課題をもう少し絞り込んだ方が、回答が付きやすいと思います。


CC BY-SA 3.0
2015-02-05T11:43:55.013
6001
2015-02-06T00:54:01.853
2015-02-06T00:54:01.853
85
85
5991
answer


Railscastの#197がやりたいことではないでしょうか。

> Add and remove nested model fields dynamically through JavaScript using
> either Prototype or jQuery.

#196からの続き物なのでそちらのリンクも載せておきます。

[#196 Nested Model Form Part 1](http://railscasts.com/episodes/196-nested-
model-form-part-1)  
[#197 Nested Model Form Part 2](http://railscasts.com/episodes/197-nested-
model-form-part-2)


CC BY-SA 3.0
2015-02-06T01:07:13.880
6033
2015-02-06T01:07:13.880
5793
5991
answer