What is the best way to prevent input unless a radio button has been selected?

I am relatively new to Javascript and struggling with a seemingly simple issue. I can't seem to pinpoint where I am making a mistake.

My goal is to disable two input fields unless the radio button with the id "custom" is selected.

Sample HTML Code

<input type="radio" name="period" value="week" /> Weekly
<input type="radio" name="period" value="fortnight" /> Fortnightly
<input type="radio" name="period" value="month" /> Monthly
<input type="radio" name="period" value="quarter" /> Quarterly
<input type="radio" name="period" value="year" /> Annually
<input type="radio" name="period" id="custom" value="one-time" onchange="datedis()"/
<input type="date" name="from" disabled /> to <input type="date" name="to" disabled />

Javascript Sample

function datedis() {
    if(document.getElementsById("custom").checked) {
        document.getElementsByName("from").disabled = false;
        document.getElementsByName("to").disabled = false;
    } else {
        document.getElementsByName("from").disabled = true;
        document.getElementsByName("to").disabled = true;
    }
}

Here is the source code on JSFiddle.

Answer №1

Here are several issues to address:

  1. It is recommended to use onclick instead of onchange when assigning event handlers to radio buttons. Also, ensure that the handler is assigned to all radio buttons, not just one specific option. Otherwise, clicking away from a specific option may not disable the input field as intended. For more information, refer to: OnChange event handler for radio button (INPUT type="radio") doesn't work as one value

  2. The correct method is getElementById, not getElementsById.

  3. There is no function called document.getElementByName.

  4. In jsfiddle, it is better practice to define a function using window.foo = function() {...}, rather than simply using function foo() {...}. This adjustment ensures proper embedding within the onload section.

For Your Consideration: http://jsfiddle.net/MEsGH/

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

Simple steps to access a feature on an AngularJS application

I have my angular application stored in a variable (initialized with:) var app = angular.module('app', [...]); Now, I need to access the $timeout service. How can I retrieve this service from it? I am looking for something like: var timeout ...

Can the appearance of the model be adjusted when using the GLTF or GLB format in Three.js?

Initially, I encountered an issue where my model appeared completely black. Although some sources suggested it was due to lighting, adjusting the light did not improve the model. Ultimately, I discovered that the problem lied within the model itself, and I ...

Having trouble retrieving data from one object nested within another object?

Here is the specific data that I am referring to [ { "id":1, "date":"2020-01-02", "start_time":"11:32:25", "end_time":"11:32:26", "edit ...

What is the process of unmounting the next/script on page change within a next.js application?

Is there a way to load a script only on specific pages? Next.js suggests using next/script tag for this purpose. However, I noticed that even when navigating to different pages, the script remains visible at the end of the HTML body. https://i.sstatic.net ...

Unusual conduct when employing basic directive for validation messages

Within my code, I have implemented the following directive: App.directive("validateMsgFor", function(){ return{ templateUrl : "view/templates/validateMsgFor.html", restrict: "E", scope: { field : "=" } ...

What could be the reason my code isn't successfully performing addition within the input field?

As a novice, I am practicing by attempting to retrieve a number from a text field, prompting the user to click a button that adds 2 to that number, and then displaying the result through HTML. However, I keep encountering an issue where NaN is returned whe ...

How can I pass the data-attribute ID from JavaScript to PHP on the same index page using ajax?

I am struggling with the title for this section. Please feel free to modify it as needed. Introduction: I have been working on setting up a datatables.net library server-side table using JSON and PHP. Most of the work is done, but I am facing challenges w ...

Ways to eliminate a value once a checkbox is deselected

I am currently developing a search box that includes three separate fields which will be populated with data using AJAX based on the user's selection. Here is the HTML structure I have implemented: <div id="states"> <input type="checkbo ...

Displaying an image on canvas while showing a loading progress bar

I'm attempting to utilize this function to load an image into my canvas: function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { var img = new Image(); // img.onprogress = function (e) { ...

Arranging items by specific criteria in ng-repeat for a personalized sorting experience

Within my controller, I have an object named $scope.addresscards. The JavaScript code is provided below: var myApp = angular.module('myApp', []); function MyCtrl($scope) { $scope.addresscards = { "work_address": { "location":"w ...

Is there a way for me to generate a custom subtype of Error that can be thrown?

I am attempting to create my own custom error in order to handle it differently when catching it. I want to be able to call if(instanceof DatabaseError) and execute my specific handling logic. export class DatabaseError extends Error { constructor(...a ...

"Error encountered while trying to perform a JavaScript _doPostBack

In my asp.net application, I have an HTML table where each td element has a unique id. When a td element is clicked, I use JavaScript to store the id in a hidden field. After that, I attempt to trigger _doPostBack from JavaScript to utilize the hidden fiel ...

Displaying and concealing a <div> within a list item

Although I know this question has been asked and answered numerous times, for some reason my code just won't cooperate. I'm attempting to make a div display on click inside an "li" element and remain hidden until clicked again, but the functional ...

Utilizing TypeORM to selectively choose data in OneToMany relationships

I am looking to create a TypeORM query that pulls data from the database. Specifically, I want to retrieve all clients who have made a purchase but have not initiated a return. Here is the structure of the database: Clients: Id (Int, primary column) Purc ...

Easily transform checkboxes into images using jQuery with no need for external plugins

Is it possible to replace checkboxes with images without using jQuery plugins? I'm hoping to achieve this in just a few lines of code. Thank you. ...

Guide on how to prevent Paste (Ctrl+V) and Copy (Ctrl+C) functionalities in a TextField within MaterialUI

Is there a way to restrict the Paste (Ctrl+V) and Copy (Ctrl+C) functions in a specific TextField within MaterialUI? I am currently working with ReactJs ...

Struggling to access FormData in php

I'm having trouble retrieving variables from FormData in PHP after making an AJAX call. What could be causing this issue? Here is the snippet of my JavaScript code: var sendData = new FormData(); sendData.append('itemid',$('select#sel ...

interactive division element

I'm facing an issue with making my div tag clickable in a five-star rating system. The stars are supposed to represent different values from 1 to 5. Even though the image changes on mouseover, clicking the div tag does not yield any result. This is ...

Validating forms using Ajax, Jquery, and PHP, with a focus on addressing

I am currently working on processing a form using AJAX, jQuery, and PHP. However, I have encountered a 404 error while doing so. I tried searching for a solution before posting here but unfortunately couldn't find one. Below is the content of my .js f ...

You must include an argument for 'model' in the Angular service

My service requires an id parameter for a route, but when I tried to access the route with the id, I encountered the error mentioned above. Any suggestions on how to resolve this issue? https://i.sstatic.net/FEcqo.png #request const apiBaseUrl = `${envir ...