We Keep Coding

Hidden text field to be set to other Text Field value

I have the following form in rails:
<%= form_for :key, :url => delete_keys_path,:html => { :method => :get } do |f| %>
<%= f.label :key_value %>
<%= f.text_field :key_value %>
<%= button_to 'Delete', :class => 'btn',
method: :delete,
data: { confirm: 'Are you sure?' } %>
<% end %>
<%= form_for :key ,:url => unblock_keys_path,:html => { :method => :get } do |f| %>
<%= f.hidden_field :key_value %>
<%= button_to 'Unblock', :class => 'btn',
method: :get %>
<% end %>
<%= form_for :key, url: keep_alive_keys_path, :html => { :method => :get } do |f| %>
<%= f.hidden_field :key_value %>
<%= button_to 'Keep Alive', :class => 'btn',
method: :get %>
<% end %>
I want the user to input a key value and choose specific action based on which button he clicks. Since only one input is needed I set up one text field and other hidden fields
The hidden field must be set equal to value in text field on submit. I know i will have to use JavaScript but how do I do it?

Assign an id to the text field, say "textField", and to the hidden field as well, say "hiddenField".
Now using javascript,
var textFieldElement = document.getElementById("textField");
var hiddenFieldElement = document.getElementById("hiddenField");
var text = textFieldElement.value;
hiddenFieldElement.value = text;

Ruby on Rails 3 Partial Pages

