Is it feasible to conceal a certain field once the user has chosen another field?

Looking to create an IF statement that will help me establish a specific rule. On a customer portal page, customers can open tickets via a form where they provide information such as "software product" and "environment" from dropdown lists, as well as other fields like "Suite version." The IF statement I require is:

If (software product = ‘TEST’) then HIDE the “Suite Version” field.

This is necessary because selecting “TEST” will trigger another level of the “Software Product” field. I am able to implement this using Jquery JavaScript.

Thank you in advance.

javascripthtmljquerycss

Answer №1

Are you looking for this? Take a look at the code below

    $( document ).ready(function() {
    $('#SoftProd').change(function(){
        $('#pp').html($(this).val());
        if($(this).val() == "Test")
        {
            $('#SuiteVersion').hide();  
        }
        else
        {
            $('#SuiteVersion').show();
        }
        });
});
       
<Select id="SoftProd"> Software Product
   <option selected value="">Select option...</option>
   <option value="Test">Test</option>
   <option value="other">other</option>
</Select>

<input type="text" Placeholder="Suite Version" id="SuiteVersion" name="SuiteVersion">

<!--Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer №2

Have you considered trying out JavaScript?

Perhaps some CSS could also help.

 #Suite_Version {
     display: none;
  }

JavaScript can be quite useful:

 var software_product = $('#software_product').val();
 if (software_product === "test") { 
      $("#Suite_Version").hide();
  } else {
      $("#Suite_Version").show();
 }

Answer №3

After attempting to implement this code, I've encountered some issues with its functionality. It's worth noting that I am still learning this particular programming language.

jQuery(document).ready(function() var product = $('#helpdesk_ticket_custom_field_cf_product_1815896').val(); { if (product === "AMHS"){ Jquery("#helpdesk_ticket_custom_field_cf_suite_version_1815896").parent().parent().hide(); } else { Jquery("#helpdesk_ticket_custom_field_cf_suite_version_1815896").parent().parent().show(); } });

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

Tips for selectively executing a script based on whether the DIV is within the viewport

