Deactivate a button based on a particular selection in a drop-down menu

Can anyone help me troubleshoot a small issue with my Dojo code? I want to disable a button if the value selected from a dropdown matches a specific value. What am I missing in my implementation?
Example

var myCode = "CC";

dojo.addOnLoad(function() {
    dojo.connect(dojo.byId('#codes'), "onchange", function(evt) {
        var selCode = this.val();
        if (selCode == myCode) {
            dojo.attr('#submit', disabled);
        }
        dojo.stopEvent(evt);
    });
});

<select name="codes" id="codes" class="codes">
    <option selected="selected" value="">Select Below</option>
    <option value="AA">AA</option>
    <option value="BB">BB</option>
    <option value="CC">CC</option>
    <option value="DD">DD</option>
</select>
javascripthtmlcssdojo

Answer №1

There are a couple of concerns here: 1. Dojo does not utilize CSS selectors in the specified manner, so avoid using #. 2. When utilizing the attr function for your intended purpose, you need to provide three parameters: id/dojoObj, attribute name, and attribute value.

let myCode = "CC";    
dojo.addOnLoad( function() {
   dojo.connect(dojo.byId('codes'), "onchange", function(evt) {
      if(this.value == myCode){
         dojo.attr('submit', 'disabled', 'disabled');
      }
      dojo.stopEvent(evt);
   });
});

Answer №2

