Implementing JavaScript functionality to read and interact with a Boolean field in a

Question

Implementing JavaScript functionality to read and interact with a Boolean field in a

Within my models.py file, I've defined the following:

urgency = models.BooleanField(blank=True, default=False, verbose_name="Hitno otklanjanje")

I am attempting to execute a javascript function that will modify a text field based on whether the Boolean field is set to 'True' or 'False'. However, I'm encountering an issue where I am unable to retrieve the value. Whenever I utilize

document.getElementById('id_urgency').value;

, it consistently returns 'on', regardless of whether the checkbox is checked or not. What could be causing this? Am I misinterpreting the value?

<script type="text/javascript">
     function makeReadOnly()
         {
          var a = document.getElementById('id_urgency').value;
          console.log(a);

          if (document.getElementById('id_urgency').value == 'True'){
              document.getElementById('id_date_days').readOnly = true;
         }else if (document.getElementById('id_urgency').value == 'False'){
              document.getElementById('id_date_days').readOnly = false;
          }
         }
     document.getElementById('id_urgency').addEventListener('change', makeReadOnly);

This code snippet is part of a Django form. Upon inspecting the page, I noticed that the Checkbox element does not have a value assigned to it. Why might this be the case?

input type="checkbox" name="urgency" class="checkboxinput form-check-input" id="id_urgency"

javascript django forms

Answer 1

Answer №1

When utilizing the .value method, you retrieve the value associated with a checkbox, not its checked state.

To determine if a checkbox is checked, you can use:

var a = document.getElementById('id_urgency')<b>.checked</b>;

Alternatively, as mentioned on javascripttutorial.net:

To verify if the accept checkbox is checked, utilize this code snippet:
const cb = document.getElementById('accept');
console.log(cb.checked);
(…)

Fetching the value attribute of a checkbox will always return the string 'on', regardless of whether the checkbox is checked or not. For instance:
const cb = document.getElementById('accept');
console.log(cb.value); // on

Answer 2

When utilizing the .value method, you retrieve the value associated with a checkbox, not its checked state.

To determine if a checkbox is checked, you can use:

var a = document.getElementById('id_urgency')<b>.checked</b>;

Alternatively, as mentioned on javascripttutorial.net:

To verify if the accept checkbox is checked, utilize this code snippet:
const cb = document.getElementById('accept');
console.log(cb.checked);
(…)

Fetching the value attribute of a checkbox will always return the string 'on', regardless of whether the checkbox is checked or not. For instance:
const cb = document.getElementById('accept');
console.log(cb.value); // on

Implementing JavaScript functionality to read and interact with a Boolean field in a

Answer №1

Similar questions

Guide on programmatically concealing a Bootstrap Offcanvas element using JavaScript and Blazor

Error: An uncaught exception occurred when trying to access a seekable HTML5 audio element, resulting in an IndexSize

Sending arrays' values in JavaScript

Troubleshooting type casting issue in Typescript when working with objects containing getters and setters

Can the combination of a JavaScript frontend and NodeJS backend function effectively together in this scenario?

Retrieve attributes of an html element modified by AJAX request

Error loading Azure Active Directory web form: Server returned a 401 status code for the requested resource

Is it possible to import a class from a different project or module in TypeScript?

Leveraging the TMDb API within the Django Web Framework to fetch movie posters stored in a database

Insert a new store into an existing IndexedDB database that is already open

Safely transmitting client-side encrypted information between individuals

No default export function available on this page

What is the difference in memory usage for JavaScript objects between Node.js and Chrome?

Transferring PHP and JavaScript variables via AJAX to PHP page and storing in MySQL database table

Extracting data from JSON array

Steps for setting the value of a textbox within a bootstrap popover

What is the most effective way to assess if two JavaScript arrays contain the same values?

Showing a database table in an HTML format using JavaScript

Tips for displaying consecutive information from a Sequelize query with associations in Node.js

Error receiving by React while updating an array with setState() in TypeScript