I have a created a script as shown below: jQuery(function($) { $('.count').countTo({ from: 0, to: '400', speed: '3000', refreshInterval: 50, onComplete: func ...

javascriptjquery

retrieve HTML content by its ID stored in a variable

In my JavaScript code, I have a variable named "value" that contains HTML data. I am trying to extract the data from a specific ID that is located within the element with ID #myDiv. var value="<div > <p class="">Hi <a href="/ ...

javascriptjqueryangularjsnode.js

Encountering a problem while creating a Page Object in webdriver.io - getting the error "setValue is not a function" or "cannot read property 'setValue' of undefined"

While working on a webdriver.io automation project, I encountered an issue with recognizing objects in my page object file (login.po.js) when calling them in the test spec file (test.spec.js). The error message displayed is LoginPage.username.setValue is n ...

javascriptseleniummocha.jswebdriver-iowebautomation

What are the ways to change a PDF file or web address into a DOCX document using NodeJS?

I've been doing some research on converting URLs to DOCx or PDF to DOCx in NodeJS, but I haven't found a proper solution yet. I tried reaching out to PhantomJS, but it only converts URLs to PDF. Do you have any idea if PhantomJS can convert to D ...

javascriptnode.jsdocx

Unusual issue encountered when launching an express application in node.js

Starting my app is easy with nodemon - just type nodemon However, I encountered an error when trying node app.js https://i.sstatic.net/rRXhZ.png I have checked my package.json and it is properly configured with: "scripts": { "start": "node ./bin/ww ...

javascriptnode.jsnpm

Unable to retrieve data using Ajax post method

I'm currently facing an issue where the data I am trying to send via post to a PHP file is not being posted. Instead, I am getting an empty array in the console log from the PHP file using var_dump. Here are the snippets of code I have in these files: ...

phpjqueryajaxpost

Sending an array encoded in JSON to jQuery

I'm attempting to send an array that I've created in PHP using json_encode(). The process involves running an AJAX request, as shown below: AJAX CALL: $.ajax({ type: "POST", url: "../includes/ajax.php?imagemeta=1", data: ...

javascriptphpjqueryajaxjson

Encountering NPM Abortion Issue in Node.js

I am a beginner in node.js and have successfully installed it. However, when I try to initialize npm, I encounter an error that causes it to abort. My system has high memory capacity with 32GB RAM and 1TB HD. Although the 'npm -v' command works ...

javascriptnode.jsnpm

The CSS pseudo-element ::before is neutralizing the effect of ::

Here's an HTML code snippet: <h1>Example title</h1> This is the corresponding CSS code: h1::first-letter{ display:none; } h1::before{ content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png); } I&apo ...

htmlcss

Tips for positioning and styling submenu on dropdown using CSS

I am facing an issue with my navigation menu in the design. The sub menu is not displaying when hovered. Is there a solution to fix this problem? Could it be due to missing CSS styles? nav ul {list-style-type: none; overflow: hidden; background: #000; p ...

htmlcss

Can local caching in ALL MAJOR browsers (Safari/Firefox/Opera/Chrome/IE) be achieved by an HTML5 web app that bypasses browser permissions?

Exploring the capabilities of the HTML5 offline application cache, I conducted boundary tests to observe how different browsers handle edge cases. Particularly, I focused on understanding the cache quota. To investigate further, I created and served an of ...

htmlcachinggoogle-chrome

What is the best way to perfectly center the navbar-nav class element in a menu using Bootstrap 5?

Currently, I am in the process of developing a backend for a novice website while also revamping the front end. My knowledge of frontend development is limited, so I have opted to utilize Bootstrap 5. One of my tasks involves transferring the menu from the ...

htmlcssbootstrap-5

What is the method for retrieving information from a JSON file that has been uploaded?

I am working with some HTML code that looks like this: <input type="file" id="up" /> <input type="submit" id="btn" /> Additionally, I have a JSON file structured as follows: { "name": "Jo ...

javascripthtmljson

Ways to stop a hyperlink from executing on confirmation cancel using jquery

I'm having trouble with a link that should not perform any action when the cancel button is clicked. I've attempted to use false in the click event and also tried using e.preventDefault, but I'm unsure if I am implementing it correctly. Can ...

jqueryhtml

Tips for dividing by a large number

I am currently attempting the following: const numerator = 268435456; const denominator = 2 ** 64; const decimalFraction = numerator / denominator; In order to achieve this, I have experimented with utilizing the code provided in this link: : const rawVal ...

javascriptreactjstypescriptcreate-react-appbigint

Is it possible to retrieve data from Local Storage using user_id and SessionId, and if so, how can it be done?

I have some data in an interactive menu created with iSpring, which includes a feature for local storage to save the last viewed page. I also have a system for logging and need to associate this local storage with user_id or sessionid. I found some informa ...

javascriptphpjqueryajax

Execute a function upon pressing the enter key

Currently, I am working on coding a webpage with a form that includes one field where users input a set of numbers. After typing in the numbers, they should then press a button labeled 'Run' to execute the code. However, the issue arises when use ...

javascripthtml

Create an array that can contain a mix of nested arrays and objects

Working on my project using Angular and TypeScript includes defining an array that can contain arrays or objects. public arrangedFooterMenu: IMenuItemType[][] | IMenuItemType[] = []; typesOfData.forEach(type => { let filteredData: IMenuItemType | ...

javascriptangulartypescriptmultidimensional-arrayfrontend

Tips for converting PDF files to images or reducing PDF file size using JavaScript

In my web application built with Next.js, I have a requirement where users can upload PDF files. However, I need to compress these files to a smaller size (e.g. 1MB). Despite searching extensively, I haven't found a satisfactory solution that meets my ...

javascriptnode.jsnext.js

How to retrieve data from a form object sent via cloud function using App Script

Currently, I am in the process of developing a web application that can extract files from a web form and store them in a designated Google Drive folder. After the user submits the form, my goal is to trigger a cloud function using google.script.run while ...

javascripthtmlgoogle-apps-script