Dropdown Box Linking and Input Field Integration in HTML

I have a scenario where students need to pay monthly fees for their classes.

My objective is as follows: 1. Dropdown #1: Student Names 2. Dropdown #2: Month Names 3. Textbox: Fees amount for the selected month

The code I am using:

$(document).ready(function() {
  $("#myDropdown").change(function() {
    var selectedValue = $(this).val();
    $("#txtBox").val(selectedValue);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tab1">
  <tr>
    <td>Select Affiliate Source:</td>
    <td>
      <select id="myDropdown">
        <option value="jan" label="2000">January</option>
        <option value="apr" label="2500">April</option>
        <option value="jul" label="2000">July</option>
        <option value="oct" label="2500">October</option>
      </select>
      <div>
        <input id="txtBox" type="text" readonly='1'>
      </div>
    </td>
  </tr>
</table>

This code was sourced from stackoverflow. However, I'm facing challenges with: 1. Implementing a chained dropdown for students and months, ensuring that only when a student is selected does the months dropdown become active. 2. Displaying the value in the label attribute of the selected month in the textbox.

Any suggestions would be greatly appreciated.

Thank you, GenXCoders

Answer №1

  1. Activate the month selection box when a student is chosen.

  2. Retrieve the selected value from the month selection box and display it in a text box upon change.

$(document).ready(function() {
  $("#student").change(function() {
    $('#month').prop('disabled', false);
  });
  
  $("#month").change(function() {
    var selectedValue = $('#month :selected').attr('label');
    $("#txtBox").val(selectedValue);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tab1">
  <tr>
    <td>Select Affiliate Source:</td>
    <td>
    <select id="student">
      <option value="Student1">Student1</option>
      <option value="Student2">Student2</option>
      <option value="Student3">Student3</option>
    </select>

    <select id="month" disabled>
      <option value="jan" label="2000">January</option>
      <option value="apr" label="2500">April</option>
      <option value="jul" label="2000">July</option>
      <option value="oct" label="2500">October</option>
    </select>
    <div>
      <input id="txtBox" type="text" readonly='1'>
    </div>
    </td>
  </tr>
</table>

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

Unit Testing Angular: Mastering Unit Testing for the .map() Function

I am in need of testing a service method, but I am unsure about how to achieve complete coverage for the code that gets executed as a result of calling another injected service method. The Service Method to be tested: @Injectable() export class BomRevisi ...

How to effectively use graph paper with both major and minor grids in the background?

Looking to create a 100px by 100px image in Inkscape with major lines every 100px and minor lines every 10px. This will help verify viewport size when used as a repeating background. What's the best approach for this? Thinking of using #888888 for ma ...

Is it possible to use combox to deactivate the buttons?

My goal is to deactivate the button as soon as I select a value from the drop-down list. For example, here's what I have: <select name =""> <option> disable </option> <option> enable </option> </select> <input ...

Attempting to upload a file into the system

I'm in the process of creating a website that allows for file uploading. Check out my code below: index.php: <?php include('/inc/header.php'); ?> <?php if($_SESSION['username'] != null) { echo " <form class=&bs ...

Vue 2 does not properly transition the initial element when using the `mode=out-in` attribute

In my Vue project, I am using version 2.6.14 and trying to toggle between two buttons by utilizing v-if and v-else. Despite wrapping everything in a transition element, the first button doesn't transition smoothly, neither when appearing nor disappear ...

Problem with input placeholder when using text transformation

I recently created an input form and applied the CSS property text-transform: uppercase; #textbox { outline:none; background:#732ab7; caret-color:lightgreen; border-style:groove; border-width:0px 0px 10px 0px; border-top:none; ...

Implement an onClick event to the newly created th element using document.createElement()

Through the use of document.createElement("th"), I am dynamically inserting columns into a table. var newTH = document.createElement('th'); Is there a way to add an onClick attribute to this element so that users can delete a column by clicking ...

How can you retrieve the input value in JavaScript when the cursor is not focused?

Here is an input I am working with: <a-form-item label="user" :colon="false"> <a-input placeholder="user" name="user" @keyup.enter="checkUser"/> </a-form-item> Within my methods: chec ...

Is it possible to pass makeStyles as a prop in React components?

Within my component, I am using a prop named styling to apply inline styles. However, I would like to pass some predefined styles that I have written using the makeStyles function. The specific style I want to pass is detailed below: const useStyles = ma ...

Ionic 5 page div within ion-contents element is experiencing scrolling issues on iPhone devices

My application features a div element containing an ion-slides component. The ion-slides component houses several ion-slide elements that slide horizontally. Here is the relevant code snippet: <ion-content [scrollEvents]="true"> <div ...

Exploring TypeScript Module Importation and WebPack Integration

Struggling with WebPack's injection of imported dependencies for a TypeScript project. The first challenge is getting TypeScript to recognize the imported module. In the header.ts file, there is a declaration of a module nested under vi.input, export ...

``save changes to database in real time without requiring a page refresh or navigating

I have created a PHP page that includes a table displaying records from a MySQL database. One of the fields in the table, namely "housing," can have two possible values: 0 and 1. When a student is housed, the value of this field is set to 1; otherwise, it ...

Wait for animation to finish before executing ajax call in jQuery

When I upload a spreadsheet to import data into my database, I perform server-side validation on each value before insertion. Using jQuery AJAX, the file is uploaded to the server, and I receive back processed data in the form of a multidimensional array. ...

The image must be able to fit within the div container without distorting its proportions

Recently, I created a slider that functions flawlessly. However, I am struggling to make the image fit inside the div without distorting its proportions. I've tried various methods but haven't been able to achieve the desired result. Could you p ...

Display top level option while in Level 2 menu on Woocommerce

Looking to implement an accordion menu for mobile devices on a WordPress Woocommerce site. I've tried various code snippets from other sources but haven't been successful so far... The current code only supports 2 levels of the accordion menu. H ...

Converting a key-value pair string into an array in PHP: A comprehensive guide

When the checkbox is selected, I will extract the values listed below: attribute_value:samsung, attribute_id:1, spec_group_id:2, prod_id:1 To convert the above string into an array format and obtain a single array outside of the loop. Therefore, if I wa ...

Using jQuery that has been installed via npm within an Express application

I recently set up a node.js + express application and utilized npm to install jQuery. Within the app.js file, I included the following code: var jquery = require('jquery'); In the header of my html file, I have incorporated JavaScript that rel ...

unexpected automatic scrolling that occurs when hovering over an element

a sudden scrolling takes effect simultaneously with hovering on an element. What confuses me more is that it does not happen every time I hover over the element but just occasionally or maybe there is a specific scrolling position that I can't see yet ...

I am looking to split an array into smaller subarrays, each containing 5 elements, and assign a distinct class to the elements within each subarray. How can I

I have a group of "n" "li" elements that I would like to split into "x" subsets using jQuery. Each subset should contain 5 "li" elements, and I also want to assign a different class to each subset. <ul> <li>text1</li> <li>text2&l ...

Sharing tips for sending error objects to a socket.io callback

Utilizing callbacks with socket.io Client side code : socket.emit('someEvent', {data:1}, function(err, result) { console.log(err.message); }); Server side code : socket.on('someEvent', function(data, callback) { callback(ne ...