Display or conceal certain HTML form elements based on the selection made in the previous form element

I need assistance with a function that can dynamically show or hide certain HTML form elements based on the user's previous selection using JavaScript. For example, if a user selects "Bleached" from the Dyingtype drop-down menu, there is no need to display color selection radio buttons; only the bleached white radio button should be shown. However, if the user selects "Reactive" or "Vat", then the color selection radios should be displayed without the bleached white option.

I am unfamiliar with Java and only have knowledge of PHP. Can anyone help me modify my HTML code accordingly? Your help is greatly appreciated.

    <select name="dyingtype" class="formcss" id="10">
      <option value="0">Select Dying Type</option>
      <option value="1">Blaeached</option>
      <option value="2">Reactive Dyed</option>
      <option value="3">Vat Dyed</option>
    </select>
  </td>
</tr>
<tr>
  <td bgcolor="#FFFFFF" class="formcss"><label>Bleached/White</label></td>
  <td bgcolor="#FFFFFF">&nbsp;</td>
  <td bgcolor="#FFFFFF">
    <input
      name="color"
      type="radio"
      class="formcss1"
      id="11"
      value="1"
      checked="checked"
    />
  </td>
</tr>
<tr>
  <td bgcolor="#FFFFFF" class="formcss"><label>Dark Colors</label></td>
  <td bgcolor="#FFFFFF">&nbsp;</td>
  <td bgcolor="#FFFFFF">
    <input name="color" type="radio" class="formcss1" id="12" value="2" />
  </td>
</tr>
<tr>
  <td bgcolor="#FFFFFF" class="formcss"><label>Average colors</label></td>
  <td bgcolor="#FFFFFF">&nbsp;</td>
  <td bgcolor="#FFFFFF">
    <input name="color" type="radio" class="formcss1" id="13" value="3" />
  </td>
</tr>
<tr>
  <td bgcolor="#FFFFFF" class="formcss"><label>Pastel Colors</label></td>
  <td bgcolor="#FFFFFF">&nbsp;</td>
  <td bgcolor="#FFFFFF">
    <input name="color" type="radio" class="formcss1" id="14" value="4" />
  </td>
</tr>
<tr></tr>
javascripthtmlcss

Answer №1

Embarking on the journey of learning is truly amazing! It's apparent that you are at the stage of a beginner by referring to JS as Java, but worry not, I have some guidance that can point you in the right direction. Please keep in mind that I am not endorsing these methods, but I believe they will address your query and assist you.

I suggest delving into events: https://www.w3schools.com/jsref/event_onchange.asp

The main concept here is that when a user makes a selection, you need to toggle the visibility of elements accordingly.

There are numerous effective approaches to achieving what you seek, but since you are still in the learning phase, triggering a function from an event could be educational, so I will strive to keep it straightforward. Essentially, you'll gather all the elements you wish to display and then alter a style property using https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById.

Your code snippet may resemble something like this:

function hideBleachButtons () {
  const bleachElement = document.getElementById(YOUR ELEMENT ID);
  bleachElement.style.property = 'set a val'
}

Additionally, check out these videos for further insights: https://www.youtube.com/watch?v=YrE62Dzg4oM, https://www.youtube.com/watch?v=IBVvDMUaYpI

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

Ensure that the vue-router guard waits for the completion of the axios API call in Vuex before proceeding

I am currently working with a django-rest-axios-vuejs application stack, and I have a specific task that involves the vue-router. Within the beforeEach guard of the vue-router, I am checking permissions by verifying something in the me object within the v ...

javascriptvue.jsasynchronousvuexvue-router

Display various sets of data from multiple models within a single view

My project is focused on Asp.net Mvc and I am encountering a challenge in displaying multiple model data in one view. However, I do not want to showcase it in a list or grid format, instead, I prefer a Form View style. The two modal classes involved are Pr ...

htmlrazormodel-view-controllerviewmodel

Like the Word outline view, the list view can be easily collapsed and expanded with a simple click

I've seen a few examples, but I haven't been able to achieve what I'm looking for. I need to extract text from a field and convert it into an outline view similar to the one in Word. Is this possible? Any help would be greatly appreciated. I ...

javascripthtmlcssjsonjelly

Tips for selecting a specific item in a list using onClick while iterating through a JSON array in React

I have a unique JSON file filled with an array of objects, each containing a "Question" and "Answer" pair (I am working on creating an FAQ section). My current task involves mapping through this array to display the list of questions, a process that is fun ...

javascriptjsonreactjsreact-hooksmaterial-ui

Show the result of file upload, whether it was successful or not, using ReactJS