For a certain employee I have a report. Each report has some shifts. Each shift can be corrected. I am migrating from Ruby 2 to Ruby 3. I am working with partial pages. When I click on Correct, a partial page appears, when I click on Update, page should go back to the partial page Details with the ID of that employee.
_modify_item.html.erb:
<%= form_for :modified_item, :url => {:action => :modify_item, :report_id => #monthly_report.id, :modified_item_id => #modified_item.id,remote: true} do |form| %>
<table width=100% height=100%>
<td width=150 style='border: 0px; background-color: #eee' align=center>
<%= form.hidden_field :report_id, :value => #monthly_report.id %>
<%= submit_tag 'Update', :name => 'update', :value => 'Update', :class => 'highlighted_button' %>
<%= link_to 'Cancel',
{:action => 'details', :report_id => #monthly_report.id},
:class => 'highlighted_button',
remote: true %>
</td>
</tr>
</table>
<% end %>
controller.rb:
def modify_item
#modified_item = Employee::MonthlyReportItem.find(params[:modified_item_id])
#monthly_report = #modified_item.report
begin
#modified_item.update_attributes!(params[:modified_item])
flash[:notice] = 'Position was updated.'
flash[:warning]=#modified_item.verification_problems if !#modified_item.correct?
redirect_to('/accounts/salary/details', :report_id => #monthly_report.id) and return
rescue Exception => e
flash.now[:error] = "Some of the values are missing or are incorrect. Try again."
end
#render(:partial => 'details') and return
end
modify_item.js.erb: (tried didn't succeed)
//$("#salary_popup").html("<%= j(render partial: 'details') %>");
Update: Forgot to mention the exact error which points inside of the if
Couldn't find Employee::MonthlyReport without an ID
Rails goes into details function and tries this:
def details
if params[:item].nil?
#monthly_report = Employee::MonthlyReport.find(params[:report_id])
else
#monthly_report = Employee::MonthlyReport.find(params[:item][:report_id])
end
..
end

Does the hidden field you create have the name attribute? If not trying adding that.

AJAX Fave Button Not Working Rails

I'm trying to allow users to favorite posts and then it show them sort of of interaction through AJAX, but it's not working.
The error I'm getting in the console is:
ActionView::Template::Error (undefined local variable or method `post_item' for #<#<Class:0x007fecb2a3d5f8>:0x007fecb2a357e0>):
The button is being rendered through a partial:
<%= render "shared/fave_form", post_item: post_item %>
Here's the code for the button (shared/_fave_form.html.erb):
<% if current_user.voted_on?(Post.find(post_item)) %>
<%= link_to "unlike", vote_against_post_path(post_item.id), :remote => true, :method => :post, :class => "btn") %>
<% else %>
<%= link_to "like", vote_up_post_path(post_item.id), :remote => true, :method => :post, :class => "btn") %>
<% end %>
Here's the toggle.js.erb file:
$("#fave").html("<%= escape_javascript render('fave_form') %>");

When you render the partial using toggle.js.erb it is not getting locals value post_item, you have to provide it in also.So, your js code should be something like following
$("#fave").html("<%= escape_javascript(render :partial=>"fave_form", locals: {post_item: post_item}).html_safe %>);
I guess you are using some ajax call and then your toggle.js.erb so in your toggle action you must specify value to post_item, lets make it instance variable #post_item so that we can use it in toggle.js.erb.
$("#fave").html("<%= escape_javascript(render :partial=>"fave_form", locals: {post_item: #post_item}).html_safe %>);

The partial is using a local variable, so pass post_item as a local:
<%= render :partial => "shared/fave_form", :locals => {post_item: post_item} %>

rails: accessing a non-instance variable in js.erb

I have a page that renders multiple forms. Currently, when the user submits any one of these forms, it updates (via ajax) a div on the same page with the content from the form that was just submitted.
I also want to remove() the form element that was just submitted after the ajax post request is completed. However, I need to be able to access that specific form ID within the js.erb file to do so.
Since my page has x number of forms rendered dynamically, I cannot simply access an instance variable in my js.erb.
Page:
<% for peer_review in #peer_reviews %>
<%= render :partial => 'form', :locals => { :peer_review => peer_review } %>
<% end %>
<div id="completed_peer_reviews">
<%= render 'completed_peer_reviews' %>
</div>
The #peer_reviews instance variable contains an array of new PeerReview objects already containing some data.
Form:
<div id="peer_review_form_<%= peer_review.reviewee_id %>">
<%= form_for peer_review, :html => { :method => "post" }, :remote => true do |f| %>
<%= f.error_messages %>
<p>
Peer Review for: <%= User.find(peer_review.reviewee_id).name %><br />
</p>
<p>
<%= f.label :rating %>:
<%= f.select :rating, [1, 2, 3, 4, 5], { :include_blank => 'None' } %>
</p>
<p>
<%= f.label :review %><br />
<%= f.text_area :review %>
</p>
<%= f.hidden_field :user_id, :value => peer_review.user_id %>
<%= f.hidden_field :reviewee_id, :value => peer_review.reviewee_id %>
<%= f.hidden_field :review_period_id, :value => peer_review.review_period_id %>
<p><%= f.submit "Submit" %></p>
<% end %>
</div>
js.erb:
$("#completed_peer_reviews").html("<%= escape_javascript(render('completed_peer_reviews')) %>");
I was hoping to just add another line to the js.erb file that removes the form element that just triggered the execution of the js.erb file like so:
$("#peer_review_form_<%= peer_review.reviewee_id %>").remove();
How should I actually be referencing peer_review.reviewee_id here? Or should I be taking a completely different approach?

This is one of the classic issues of RJS templates.
Quick answer:
If you simply want to solve the problem, you could pass along some temporary id to identify the form. e.g:
# in the index
<% #peer_reviews.each.with_index do |peer_review, i| %>
<%= render :partial => 'form',
:locals => { :peer_review => peer_review, :i => i } %>
<% end %>
# then in the form (note, you don't need to specify POST in a form_for)
<div id="peer_review_form_<%= i %>">
<%= form_for peer_review, :remote => true do |f| %>
<%= hidden_field_tag 'temp_id', i %>
# finally in the create js.erb
$("#peer_review_form_<%= params[:temp_id] %>").remove();
Longer Answer:
That being said, while RJS templates were "the Rails way" for a long time, they've since fallen out of favor.
The more modern method is typically client side JS templates with a JSON API, rather than running server generated JS templates (RJS). This has a lot of advantages, one being that the DOM binding issue you're having right now no longer exists.
This is an example of how you might do this with pure jQuery, but there are many templating options out there.
<script id="peer_review_tmpl" type="text/x-jquery-tmpl">
<div class="completed_peer_review">
<p>${review}</p>
...
</div>
</script>
Then you'd create a handler and bind it to a successful ajax response. This would require that your peer_reviews#create action responded to JSON:
$('form.new_peer_review').bind("ajax:success", function(data) {
// remove the form which triggered the creation
$(this).remove();
// then render the data into a template, and append it to the list
$("#peer_review_tmpl").tmpl(data).appendTo("#completed_peer_reviews");
});

Auto populate a text field based on another text field

I am trying to auto-populate a text field based on the value of another input field. Currently trying to do this using observe_field helper like this:
<%= observe_field(
:account_name,
:function => "alert('Name changed!')",
:on => 'keyup'
) %>
<% form_for(#account, :html => { :id => 'theform' }) do |f| %>
<label for="accountname"> Account name </label>
<%= form.text_field :name, :tabindex => '1' %>
<label for="subdomain"> Subdomain </label>
<%= form.text_field :subdomain, :tabindex => '2' %>
<% end %>
When the user enters text in the account_name text_field, I want to copy that convert into a subdomain (downcase and join by '-') and populate to subdomain text_field.
But, in the process getting this error:
element is null
var method = element.tagName.toLowerCase(); protot...9227640 (line 3588)
Where exactly am I going wrong here? Or is there a better way to do this?

Put your "observe_field" inside the form tag and try again.
EDITED
your observe_field needs to be after the thing it's observing.
Hope that helps :)
For ex:-
<% form_for(#account, :html => { :id => 'theform' }) do |f| %>
<label for="accountname"> Account name </label>
<%= form.text_field :name, :tabindex => '1' %>
<%= observe_field(
:account_name,
:function => "alert('Name changed!')",
:on => 'keyup'
) %>
<label for="subdomain"> Subdomain </label>
<%= form.text_field :subdomain, :tabindex => '2' %>
<% end %>