2016-07-27 7 views
0

私はRailsアプリケーションで作業しています。ユーザーがフォームを保存したときに情報を取得して送信したいと思っています。 。要素のIDをRailsのhidden_​​fieldフォームヘルパーに渡す

これは私が読んだものからhidden_fieldヘルパーに完全に適しているようです。しかし、私が含める必要がある「隠された情報」は、ページのどこかのテキスト入力と同じくらい単純なものではありません。

私の意見では、私の意見では、ブログ記事はMarkdown gemを使ってレンダリングされます。すべてのヘッダータグには、下に表示されないDOM内の一意のIDが割り当てられます(つまり、<h1 id="toc_0"><h3 id="toc_1">

、、、

)ユーザーがヘッダーをクリックし、右側にコメントボックスが表示されます。このIDを文字列として:locationという名前の既存の列に保存したい場合

私のフォームにhidden_field行を追加しましたが、何もキャプチャしていません。要素をクリックしてテーブルに保存することができますか?

ビュー

<div class="col-sm-8"> 
    <% @posts.each do |post| %> 
      <h2 id="title"><%= post.title %></h2> 
      <p id="category"><%= post.category %></p> 
      <div id="paragraph"><%= markdown(post.content) %></div>  
    <% end %> 
</div> 

    <!-- jQuery hides this and it toggles next to the clicked paragraph --> 
    <div class="exampleToggle"> 
     <%= form_for :comments do |f| %> 
      <div class="form-group"> 
       <div class="field"> 
        <%= f.label :post %><br> 
        <%= f.text_area :post, class: "form-control" %> 
       </div> 
      </div> 

      <h5 id="username">Username</h5> 
      <div class="form-group"> 
       <div class="field"> 
        <%= f.text_field :username, class: "form-control" %> 
       </div> 
      </div> 

      <%= f.hidden_field :location, :id => "hiddenPicker"%> 

    <div class="actions"> 
     <%= f.submit "Save", class: "btn btn-success-outline" %> 
    </div> 
<% end %> 
</div> 

    <script> 

    $(document).ready(function(){ 
     $('.exampleToggle').hide(); 
     var whatever = document.getElementsByClassName("exampleToggle"); 
     $("h3").click(function(){ 
      $('.exampleToggle').show(); 
      $(this).prepend(whatever); 
       $("form:not(.filter) :input:visible:enabled:first").focus(); 
      }); 
     }); 

</script> 
+0

'をクリックすると、隠しフィールドに' hiddenPicker'のidを 'h3'のIDで埋めたいのですか? –

+0

@CarlMarkhamそれは正しいです。テーブルに保存できるように、対応するIDを指定したいと思います。 – darkginger

答えて

1

あなたはそれをクリックし、隠しフィールドに渡しされるとH3のIDを取得するためにjQueryのを使用することができますとき `H3、ちょうど私がこの権利を得たことを確認する

$(function() { 
    $('h3').on('click', function() { 
    var id = $(this).attr('id'); 
    $('input#hiddenPicker').val(id); 
    }); 
}); 
関連する問題