Choosing a radio button based on the stored value within a variable

Question

Choosing a radio button based on the stored value within a variable

When transferring a variable (active) from my route to EJS, I initially found it easy to simply display its value:

<!-- Active Text Input-->
<div class="form-outline mb-4">
   <label for="active" class="form-label">Active</label>
   <input type="text" name="active" id="active" class="form-control" value= "<%= active %>"/>
</div>

However, considering the limited options for "active" being either "Yes" or "No", I'd prefer to utilize a radio button instead:

<!-- Active Radio Button-->
<div class="form-outline mb-3" id="activeRadioButton">
   <label class="form-label">Make User Active?</label>
   <div class="activeUser">
      <input type="radio" id="activeYes" name="active" value="Yes">
      <label for="activeYes" class="form-label">Yes</label>
      <input type="radio" id="activeNo" name="active" value="No">
      <label for="activeNo" class="form-label">No</label>
   </div>
</div>

The challenge arises when attempting to automatically select the appropriate button based on the passed-in value. Is there a solution to achieve this functionality?

javascript express ejs

Answer 1

Answer №1

To control the attribute checked of the input type=radio, you can use the following expressions:

Visit this link for more information on the checked attribute.

For the radio button expecting the value Yes, use this expression:

<%= active === 'Yes' ? 'checked' : '' %>

And for the radio button expecting the value No, use this expression:

<%= active === 'No' ? 'checked' : '' %>

This is the complete block of code:

<div class="form-outline mb-3" id="activeRadioButton">
   <label class="form-label">Make User Active?</label>
   <div class="activeUser">
      <input
        type="radio"
        id="activeYes"
        name="active"
        value="Yes"
        <%= active === 'Yes' ? 'checked' : '' %>
      >
      <label for="activeYes" class="form-label">Yes</label>

      <input
        type="radio"
        id="activeNo"
        name="active"
        value="No"
        <%= active === 'No' ? 'checked' : '' %>
      <label for="activeNo" class="form-label">No</label>
   </div>
</div>

Here's a live snippet demonstrating the checked behavior on two groups of radio buttons:

<div>
  <input
    type="radio"
    id="activeYes"
    name="active"
    value="Yes">

  <input
    type="radio"
    id="activeNo"
    name="active"
    value="No"
    checked>
</div>
<hr>
<div>
  <input
    type="radio"
    id="activeYes2"
    name="active2"
    value="Yes"
    checked>

  <input
    type="radio"
    id="activeNo2"
    name="active2"
    value="No">
</div>

Answer 2

To control the attribute checked of the input type=radio, you can use the following expressions:

Visit this link for more information on the checked attribute.

For the radio button expecting the value Yes, use this expression:

<%= active === 'Yes' ? 'checked' : '' %>

And for the radio button expecting the value No, use this expression:

<%= active === 'No' ? 'checked' : '' %>

This is the complete block of code:

<div class="form-outline mb-3" id="activeRadioButton">
   <label class="form-label">Make User Active?</label>
   <div class="activeUser">
      <input
        type="radio"
        id="activeYes"
        name="active"
        value="Yes"
        <%= active === 'Yes' ? 'checked' : '' %>
      >
      <label for="activeYes" class="form-label">Yes</label>

      <input
        type="radio"
        id="activeNo"
        name="active"
        value="No"
        <%= active === 'No' ? 'checked' : '' %>
      <label for="activeNo" class="form-label">No</label>
   </div>
</div>

Here's a live snippet demonstrating the checked behavior on two groups of radio buttons:

<div>
  <input
    type="radio"
    id="activeYes"
    name="active"
    value="Yes">

  <input
    type="radio"
    id="activeNo"
    name="active"
    value="No"
    checked>
</div>
<hr>
<div>
  <input
    type="radio"
    id="activeYes2"
    name="active2"
    value="Yes"
    checked>

  <input
    type="radio"
    id="activeNo2"
    name="active2"
    value="No">
</div>

Choosing a radio button based on the stored value within a variable

Answer №1

Similar questions

What is the best way to have my sliding panel automatically close when I click outside of it?

Watch the Newest Vimeo Showcase Reel

Carousel-Owl, glide through two items simultaneously

The return value cannot be retrieved from a promise function in Node

Data retrieval seems to be encountering issues in Firefox and IE9, whereas Chrome and Safari are functioning without any problems

Tips for showcasing a drop-down menu using Jquery

Optimal layout for a messaging app: MongoDB reigns supreme

What's the best way to loop through each touch event property within the TouchList of a touch event using JavaScript?

Guide to configuring the API key within the Stampery API.JS script

Is it possible to create a development build using Npm with React and Typescript?

Tips on setting an expiration time for verification codes in a Node.js environment

Running into memory issues while constructing the heap

Pattern in Express.js that matches the remaining part of the URL path

CookieSession in Express.js is successfully integrated with Passport, however, the maxAge parameter seems to be malfunctioning

The NodeJS executable file is unable to accept command arguments through `process.argv`

Is there a reason to not simply reset the connection to the $.ajax?

Script execution in '<URL>' has been prevented due to sandboxing of the document's frame and the absence of the 'allow-scripts' permission setting

Despite my efforts, Express.js continues to serve the static index.html file for my React app, even when I specifically do

Customizing line charts with D3.js and AngularJS for ultimate visual impact

Store in database and forward to a different web address