How to Implement Radio Buttons in a Rails Form to Update Enum Values for the Blog Status
Working with radio buttons is an important skill to have when it comes to building out forms in Rails. In this guide we'll examine how to update the Blog status enum value with a radio button.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Looking down our list we can see the next item is the blog status update in the form. Let me start up the Rails server here and we can walk through exactly what this says. I mentioned in the intro that my personal recommendation was to use a radio button. One, because I think it's probably the most logical. But also, that will give you practice and some example code in how to use radio buttons in Rails. If I switch back here and let's click edit on one of these items right now you're going to see we have the spot for a blog title,our topic and then our content. What we want is to have another little form element here that can allow us to switch between a topic being in draft mode and being in publish mode. We have this ability right here so we can click this and this is going to toggle us from published into draft mode and that's perfectly fine. However, it'd be a bad practice to have something that could be changed and not give users the ability to change it on the form. Let's pop open Sublime Text. Open up the blogs form. I think the best spot for this is going to be right below the topic. I'm going to create another div here...

large

Give it a class of form group and inside of this, we can give some radio buttons. The first thing you need to know for giving radio buttons is the helper name which is going to be f. In this case, the f, just is kind of a quick reminder this f is simply the form block variable it's just our way of being able to use form_for and say that because we said 'f.' It's going to be all wrapped up inside of this form, just as a quick reminder. We're going to say 'f.' Then the form for, form helper. I can say radio_button and this is for the status and we need to now give what this represents. This is the value we're going to pass in as the status and what Rails is going to do is it's going to map this to the draft enum so I can finish that off. That is going to take care of our draft item. The next thing is to add a label because without a label we wouldn't actually know what this is associated with. Here, we can say draft and I'm giving this a capital not only because I think it looks better but also so that you know we could put anything we want here we could put any kind of thing. It doesn't have to map to this. I am simply going to say a draft because it makes sense. I've done things like this with radio buttons. Where it was signing up for a newsletter and I did some draft and 'we won't spam you'. You know something like that. This is our first radio button. Let's come and see if this is working if I hit refresh. There we go! We have a 'draft' radio button. Let's come back and create a published one. As you may guess we can do published here and here. Then I'm going to change this to be capital come back and if I hit refresh we can change it. It's going to be draft or published. This one we know is published so by default Rails picks this up and knows that it's already in the published stage. We could change it to draft and that would change the status. But right now if we try this it will throw an error. The reason is because we have not passed these in as being safe. If I click submit. Oh, hold on one second. Let's see, come all the way back. Notice how nothing changed. Sorry the error is actually silent because of the way Rails is passing it.

Let's come and let's take a look at where the error happened right here in the terminal. The reason why it didn't actually change the form is because you see where it says unpermitted parameter status. This is what got passed in. We tried to pass in a status of draft but, when Rail's saw that it didn't throw an error and the reason is because we don't have an exclamation point on our update action. All it did is it failed silently It didn't stop the actual application but it didn't allow this to be passed through which is kind of Rail's default behavior. Let's switch into our blogs controller and if I scroll all the way down here I can add in status.

large

Hit save come back and now if I click on edit and change this to draft, hit submit. This will be in the draft mode. Click on Rails and you can see that this is a draft as opposed to where it was before. Actually I don't believe that was the right category. Hold on one second. Let's click on blog and yes. Ok, Yes it was I was just on the blog index action I guess. Yeah, this is updated. Let's do it one more time just to make sure it's working. Sometimes having test data like "My Blog Post 8" sometimes it's hard for me to remember the exact blog post I was working on so I throw in these kind of sample ones. Let's change this. If I hit submit and come now to blog. Yes, this is working perfectly. I like that. Let's come back and say git status just to make sure that we only had two files change and that is the case. I can say git commit -m "Added radio buttons for status field for blogs", git push origin final-changes and that is now good to go.

Switching to pivotal tracker let's cross this off the list and let's see what we want to do next. I have some things on the about page I want to move these all the way to the end because I want to save those for last. I like working on the same layout at the same time it just kind of keeps me in a nice zone for knocking these out. I'm going to move these up so they're all together and the 'card design for about and contact'. This would also be considered down here 'markdown integration', this is for blogs. 'Custom font' is going to be for all of them but we'll save this for the very end. 'Breadcrumb on the blog show page' that is also going to be here. 'Source tracker' is going to be blog and portfolio. 'Icons for actions', this is going to be here. 'Partial for admin blog actions', is you can see a majority of these items are going to be for the blog. That is going to be right there. 'New blog header' which is really the nav system. Ok, this is definitely a part of the project management side of the course and also just the kinds of things that you'll do as you're building out applications. Usually, I save this kind of thing for off-screen. For this course, though I wanted to give you the exact type of process I would follow. This is exactly what I would do if going through a project like this I would continually be checking out my list of each one of the to-do items I'd be seeing how they fit together, how I could build them and be as efficient as possible as I'm doing it and a part of that is organizing the tasks into the kind of categories where I can be working on the right layout at the same time. That is everything we need to do there. In the next guide, we're going to walk through how to implement a markdown integration which is going to allow us to do things such as, when you click on the blog show page we're going to be able to have things such as indentation, as being able to add code elements, to have subheadings, paragraphs, links, pictures all that kind of good stuff. We're going to see how we can integrate that all in the next guide.

Resources