0

I want something quite simple for my Rails app: a javascript must be run only if one of the previous radio buttons was checked. What I want exactly is that the user has different radio buttons shown to him, with no default checked. When he clicks on a "Run" button, below the radio buttons, two cases:

  • the user checked a radio button, then the javascript is run (a div is hidden, and another one is shown)
  • the user didn't check a radio button, nothing happens (even more: the browser tells the user that he must checks a radio button, but that is easily done with a :required => true option in the radio button)

The code I tried:

HTML.erb code

<%= form_with(model: @pdfrequest, local: true, html: {class: "form-group"}) do |f| %>

    <%= f.radio_button :my_param, 'option1' %>
    <%= label :opt1, 'option1', :value => 'option1'%>

    <%= f.radio_button :my_param, 'option2' %>
    <%= label :opt2, 'option2', :value => 'option2'%>

    <div class="row mb-3">
        <div class="col", id="to_hide">
            <%= submit_tag "Run", id: "upload_button" %>
        </div>
    </div>

    <div id="to_show">
        <p>Show me!</p>
    </div>

<% end %>

I only managed to get the code working on click, no matter if the form is filled or not.

jquery code

$(document).on("click", "#upload_button", function() {
    $("#to_show").show();
});

$(document).on("click", "#upload_button", function() {
    $("#to_hide").hide();
});

The jquery code is located in my application.js in the assets folder.

I would expect something like this, located in the same file as the html code I provided:

Expected answer

<% if form_with.filled %>
    $(document).on("click", "#upload_button", function() {
        $("#to_show").show();
    });

    $(document).on("click", "#upload_button", function() {
        $("#to_hide").hide();
    });
<% end %>

I found some other questions closely related to this issue, but every time, the condition was a "simple" condition on an object, but not linked to the form itself.

I'm using Rails 5.2.3 and jquery 3.2.1

Thanks.

EDIT

Thanks to this question: Find out whether radio button is checked with JQuery?, I made some progress.

HTML.erb code

<%= form_with(model: @pdfrequest, local: true, html: {class: "form-group"}) do |f| %>

    <%= f.radio_button :my_param, 'option1', :id => 'button_check' %>
    <%= label :opt1, 'option1', :value => 'option1'%>

    <%= f.radio_button :my_param, 'option2', :id => 'button_check' %>
    <%= label :opt2, 'option2', :value => 'option2'%>

    <div class="row mb-3">
        <div class="col", id="to_hide">
            <%= submit_tag "Run", id: "upload_button" %>
        </div>
    </div>

    <div id="to_show">
        <p>Show me!</p>
    </div>

<% end %>

jquery code

$(document).on("click", "#upload_button", function() {
    if($('#button_check').is(':checked')) {
        $("#to_show").show();
    }
});

$(document).on("click", "#upload_button", function() {
    if($('#button_check').is(':checked')) {
        $("#to_hide").hide();
    }
});

So now, it doesn't execute the jquery when no button is checked, but even if a radio button is checked, it's not executed but I couldn't figure out what I did wrong.

victorfink
  • 343
  • 4
  • 17
  • You can switch it around: `.on("click", function() { if (!form.filled) return ...` – freedomn-m Oct 23 '19 at 14:53
  • What needs to be filled out? I only see two radio buttons in your form, can you clarify what you mean by the form being filled? – Rockwell Rice Oct 23 '19 at 14:53
  • Sorry I edited my post, when I said: "the form is filled", I meant that one of the previous radio buttons was checked. – victorfink Oct 23 '19 at 14:57
  • @freedomn-m thanks for your answer. I see what you mean, that could also do the trick for me. Unfortunately, I have no clue on how to check if the form is filled (or radio buttons checked) in jquery. – victorfink Oct 23 '19 at 15:02
  • https://stackoverflow.com/questions/2272507/find-out-whether-radio-button-is-checked-with-jquery – freedomn-m Oct 23 '19 at 15:08
  • @freedomn-m thanks, I don't know how I got past this question... I implemented some changes and edited my question. I couldn't make it work correctly. – victorfink Oct 23 '19 at 15:29
  • Look at the *rendered* HTML to see if it matches what you're expecting. – freedomn-m Oct 23 '19 at 15:37
  • Make sure jquery isn't being loaded twice (the framework may have an additional jquery at the bottom of the body) – freedomn-m Oct 23 '19 at 15:37

1 Answers1

0

Your second attempt is closer, but in order to execute both radio buttons would have to be checked since they have the same id. Try adding a name field and using this:

if($("input:radio[name='name_here']").is(":checked")){

}

This will return FALSE if all the items in the inputs are unchecked and TRUE if an item is checked.

KGreene
  • 790
  • 7
  • 11
  • This works fine, thanks. For any other readers: you should know that when changing the name attribute of your radio_button, it will change the name of the parameter name. So when calling the new parameter : params[name_here] will work. – victorfink Oct 23 '19 at 16:32