How to make form fields to display placeholder text?

I'm working on a project management app that is organized into 3 panes:

Project list | Task list | Task details

views/_sidebar: has a form to create projects
projects#show: has a form to create tasks as well as forms to create project details
tasks#show: has a form to create tasks as well as forms to create task details

The problem this caused was that the forms worked fine to create new records, up until records were created.

root
https://www.screencast.com/t/wcWMfdlW

• project form posts as expected

projects#show
https://www.screencast.com/t/VbhQO3PbTpQ

• project form now patches rather than posts
• task form posts

tasks#show
https://www.screencast.com/t/qLEjgQkY1u

• both project and task forms patch rather post

Someone on SO helped me fix this by having me assign new objects using the existing object attributes, forcing the forms to post.

# Tasks Controller
def show
   @projects = Project.all
   @project = Project.find(params[:project_id])
   @task = Task.find(params[:id])
   @new_task = Task.new(title: @task.title)
   @tasks = @project.tasks.all
end

# ...

#Form
<%= form_for([@project, @new_task]) do |f| %>
    <%= f.text_field :title %>
    <%= f.submit %>
<% end %>

Now the forms post which is great, but they're pre-populated with current values which isn't great.

I need to find a way to clear the forms so they always display the "New Project" and "Add a Task" placeholders.

Any ideas on how I might accomplish this?

I'm open to changing the @new_task hack if there's a better way to control the forms.

Hey Adrian,

Setting a placeholder for the form fields are relatively straight forward. Taking your example form code you can do this:

<%= form_for([@project, @new_task]) do |f| %>
    <%= f.text_field :title, placeholder: "Your placeholder text here" %>
    <%= f.submit %>
<% end %>

This should give you what you need, but if for some reason I'm not understanding the full scope of the problem please let me know and I'll help where I can.

Cheers,
-shakycode

Hey shaky, I already have placeholders defined, they show when there's no current values pre-populating them. The problem is once I'm on projects#show or tasks#show when the values override the placeholders.

I'd have to tinker with the code to see what I could come up with... but if you just want a quick fix, you could always use jquery to replace the placeholder based on whatever controller / action / view you want...

$('#your_text_field').attr("placeholder", "Whatever you want based on this controller / action / view");

Hi Aidan,
Give me a sec just rewriting this post :) I can see what your issue is.

Great thanks Alan!

Jacob, I've tried jquery with no luck, but will keep this in my back pocket in case I need to give it another shot.

Could you share how you tried to impliment it? In my minds eye, the implimentation would be rather hacky, but would work if you need a quick fix that you can later come back and improve as you have time.

something like this should work:

<%= content_for :footer_js do %>
  <script>
    <% if params[:controller] == 'projects' && params[:action] == 'show' %>
      $('#input_field_1').attr("placeholder", "Placeholder text for projects show view");
    <% elsif params[:controller] == 'tasks' && params[:action] == 'show' %>
      $('#input_field_1').attr("placeholder", "Placeholder text for tasks show view");
    <% end %>
  </script>    
<% end %>

You would then need to have a <%= yield :footer_js %> placed at the bottom of your main layout.

Oh, and you would need to place the content_for snippet above into the form partial that you call for your views.

As another thought - you might actually be up against the value, not placeholder - if my previous suggestion doesn't make a difference, you should be able to change the above to update the input value instead of placeholder... ie

$('#input_field_1').val("Text for tasks show view");

Again, this is very hacky and I wouldn't suggest it long term - but if you just need it to work for the time being, it should be alright.

Thanks so much for your help Jacob, this worked perfectly!

I agree this is all very hacky, hopefully I'll be able to come around and improve on it in the future. But for now I can check it off my list.

Ok back, sorry about this got dragged off onto some other tasks haha.

Any how looking at how the data is loaded it seems that item is getting prepopulated when you load yo the show.

Ideally what you want to do is not load that item on that textbox and only highlight one of the selected projects, and have the new task seperate. So when you click add project (the + icon) it takes the name from that box and creates a new project.

This would be the same for the task too.

I have it in my head, and may not have explained it properly haha but hopefully you can get an idea of what i am talkign about.

Thanks Alan, but not sure I understand. But since this is just a prototype / practice project I'll have to revisit this when I have a bit more experience :)

haha no problems mate ill see if i can get a sample togeher using your screens to try show what i mean.