Deactivate the second dropdown menu until the first one has been filled with options

Can someone help me with greying out the second jump box (Select a Subcategory) until a valid selection is made in the first one (Choose a Category)? Below is the current code. Thanks!

    <script type="text/javascript">

\$j(document).ready(function() {
   \$j('.subf_dropdown').html($j('.subf_dropdown').html());
});

function chooseForum(f, name) 
{
   \$j.ajax({
    url: 'index.php?autocom=cats&root=' + f,
    type: 'GET',
    timeout: 100000,
    error: function(){
        alert('Oops something went wrong. Please try again');
    },
    success: function(xml){
        \$j('.subf_dropdown').html("<optgroup label='Subcategories'> " + xml + " </optgroup>");
    }
   });

}

function newPostInForum(f) 
{
   if (f != "")
   {
      window.location = "http://www.xxx.co.za/?act=post&do=new_post&f=" + f;
   }
}
</script>

<select name='f' class='f_dropdown' onchange="chooseForum(this.value, this); return false;">
    <optgroup label="Choose a Category">
        {$data} 
    </optgroup>
</select>
<br /><br />
<select name='subf' class='subf_dropdown' onchange="newPostInForum(this.value); return false;">
    <optgroup label="Subcategories">
        <option value="" selected="selected">Select a Subcategory</option>

    </optgroup>
</select>

Answer №1

It's important to keep the select element disabled until the success callback of $.ajax is triggered:

<select name='subf' disabled="disabled"...

function chooseForum(f, name) 
{
    ...
    success: function(xml){
        $j('.subf_dropdown').html("<optgroup label='Subcategories'> " + xml + " </optgroup>");
        $('.subf_dropdown').removeAttr("disabled");
    }   
}

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

The vertical overflow feature does not seem to be functioning correctly with the

In the following HTML setup: <div id="container"> <header></header> <div id="content"> <div class="something"></div> <div class="lateralInfo"> <div class="menu"></div> < ...

Combine two entities to create a new entity that mirrors the structure of the first entity

Can someone assist me with a data structure issue? Here are the objects I am working with: const elements = { item1: {color: 'blue', name: 'Item One' }, item2: {color: 'green', name: 'Item Two' }, item3: {colo ...

Preserving hyperlinks while transferring text from an HTML element using JavaScript

I'm struggling to preserve links from HTML elements while copying rich text, but have been unable to achieve it despite numerous attempts. The following code represents my best effort so far, however it only copies text without maintaining the links ...

Ways to automatically update React.js state when localStorage changes occur

Is it possible to automatically update the data on the cart page whenever there are changes made to the myCart array in localStorage? Below is the code that I am currently using: const [cart, setCart] = React.useState([]) React.useEffect(() => { se ...

Customizing Electron Protocol with oAuth redirection

In my current project using discord oAuth2 within a vue/nuxt/electron application, I am in need of creating a custom protocol to handle the oAuth2 code. Ultimately, I am hoping to achieve a structure similar to this: myapp://auth/callback?code=codehere De ...

There was an error in parsing the JSON syntax while loading models using Three.js GLTFLoader

Discovering how to use Three.js has been an exciting journey for me, thanks to the tutorial available on discoverthreejs.com. Creating meshes and geometry through three.js is a breeze for me. However, things take a turn when I try to import models from B ...

The jQuery date picker is showing an error with the function daySettings[2].replace, indicating that

Encountering a problem with the jQuery version I am using: <script src="js/Common/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> The code I have writte ...

Click on the button to create a link and then seamlessly navigate there using a combination of ajax, php, and javascript

I am in need of a button that can trigger a php page through ajax. The purpose of this button is to open the client's email with a mailto link. The php page created generates an email containing an encrypted string that carries credentials for access ...

Placing a point on a measurement scale according to a changing factor

I am completely new to html, css, and javascript. My goal is to create a color gradient bar and then place a dot on it based on a variable. I tried to implement a solution I found from various sources, but it is not functioning as expected, and I am seekin ...

Having trouble with the jQuery .on change event not triggering?

var myCustomTimeline = { loadData: function(visualItems, visualContainer, visualOptions, visualTimelines) { $.getJSON('myEndpoint/' + $(this).val(), function(data) { visualItems.clear(); $.each(data, function(i ...

Error in the delete function on a JSF webpage

I am currently working on implementing a JSF table with a delete button. Below is the JavaScript code that triggers the dialog box: function showDialog(a){ $("<div />", { text: a }).dialog({ width: 600, ...

In the dragstart event handler, event.dataTransfer and event.originalEvent will consistently be null

I have been working on developing drag and drop directives for angularJS by referencing this informative post: However, I am facing an issue where the dataTransfer and originalEvent are consistently null within the dragstart event handler, preventing me f ...

What about a lightbox with enhanced jQuery features?

As a newcomer to jQuery, I've never experimented with lightboxes before. However, I was tasked with creating something fun for April Fools' Day at work. Naively, I accepted the challenge thinking it would be simple, but now I find myself struggli ...

Learn how to capture complete stack traces for errors when using Google Cloud Functions

In the codebase I am currently working on, I came across a backend service that I would like to utilize for logging all errors along with their corresponding Http statuses. If possible, I also want to retrieve the full stack trace of these errors from this ...

Has the Soundcloud web widget API become obsolete?

I am currently working with the SoundCloud widget API (). My main goal is to retrieve information about the tracks within a set. Unfortunately, it seems like I am only able to utilize the methods widget.getSounds() and widget.getCurrentSound successfully ...

What could be the reason for the error message when using rs.send with a string input?

I'm a beginner in node and express, and I was trying to create an HTML form that takes two numbers and displays the result using "express" and "node". However, when I use rs.send(result), I encounter the following error: https://i.sstatic.net/FcUNJ.p ...

Using Mongoose and MongoDB to reference a different schema without using the default ObjectId reference

I have two different schemas in my current project. var carSchema = new mongoose.Schema({ id: { type: Number, unique: true, required: true }, make: { type: String, required: true }, model: { ...

Steps to Remove JWT Authorized Information by Identifying Number

I am currently utilizing JWT to manage access control for an express and React ecommerce application. However, I am unsure about how to remove the currently logged in user from the application. I have attempted using arrow functions and a button onclick ha ...

What does getsession.insert in the Ace Editor return?

Seeking clarification on the return values of the addMarker and insert functions in ace editor's edit session. The official documentation lacks detail, leaving me uncertain. Refer to the edit session API for more information. I've encountered i ...

Merge two functions that are alike into a single function

I am faced with a challenge of combining two similar functions that have some minor differences: private filterByOperationType() { let operationBuffer: IProductOperation[] = []; if (this.filterConditions[0].selected.length > 0) { operation ...