I need to implement an Ajax call for uploading a file to the server. I want to display success and failure messages based on the outcome of the file upload process. $.ajax({ url: "https:my_url", data: {my data: my_data}, method : "POST", success: ...

javascriptajaxtwitter-bootstrapreactjs

jQuery Ajax allows scripts to be contained within a page, even if the page itself is empty

Utilizing jQuery ajax to display an HTML page that includes javascript functions, here is my code: function ChartBook() { $.ajax({ url: '/Charts/ChartBook', dataType: 'html', id: 1, ...

javascriptjqueryhtmlajax

Manipulating and transforming data through Puppeteer's iterative process into an object structure

As a beginner with the puppetteer library, I'm trying to iterate through Amazon reviews and save each comment as an object. Although my code seems to be functioning, it only retrieves the first comment and then stops. async function scrapeProduct(ur ...

javascriptnode.jsjavascript-objectspuppeteer

Total of Vue Component Subtotals

One of the challenges I'm facing in my Vue app is calculating the total of subtotals. Every component has its own subtotal that depends on user input. I need to combine these individual subtotals and display the result in an input field outside of th ...

javascriptvue.js

Address the snack bar problem

In my quest to create a custom snackbar, I have encountered a minor issue with setting and deleting session variables in Node.js. While using global or local variables works well for accessing data on the client side, there is a chance of issues when multi ...

javascriptexpresssessionroutessnackbar

If the checkbox is selected, include an anonymous email in the field and conceal the field

I am looking to enhance my Feedback form by providing users with the option to submit feedback anonymously. However, my CMS requires both Email and Name fields to be mandatory. To address this, I am considering adding a checkbox that, when selected, auto ...

javascriptjqueryforms

Tips for maintaining video playback in HTML5 when the video element is clicked

I am currently working on creating a straightforward video conference setup and I specifically want to only allow the fullscreen feature when sharing the video element. I also want to disable all other controls such as volume, mute, seek, play, pause, and ...

javascriptvue.jsvideohtml5-video

What is the best way to utilize a variable across all functions and conditions within an asynchronous function in Node.js?

I need to access the values of k and error both inside and outside a function. Initially, I set k to 0 and error to an empty string, but unexpectedly, the console prints out "executed". var k = 0; var error = ""; const { teamname, event_name, inputcou ...

javascriptreactjsexpress

Automatically initiate a click event when the page is loaded

I'm having trouble getting a click event to trigger on my controller when the page loads. I really just want the checkboxes to be clicked automatically. <!DOCTYPE html> <html > <head> <link rel="stylesheet" type="text/css" ...

javascriptangularjs

How to Send C# Array as a Parameter to a JQuery Function

I'm currently working on passing a C# array to a JQuery function as a parameter. The C# code I have to call the function is: //Create an Array from filtered DataTable Column var GatepassIDs = defaultView.ToTable().AsEnumerable().Select(r => r ...

javascriptc#jqueryasp.netjquery-ui

I keep encountering an attach() error every time I try to close a modal that contains a vee-validated form

Every time I try to close a bootstrap modal (using bootstrap-vue) that includes a vee-validated "update" form with vue.js, I encounter the following error: main.js:477686 Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "#35". ...

javascriptvue.jsbootstrap-modalbootstrap-vuevee-validate

Flipping the order of elements in an array using JavaScript as described in the

While I am aware there are simpler methods to reverse arrays in JavaScript, I am seeking assistance to fully understand how this particular reverse method works. Your help in clarifying this is greatly appreciated. function reverseArrayInPlace(array) ...

javascriptarrayseloquentreverse

delete local ios css style datetime input

I am facing an issue with the new ios 16 version in Safari where input time and input datetime are being displayed incorrectly. Is there a way to fix this problem? I have tried using -webkit-appearance: none; but it did not work. https://i.sstatic.net/em ...

htmlcsssafariios16

Error: Jest encounters an unexpected token 'export' when using Material UI

While working on my React project and trying to import { Button } from @material-ui/core using Jest, I encountered a strange issue. The error message suggested adding @material-ui to the transformIgnorePatterns, but that didn't resolve the problem. T ...

javascriptreactjsjestjsmaterial-ui

Achieving success in element-ui vuejs involves validating the state with the :error parameter

I recently developed an app using Laravel, Vuejs, and Element-ui. Within my form, I have utilized the "error" property to indicate that Laravel validation is in place. <el-form-item label="First Name" prop="firstname" :error="registerForm.errors.get(&a ...

javascriptlaravelvue.jsvuejs2element-ui

Looking for a unique Full Screen Crosshair Cursor with either HTML5 or JQuery?

We've all seen that iconic military crosshair cursor in movies and animations. One example can be found at the beginning of a YouTube video titled "Dishonorable Disclosures" - https://www.youtube.com/watch?v=X-Xfti7qtT0 Another instance is with the ...

htmljqueryfullscreenmouse-cursorpanning