Utilizing the checked or clicked property of radio buttons for my specific scenario

Hello everyone, I am currently working on Rails 3.2.13 and have implemented the following script in my view file. Whenever a user selects 'Other' as their owner type, I need the div with id=group_user_id to open and save the operation at the end. Everything was working fine when using f.radio_button.

<div class="form-group">
  Owner:
  <%= f.radio_button :owner_type,"Self", :id=>"self-group", :checked =>true %>
  Self
  <%= f.radio_button :owner_type,"Other",:id=>"other-group" %>
  Others
</div>

<div id="group_user_id" class="form-group">
  <span>
        <%= text_field_tag "account_id", nil, :id => "autocomplete_text", :class => "form-control", :placeholder => "Account Id" %>
      </span> 
</div> 

Javascript code

<script>
$(document).ready(function() {
 $("#group_user_id").hide();
 $("#self-group").prop("checked", true);

$("#other-group").click(function() {
  $("#group_user_id").show();
});

});

Recently, I started using template CSS for radio buttons which caused some issues. Below is the relevant code snippets.

In this scenario, the radio button class square-green single-row is being utilized. The Rails radio button is hidden even though proper ids were provided.

<div class="row">
    <div class="col-sm-2">
      <div class="text-green" style="margin-top: 9px; font-size: 18px;">
        Owner
      </div>
    </div>

    <div class="col-sm-2">
      <div class="icheck">
        <div class="square-green single-row">
          <div class="radio">
            <%= f.radio_button :owner_type,"Self", :id=>"self-group", :checked =>true %>
            <label>Self</label>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-2">
      <div class="icheck">
        <div class="square-green single-row">
          <div class="radio">
            <%= f.radio_button :owner_type,"Other",:id=>"other-group" %>
            <label>Others </label>
          </div>
        </div>
      </div>
    </div>
  </div>

I have also incorporated the following js and css files.

<%= stylesheet_link_tag "css/iCheck/skins/square/green.css" %>
<%= javascript_include_tag "js/iCheck/jquery.icheck.js", "js/icheck-init.js" %>

If you have any suggestions on how to manage radio button interactions such as clicks, checks, and other properties when utilizing template radio buttons, please share. Thank you!

Answer №1

It seems you are looking to specify a class name in the radio_button_tag....

The structure of the radio_button_tag should be as follows:

radio_button_tag(name, value, checked = false, options = {})

You can try using this example:

<%= f.radio_button :owner_type,"Self", :id=>"self-group", :checked =>true, :class=> 'class-name' %>

This will allow the use of the class attribute.

The parameter :checked=>true ensures that the radio button is initially selected by default.

Answer №2

Utilizing a combination of a ruby gem and clever javascript logic, I was able to effectively toggle the visibility of a div. This method proved to be incredibly useful in my project.

In order to implement this, make sure to include the following code in your Gemfile:

gem 'icheck-rails'

Thanks to this gem, adding classes to radio buttons or checkboxes becomes a breeze. Here's an example:

<%= f.radio_button :owner_type, "Self", :id=>"self-group", :class => 'icheck-me', "data-skin"=>'square', "data-color"=>'green' %>

For the javascript part, the script below handles the toggling functionality:

<script>
   $(document).ready(function () {
   $('input').on('ifClicked', function (event) {
     var value = $(this).val();
     if (value == "Other") {
       $("#group_user_id").show(); 
      }
      else if (value == "Self") {
        $("#group_user_id").hide();
      }
    });
 });
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for a list of events in Express.js?

I've been searching through the official documentation, but I couldn't find a list of events for express. Does anyone know if there's something like 'route-matched' so that I can use app.on('route-matched', () => {})? ...

AngularJS nested menu functionality not functioning properly

I am currently working on a nested menu item feature in AngularJS. I have a specific menu structure that I want to achieve: menu 1 -submenu1 -submenu2 menu 2 -submenu1 -submenu2 angular.module('myapp', ['ui.bootstrap']) .cont ...

Managing the creation of a fresh VueJs object with checkboxes enabled for CRUD operations