While I may not be familiar with Dojo, it seems like you are attempting to utilize jQuery methods .val() and .attr(), unless Dojo offers similar functions (which I couldn't find documentation for).

If you were to switch from the library code to the native API, the process would look something like this:

var myCode = "CC"; 

dojo.addOnLoad(function() {
     dojo.connect(dojo.byId('#codes'), "onchange", function(evt) {
         var selCode = evt.target.options[evt.target.selectedIndex].value;
         if(selCode == myCode){
             document.getElementById('submit').disabled = true;
         }
         dojo.stopEvent(evt);
     });
});

Example: http://jsfiddle.net/BmSjb/21/

EDIT: Taking into account the comment mentioned below, the objective is to toggle based on a matching selection.

var myCode = "CC";

dojo.addOnLoad(function() {
    dojo.connect(dojo.byId('#codes'), "onchange", function(evt) {
        var selCode = evt.target.options[evt.target.selectedIndex].value;
        document.getElementById('submit').disabled = (selCode == myCode);
        dojo.stopEvent(evt);
    });
});

Example: http://jsfiddle.net/BmSjb/32/

Now, the .disabled property will reflect the outcome of selCode == myCode; hence, when true, it will be disabled, and when false, enabled.

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

Compiling and rendering HTML code from a file with AngularJS

Here is the custom directive code that I have created: angular.module('app.directives', []).directive('userHeader', ['authService', '$compile', function(authService, $compile) { return { restrict: 'AEC&ap ...

javascripthtmlangularjs

How to access a variable from within a Phonegap DB function and return it outside of the

I'm struggling with a phonegap db JavaScript script that isn't returning the final string variable "feeds" outside the function. It's currently showing as "undefined". I need help making the necessary changes to properly return the "feeds" v ...

javascriptjqueryhtmlsqlitecordova

Issue with displaying tooltip on jQuery select2 in Bootstrap 3

I am customizing my selectbox with the select2 plugin. I now want to display a tooltip above the selectbox. Here is the HTML code: <select class="selectD input-sm" name="newsoptions_amount" data-toggle="tooltip" data-placement="bottom" title="Gallery ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Reasons why Custom CSS won't function simultaneously with Bootstrap 5

I recently designed a dashboard using bootstrap 5. While working on this project, I found myself in need of a custom CSS style in addition to the default bootstrap styles. However, I encountered an issue where my custom CSS would not apply properly unles ...

htmljquery-uicss-selectorsbootstrap-modalbootstrap-5

Although sanitize and raw display HTML tags, Slim remains unaffected

I have a dataset with HTML content that I want to display without any tags. Currently, I am working with Ruby on Rails (RoR) and Slim templates. I've experimented with sanitize, raw, and html_safe, but none of them fully removed all the HTML tags. ...

htmlruby-on-railsslim-lang

Exploring the method to search across various fields in Vue.js 2

In my Vue.js 2 application, I am attempting to search or filter through three fields: firstname, lastname, and email. Unlike Vue 1, Vue 2 does not include a built-in filter method. As a result, I have created a custom method that can only filter through on ...

javascriptvue.jsvuejs2vue-component

Date input using manual typing format

I've implemented the ng-pick-datetime package for handling date selection and display. By using dateTimeAdapter.setLocale('en-IN') in the constructor, I have successfully changed the date format to DD/MM/YYYY. However, I'm facing an iss ...

javascriptangulartypescriptdate

Mixing various templates into a single outlet in ember.js

I have been working on an ember application that allows users to create, edit, and delete users, as well as view a list of all users. The app was created by following a tutorial on Ember (as I am still learning), but I am facing an issue. Currently, all th ...

javascripttemplatesember.js

What is the best way to modify a particular h4 tag without impacting the rest?

Hey everyone, I'm re-uploading this post because I realized my previous explanation was unclear. I apologize for that and have deleted the old post. I am seeking to make some edits: <div id="viewer_viewer_container" style="display: block;"> ...

javascriptjquery

Scroll bar malfunction in Highcharts

I am struggling to get the scroll bar working so that all categories can be displayed. I have tried different approaches but haven't been able to figure out where I'm going wrong. See the code in action here: http://jsfiddle.net/manraj/7racxxu0/ ...

javascriptjqueryhighcharts

Angular 2: Testing Firebase Add Functionality with Unit Tests

Is there a way to perform a basic unit test in Angular 2 for testing a simple firebase adding item feature? I've opted for typescript over standard JavaScript in my code. This is the piece of code I want to test: export class AppComponent { r ...

javascriptunit-testingtypescriptfirebaseangular

Modifying properties within child components

Within my parent Vue Page, I have inserted a FormInput component inside my form. new.vue <b-form @submit.prevent="submit"> <FormInput :name="name"/> <b-button @click="submit">Save</b-button> <b-form> <script> i ...

javascriptvue.jsnuxt.js

Drag Bootstrap panels to the edge of the column

I need to position two panels in a column, with one on the left and the other on the right. Currently, they are not aligned properly, as shown in this image: https://i.stack.imgur.com/RU636.png The first panel should be moved to the left to align with the ...

htmltwitter-bootstrapwebalignmentpanel

Utilizing Background Images in CSS/HTML

Just starting out in the front end world! :D I'm having trouble setting the background of my login page. It's not extending to cover the entire page. Here's how it looks:https://i.sstatic.net/bQQLv.png This is the HTML code I'm using: ...

htmlcss

Retrieve the desired placeholder text color by utilizing the capabilities of the Selenium WebDriver

https://i.sstatic.net/g52uN.pngLooking for guidance on how to verify the color of placeholder text in an input element using Selenium and Java. In my test scenario, I have an HTML structure like this: <div class="pe-input"> <label for="in ...

javacssselenium-webdriverui-automation

Are there any userscripts available for interactive websites?

I frequently create small GreaseMonkey UserScripts for my personal use. However, I often struggle with a recurring issue: How can I adapt to the changing nature of websites? For example, popular webstores like Amazon now update content dynamically withou ...

javascriptjquerygreasemonkeyuserscripts

Issue with duplicate selectors not being merged in SASS partials

Is there a way for SASS to combine duplicate CSS selectors from multiple files into a single output file? In my current setup, I have the same CSS selector present in separate SASS partials files that are all included in a master file. For example: File1 ...

csssass

``There seems to be an issue with AngularJS UI-view not loading properly when ngOptions

I am new to using Angularjs and I encountered an issue where including a select element on the page causes the ui-view not to load. The page appears blank, but when I remove the ng-model attribute from the select element, everything works fine. Can someo ...

htmlangularjs

Extract the necessary fields from the JSON Schema

I am in search of a solution to extract the required fields from a JSON Schema and Data combination. Currently, we are utilizing AJV for getting error messages in our forms using JSON Schema, and it has been performing really well. I am looking for a met ...

javascriptjsonjsonschemaajvtv4

Leverage variables in Ajax to retrieve the data of an HTML element

Seeking assistance in converting multiple lines into a single for loop. var optie1 = ""; if($('#form #optie1_check').is(':checked')) { optie1 = $('#form #optie1_naam').val(); } var optie2 = ""; if($('#form #optie2_ch ...

javascriptjqueryajax