Issue with Inline forms in Ruby on Rails/HTML: The 'checked' attribute with the value of 'false' is

Desired Setting: I am trying to set the default option for this form to be "No" (or false), however, when I set it as such, my application loads with no option selected.

When I use :check => true, the default option selected becomes "Yes" (or true). I attempted to switch it to false and move it to the No option, but it did not work as expected.

Snippet of Code:

      <div class="form-group">
            <%= label(:store_item, :can_be_shipped, 'Can be Shipped?')%>
            <div class="form-inline">
            <div class="radio inline">
                <%= radio_button(:store_item, :can_be_shipped, true)%>
                <%= label(:store_item, :can_be_shipped, 'Yes', :value => true)%>
            </div>
            <div class="radio inline">
                <%= radio_button(:store_item, :can_be_shipped, false)%>
                <%= label(:store_item, :can_be_shipped, 'No', :value => false, :checked => false)%>
            </div>
          </div>
      </div

What am I missing in order to have the default option checked as "No" (false)?

Your assistance is appreciated.

Answer №1

Did you attempt setting :checked => true in the 'No' label?

<%= label(:product_item, :available_for_pickup, 'No', :value => false, :checked => true)%>

Answer №2

It appears that you have set :checked => true in the label, but this attribute should be set on the radio_button instead.

If you want the default option for this form to be "No," the correct code should be:

<div class="form-group">
  <%= label(:store_item, :can_be_shipped, 'Can be Shipped?')%>
    <div class="form-inline">
      <div class="radio inline">
        <%= radio_button(:store_item, :can_be_shipped, true)%>
        <%= label(:store_item, :can_be_shipped, 'Yes', :value => true)%>
      </div>
      <div class="radio inline">
        <%= radio_button(:store_item, :can_be_shipped, false, :checked => true)%>
        <%= label(:store_item, :can_be_shipped, 'No', :value => false)%>
      </div>
    </div>
</div>

This will create a form with "No" as the default checked option:

https://i.sstatic.net/1wwMR.png

You can view an example of the input type checkbox with the checked html5 attribute on w3schools.

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

What is the best method for saving HTML form data into a Node JS variable?

I am facing an issue with setting the values of HTML form inputs onto my Node JS variables. In the JavaScript code below, I am struggling to assign values to the variables "hostname" and "port," which should then be concatenated to create a new variable ca ...

Animating distance with the power of animate.css

I have implemented animate.css for a login form, but it is not behaving as desired. Currently, I am utilizing the fadeInDown animation, however, it is fading in from a greater distance than intended. I would prefer it to fade in from just around 20px below ...

Arrange the divs in a horizontal line without stacking them vertically, specifically in Internet Explorer 7

I have a fixed container that contains another container with multiple DIVs based on user choices. I want these DIVs to align horizontally to allow for horizontal scrolling, without any vertical scrolling. For example: [x] [x] [x] Here is a simplified ve ...

Finding a specific element within a table using xpath in selenium proved to be a challenge

I am trying to click on a specific button inside a table where each row has an update button. Here is what my table looks like: <table _ngcontent-vhp-c82="" datatable="" id="dtOptionsComments" class="display table tabl ...

Understanding the res.render method in JavaScript can be a bit tricky at first

In my spare time, I have been immersing myself in coding lessons and have encountered some puzzling aspects of the code: Firstly, there is a confusion surrounding the action attribute in HTML Secondly, this particular piece of code is causing me some b ...

Using Javascript to trigger a setTimeout function after the user's mouse leaves

There is a div that pops up when the user's mouse exits the webpage, containing a survey pertaining to my website. I want to avoid prompting users to take the survey if they move their cursor out of the page within the first few minutes of browsing. ...

What is the process of dynamically loading CSS into an HTML document?

In my C# program, I am utilizing a web browser control and setting its HTML property programmatically by loading it from an HTML string variable. While this setup works almost perfectly, I have noticed that it loses the reference to the CSS file. I believe ...

Learn how to access an array within an object using JavaScript and an API URL

Trying to fetch data from the swapi API to display film titles using jQuery. Below is the JavaScript code: $(function(){ function promiseTest(){ return $.ajax({ type: 'GET', url: 'https://swapi.co/api/people/', } ...

Learning the art of Javascript programming within the HTML5 realm

Seeking assistance with a JavaScript project - I'm attempting to develop a Bubble Buster game reminiscent of pong, but with multiple bubbles. The goal is to have falling bubbles on screen (roughly 100 in total) in various colors dropping from random l ...

How can I automatically copy a highlighted link in HTML?

I am attempting to implement a feature where users can click on a link and have it automatically copied. For example, I want it to appear like this: "UPI ID: david@okidfcbank". In this case, the link should be highlighted in blue. This is the code I have ...

Does Google's caching process differ when using <span> tags instead of <h> tags for headings?

Does the choice between using <span class="heading"> and <h> tags impact search engine optimization for Google? As I'm constructing a website, I decided to style the headings and subheadings with <span>. However, I began to wonder i ...

Instead of retrieving all associations, the focus will be on providing the total count of

Consider this scenario: an Object comprises numerous properties, while a property is linked to an Object. Currently, this is the established association. However, when I showcase all the objects using Object.all and include the :properties associations, th ...

When selecting filter options, the posts/images now overlap before transitioning into a masonry view upon resizing the window

I have implemented a filter on my posts to arrange them based on popularity, style, and country. Screenshots: Screenshot 1: Everything looks good when the page loads, displaying all posts/images properly in masonry layout. Screenshot 2: Issue occurs whe ...

What is the best way to connect a JavaScript file to an HTML file in an Express app?

I have my NodeJS server set up with Express, utilizing Handlebars as the rendering engine. app.use(express.static(publicDirPath)) (...) app.engine("hbs",hbs({ extname: "hbs", defaultView: "main", layoutsDir: path.join(srcDirP ...

Tips for restricting text within a div container

Currently, on my to-do list website, I am facing an issue with displaying long event titles in a div on the home screen. The text overflows, and even though I have set the x-overflow to hidden, it's not providing the desired result. I have tried using ...

What is the best way to create a @mixin incorporating variables to easily reference breakpoints using custom aliases?

Currently in the process of constructing a website using SASS coding, I have created several @mixins for Media Queries that will be utilized later with the @include directive. The structure of these mixins is as follows: _standards.sass // Media queries @ ...

The ongoing calculation consistently yields a result of zero

This content belongs to the index.php file if(isset($_POST['submit'])) { echo header('Location:answer.php'); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

Employing CSS selectors to target the subsequent element that is accessible

Here is the structure of my HTML: <input type = "checkbox" style = "display:none" id = "select"> <label for = "select" id = 'click'> click </label> <div class = 'next'> </div> I am trying to style t ...

Is there a way to retrieve the modal's viewport height in Angular?

Is it possible to determine the viewport height of my ng bootstrap modal within my Angular application? Here is what I currently have: I have a modal with CSS styling as shown below: .modal-xxl { width: 95% !important; max-height: 90% !important; ...

Customizing content based on Route - Utilizing Node.js/React

I am currently working on setting up routes for different pages of store profiles in my Node app. I have been doing some research online and have come to understand how to adjust the parameters, but I am struggling with figuring out how to dynamically chan ...