Hello fellow developers! I am currently working on a shop card project and I'm looking to add a new product to the collection of sale elements. Let's consider the JSON structure retrieved from the backend: "products": [ { "product_prov ...

Current page with animated CSS3 menus

I found a cool menu example on this webpage: http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index10.html. I want to modify it so that the current page's menu item has a different color from the others. For example, when I'm on the home ...

Encountering unhandled promise rejection error with email field in NextJS when using React Hook Form

I am encountering a bizarre issue where, on my form with two fields (name and email), whenever the email field is focused and onSubmit is called, I receive the following error message: content.js:1 Uncaught (in promise) Error: Something went wrong. Please ...

Exploring Sensor Information with Vis.js

In my work with Wireless Sensor Networks, I have been collecting sensor addresses and their corresponding temperature readings in JSON format. The data looks like this: {"eui":"c10c00000000007b","count":0"tmp102":" 0.0000 C"} When it comes to the network ...

Setting up Django-compass2 on my project for the very first time

Here's the issue I'm facing! I'm currently in the process of installing Compass and integrating it into my Django project. You can find the app here. After successfully installing the app using the "pip" command and adding 'djcompass& ...

Removing the currently selected item from the OwlCarousel

I am trying to enable users to delete the item that is currently active or centered in an OwlCarousel. I have come across some code related to deleting items, but it seems to be a rare question: $(".owl-carousel").trigger('remove.owl.carous ...

Seamless transition between fieldsets by selecting radio buttons

I've scoured the internet, but I can't find a solution that fits my needs. Although I'm relatively new to jquery/javascript, I believe what I want to achieve is quite straightforward. There are 2 radio buttons for user selection, and based ...

Is it possible to make the home page of a Next.js app in a subfolder with basePath accessible outside of the basePath?

My Next.js application is running in the '/portal/' folder and basePath has been configured as: module.exports = { basePath: '/portal' } Now, I want the index page of the application to be accessible at the site root (without baseP ...

Challenge with Sequelize Many-to-Many Query

Currently, I am facing an issue with connecting to an existing MySQL database using Sequelize in Node. The database consists of a products table, a categories table, and a categories_products table. My goal is to fetch products, where each product includes ...

The form fails to submit when the page automatically reloads

I have a PHP web application that requires certain variables on this page to be automatically refreshed. To achieve this, I have moved the processing to another page called "test.php", which is loaded into this div every 10 seconds. <script type="text ...

Tips for modifying HTML attributes in AngularJS

I am looking to modify an attribute of a div using AngularJS. While I am familiar with how to do this in jQuery, I am not sure how to achieve it in Angular. Here is the HTML code: <div ng-app="test"> <div ng-controller="cont"> < ...

"Error: Command 'npm' is not recognized as a valid internal or external command" encountered while using create-react-app

Why won't npm work for me? I've been trying to dive into the world of React and kickstart my learning journey. With Node installed, along with the create-react-app package, I thought I was all set. When I run commands like npm -v or create-reac ...

Mastering the Art of Defining SVG Gradients in a Page-wide CSS File

On my HTML page, I have implemented a JavaScript code that dynamically generates SVG elements and inserts them into the HTML page. Currently, all the styling attributes such as fill colors are specified in the CSS of the entire webpage. This approach allo ...

Utilize a function to save the data retrieved from each AJAX request

I am struggling to store accumulated data between ajax calls in an object. Even though I can retrieve the data from each call, I cannot seem to merge it into a single array. To address this issue, I have devised the dataAccumulator() function. The intenti ...

What is the best way to replicate the orange outline when focused?

I am in the process of creating a series of divs that can be navigated by the user using the tab key. I would like to incorporate the standard orange focus outline for these elements. Is there anyone who can provide guidance on how to achieve this? I unde ...

What is the significance of $($(this)) in coding jargon

While browsing the internet, I came across a code snippet that includes the following line: if ($($(this)).hasClass("footer_default")) { $('#abc') .appendTo($(this)) .toolbar({position: "fixed"}); } I'm curious ab ...

What is the correct method for setting a scope variable from a service in Angular?

Is there a way to retrieve the return value from a service method and set it into the scope for further processing in the template? I've discovered that I cannot directly access the scope within services. While I could use Rootscope, I believe there ...

React video recording not displaying in the video element

I'm currently developing a React application that facilitates webcam interviews with candidates. As part of this process, candidates have the option to "Start Again" or "Complete" their interviews. One challenge I am facing is displaying the recorded ...