Hi guys,
is it possible to use Turbo stream with radio buttons? It’s been working great so far with links and button, cause they fire an event, but I’d like to use it with radio buttons as well.
Whenever the radio button is checked, the template that uses Turbo stream should be rendered. Is that possible without writing an extra ajax request?
Best Regards
You can either hide/show the turbo-frame with the radio button and Lazy Load the Frame or use a stimulus controller to update a frames source.
Hiding/showing turbo-frame makes Turbo irrelevant in this case. It’d be easier and there’d be less code if I just use these two radio buttons, use a little JS to hide/show a div and it does the same job. I would’ve hoped that there’s a solution where I can skip JS entirely, because using JS makes Turbo obsolete in this perticular case.
Sorry, I mis-read your original post. You want a radio button to navigate to a URL just like a link or button navigates to a URL?
I’ll be more thorough this time, sorry.
The use-case is like this:
The are two radio buttons. If the user clicks on the first radio button, nothing’s supposed to happen because he admits that he didn’t get any donations. If the user checks the second radio button, the user admints that he received donations and needs to declare them.
These donations are input fields and are on another template.
The radio buttons look like this:
turbo-frame#post-election-head data-action="click->reports#do_not_show_sections"
= radio_button_tag
The template it should render:
turbo-stream action="append" target="post-election-body"
template
span
Basically, yes, the radio button needs to act like a link. It needs to send out a request.
The way to get this working is to treat it as though there was no JavaScript on the page at all. To do that, you would have these two radio buttons inside a single form, with a submit button. The form would submit to the controller, and depending on the choice made in this field (two or more radio buttons that share a name are treated as a single field, with multiple options), something would happen in the application.
So to then treat this with JavaScript, what you want to do is hook the buttons to submit the surrounding form. Long ago, before the war, you could do this with an onChange handler on each button, both set to the same method: this.form.submit(). Then you simply observe the form submission, handle it through an Ajax request, and take the return value as your decision point – redirect or not. Both options submit, and the controller on the server figures out what to do next.
Walter
I agree with @walterdavis suggestion to make the page work without javascript (turbo, or any other JS library), then enhance the experience with JS.
Otherwise, to answer your original question… without a submit button in this scenario, Turbo does not provide this functionality out-of-the-box. You would need to add some stimulus or other javascript.
I see. Thank you both for helping me out! Much appreciated!