I have a nested form where an workout has many exercises, and I'm trying to allow the user to delete and add exercises to the form without having to submit the form.
<%= form_for(#workout) do |f| %>
<%= f.label :name %><br />
<%= f.text_field :name %><br />
<%= f.label :description %><br>
<%= f.text_area :description %></br>
<%= f.fields_for :workout_exercises do |workout_exercise| %>
<fieldset>
<%= workout_exercise.text_field :name %>
<%= workout_exercise.hidden_field :_destroy %>
<%= link_to "Remove Exercise", '#', class: "remove_fields" %>
##This is what I want to do ##
<%= link_to 'Remove Exercise', set, remote: true, class: "remove_fields delete", method: :delete %>
</fieldset>
<% end %>
Right now I can make the fields fade out, but to save the change to the DB I need to click the "update workout" button at the bottom of the form. I want the change to take effect as soon as the "Remove Exercise" button is pressed, otherwise, users will think an element has been deleted when it's actually just been hidden.
Any ideas?
Thanks!
I would strongly recommend the Cocoon gem for this. You can add events before and after a nested fieldset is inserted as needed.
Related
I am using a form in a rails application in order to update a record.
<%= form_with model: #article do |form| %>
<%= form.text_field :title %>
<%= form.text_area :body %>
<%= form.submit %>
<% end %>
But I don't want only one "Update" button, I would like 2 buttons (Save and Cancel). How can I do that ?
For a Cancel button, you could use a link_to to redirect to a different page.
<%= link_to 'Cancel', preferred_redirect_path %>
To change the text for the submit you can use the following.
<%= f.submit "Custom Text" %>
I have a model to be fill with a form, consisting of a title and a body of text. Optionally, I want the ability to submit a link as well as a part of this model. If this is filled out, it is submitted, otherwise ignored. The form would have title and body fields at top of page, for instance.
<%= form_for(#micropost, remote: true) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
Now, I want to add the field for the link, but in a different location on the page (so as to indicate that it is optional).
<%= f.text_field :link %>
I tried doing this all in one partial,
<%= form_for(#micropost, remote: true) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
<! insert other content here >
<%= f.text_field :link %>
</div>
<%= f.submit "Post" %>
<% end %>
But this would lead to very messy nesting of partials and I'm not sure how to get this to work correctly. Alternatively, I was wondering if it was possible to have one form_for at the top of the page, and another form_for at the bottom of the page that are somehow "synced", so that by pressing the submit button at the top, the value entered in the bottom form_for is collected and submitted as well.
<%= form_for(#micropost, remote: true) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
<%= form_for(#micropost, remote: true) do |f| %>
<! somehow sync this with the other form >
<%= f.text_field :link %>
<% end %>
One option is to have an auxiliary text field for link attribute. Copy it's value to hidden variable mapping the link attribute
Assuming you are going to use jQuery,
<%= form_for(#micropost, remote: true) do |f| %>
<%= f.hidden_field :link %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
Somwhere on the same page
<%= text_field_tag 'micropost[link]', '', id: 'aux_link' %>
<script>
$(function(){
$('form').on('submit', function(){
$('#micropost_link').val($('aux_link'));
});
});
<script>
This is just an approach. Adjust code as per your form element ids.
One issue with this approach is it will be difficult to validate if link attribute is compulsory.
Just make the form_for be the root of the view
You can just use the form_for like a container div.
Then put the <input> and <button> as you want like making your normal webpage.
Then, because you want to make some inputs optional, you can do that in rails controller.
def create_or_update
params[:micropost].delete(:link) if params[:micropost][:link].blank?
# continue the task
end
This trick is useful for all optional fields like password
I found here that the canonical way to do this is to use the "form" attribute. Give the form an id, from which the field can refer back to the form, even if the field is placed outside of the form. For instance,
<%= form_for(#micropost, remote: true, html: { id: "micropost_form" }) do |f| %>
<div class="field">
<%= f.text_field :title %>
<%= f.text_area :content %>
</div>
<%= f.submit "Post" %>
<% end %>
We can then use fields_for to place the desired field elsewhere, linking back to the original form.
<%= fields_for #micropost do |f| %>
<%= f.text_field :link, form:"micropost_form" %>
<% end %>
I have following two resources:
Position
JobTitle
And a position belongs_to job title.
In page Position, I create new position, with job_title select and some other selects. I need also create new job_title in this page, instead of choose select variants. So, in fact, or I choose job title in existing base, or create new, and save it for this position.
How can I make this? I looking for answer, and reading docs, but nothing!
You need to use fields_for in your view to send params for two models at a time.
Here's how I would try to solve to problem:
<%= form_for #job_title do |f| %>
<%= f.error_messages %>
<p>
<%= f.label :name %><br />
<%= f.text_field :name %>
</p>
<p>
<%= f.label :description %><br />
<%= f.text_field :description %>
</p>
<%= f.fields_for :position do |builder| %>
<p>
<%= builder.label :name %> <br />
<%= builder.text_field :name %>
</p>
<% end %>
<p><%= f.submit "Submit" %></p>
<% end %>
And then, in your controller, you need to create the association. For more information, you can check out the railscast for nested forms.
I want to make a button that will allow me to create a new text_field for :phone_number in addition to the one I already have. For example if I want to submit two phone number instead of one in separate fields how would that be accomplished? In the code below I have begun to make a button_to but am not sure what actions to take in order to make a new field of entry. thanks.
<div>
<%= form_for #reminder do |f|%>
<%= f.label "Your Reminder"%>
<%= f.text_area :text %>
<!-- button here to make new text_field to input in an extra phone number -->
<%=button_to "add another number", %>
<%= f.label "Phone Number" %>
<%= f.text_field :phone_number %>
<%= f.label "When to be sent" %>
<%= f.text_field :time%>
<%= f.label "Picture URL" %>
<%= f.text_field :picture %>
<%= f.label "Favorite?" %>
<%= f.check_box :favorite %>
<%= f.submit %>
<% end %>
</div>
You can accomplish this using JavaScript. Get the id of the button and then add the new input to the page when clicked.
I have an application that I have been working on and have everything wired up to my liking but was wondering if this is possible:
I am displaying a users username in an edit.html.erb template. I want it to display the users username inside of the <%= f.text_field :username, :class=> "uneditable-input" %>. I am using Bootstrap and in the documentation, it states to add a class of uneditable-input, when I hove rover the username text field, it shows a little white stop sign but I am still able to click on the field and edit it. Any help?
<%= render 'shared_partials/errors', errors_object: #user %>
<div class="page-header">
<h2> Edit Your Profile<small> - <%= #user.username %></h2></small>
</div>
<div class="well">
<%= form_for #user do |f| %>
<%= f.label :username %>
<%= f.text_field :username, :class=> "uneditable-input" %>
<%= f.label :password %>
<%= f.password_field :password, :class=> "input", :placeholder=>"Password goes here" %><br/>
<%= f.submit "Update Changes", class: 'btn btn-primary' %>
<% end %>
</div>
Make the field disabled.
<%= f.text_field :username, :class=> "uneditable-input", :disabled => true %>
While submitting the form, browser will not send the value for the field username and thats correct, why it should be sent if it is un-editable.