Show/Hide a row in a table with a text input based on the selected dropdown choice using Javascript

Can someone please assist me with this issue? When I choose Business/Corporate from the dropdown menu, the table row becomes visible as expected. However, when I switch back to Residential/Consumer, the row does not hide. My goal is to only display the row when Business/Corporate is selected (allowing users to enter a business name) and hide it otherwise. Thank you for your help! :)

Here's my JavaScript code:

<script language="JavaScript">
function toggle(target)
     {
         if (target!="") {
         obj=document.getElementById(target);
         obj.style.display=( (obj.style.display=='none') ? '' : 'none');
         }
     }
</script>

This is my select option:

<select name="xaccttype" OnChange="toggle(this.value)">
<option value="Residential/Consumer">Residential/Consumer
<option value="Business/Corporate">Business/Corporate
</select>

And here is my table row:

<tr id="Business/Corporate" style="display:none"><td width="200" align="right"><b>Business Name:</b></td><td width="650"><input type="text" size="35" name="xbusinessname"></td></tr>
javascript

Answer №1

Rename the id of the tr element to something unique. Then follow these instructions in your code. Make sure to avoid using / in the id names.

Considering there is no other row with the id set as Residential_Consumer, dynamically checking the target in the script may not be practical.

function toggle(target)
     {
         console.log("inside");
         console.log(target);
         if (target!="") {
         obj=document.getElementById("row");
             console.log(obj);
           if(target === "Business_Corporate")
                obj.style.display= 'block';
           else
              obj.style.display= 'none';
         }
     }
<select name="xaccttype" OnChange="toggle(this.value)">
<option value="Residential_Consumer">Residential/Consumer</option>
<option value="Business_Corporate">Business/Corporate</option>
</select>
   <table> 
    <tr id="row" style="display:none">
        <td width="200" align="right"><b>Business Name:</b></td>
        <td width="650"><input type="text" size="35" name="xbusinessname"></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

The Express server's `GET` request at the root does not seem

When I access localhost:8080/chat?k=1&d=1, the console displays "CHAT PAGE" and everything works correctly. However, when I try to visit localhost:8080, the root event does not display "INDEX PAGE" as expected. Instead, it automatically retrieves ind ...

javascriptnode.jshttpexpressurl-routing

Angularjs - How come I am able to modify an object but not the list (ng-repeat) from a separate view?

After updating the customers object in the console, I noticed that the list (ng-repeat) is not reflecting the changes. What should I do? Interestingly, it works fine when I implement this function and view2.htm's HTML inside page.htm. HTML "page.htm" ...

javascriptangularjsangular-ui-router

Setting a checkbox to true within the MUI Data Grid using my input onChange event - how can I achieve this?

I am looking to highlight the selected row in my usage input onChange event. https://i.stack.imgur.com/rp9rW.png Details of Columns: const columns = [ { field: 'part_code', headerName: 'Part Code', width: 200 }, { ...

javascriptreactjsmaterial-uidatagrid

What is the method for showing a JavaScript variable in a popup window?

I am having an issue with a search form that is supposed to display a list of persons based on filters. Once the search results are shown, I want a link (id=names_list) that, when clicked, will open a dialog box containing the names of the persons. I have ...

javascriptjqueryjquery-ui

What is the best way to stop a current action when a new action is initiated?

My current setup involves an action creator that performs a costly calculation and triggers an action when the user inputs data in real-time. The challenge arises when multiple inputs are entered, as I want to avoid running the entire expensive calculati ...

javascriptreactjsreduxredux-thunk

Unlocking Worldwide Availability for Identifying URL Parameters

Is there a way to obtain global access to the current URL ID params? I am facing difficulty accessing the current URL ID in a child component within React. The ID is essential for querying a MongoDB database in my ChecklistTool component. Typically, I wou ...

javascriptreactjsmongodbexpress

Encountering a 404 error in a Next.js application while utilizing path parameters

Embarking on my journey into web development, I am trying to grasp the concept of server-side rendering using next.js and react within a lambda function. When running the code on a lambda, the result is somewhat functional as it displays the parameter valu ...

javascriptnext.js

I'm having trouble locating the module "script!foundation-sites/dist/foundation.min.js on Heroic."

This is the content of my webpack.config.js file: var webpack = require('webpack'); var path = require('path'); process.env.NODE_ENV = process.env.NODE_ENV || 'development'; module.exports = { entry: [ 'script!jque ...

javascriptreactjsnpmwebpackzurb-foundation

What is preventing me from accessing the $sceProvider?

Struggling to implement a filter using $sceProvider to decode HTML tags. Here's my current code structure: myApp.filter('decodeHtml', function($sce) { return function(item) { return $sce.trustAsHtml(item); }; However, upon integrating ...

javascriptangularjsweb

What is the best way to implement a timer or interval system in React and Next.js that continues running even when the tab is not in focus or the browser is in

I am attempting to create a stopwatch feature using next js. However, I have encountered an unusual issue where the stopwatch does not function correctly when the tab is not focused or when the system goes to sleep or becomes inactive. It appears that the ...

javascriptreactjsnext.js

Embark on a journey through a preorder traversal of a Binary Tree using TypeScript

Hello! I've been tasked with creating a function that iterates over a binary tree and returns all its values in pre-order. Here is the code snippet: interface BinTree { root: number; left?: BinTree; right?: BinTree; }; const TreePreArray ...

javascripttypescript

Leveraging AngularJS for parent-child communication through bindings in a unique and effective manner

I've come across the following code snippet: <div class="parent"> <div class="child"> and I have two directives, one for parent and one for child. When an event (such as a click) occurs on parent, I want something to happen on child ...

javascriptjqueryangularjs

Notifications will be displayed with Alertifyjs to the individual who activated them

Just diving into the world of nodejs and express framework, so I appreciate your patience as I navigate through this learning process. I've implemented the alertifyjs library to display notifications for different alerts on my site. However, I&apos ...

javascriptnode.jscookiesexpressalertifyjs

Show text upon hovering using jQuery

I am currently exploring jquery and trying to implement a functionality where text is displayed upon hovering over a div element. My basic html page consists of squares, with one of them rotating when a button is clicked. I now want to show some text withi ...

javascriptjqueryhover

Close pop-up upon successful AJAX response in ASP.NET MVC

I have a modal in my view that allows me to create a new record in the database. The view for this functionality is contained within a partial view. Below is the code for the view: <script src="~/Scripts/jquery-3.1.1.js"></script> To han ...

javascriptjqueryasp.netajaxasp.net-mvc

Using CSS and JavaScript to hide a div element

In my one-page website, I have a fixed side navigation bar within a div that is initially hidden using the display:none property. Is there a way to make this side nav appear when the user scrolls to a specific section of the page, like when reaching the # ...

javascriptjqueryhtmlcss

Looking for a way to access the source code of a QML method in C++?

I'm currently working on serializing objects to QML and I am looking for a way to retrieve the source code of functions defined within a QML object. Let's consider the following example in QML (test.qml): import QtQml 2.2 QtObject { functio ...

javascriptc++qtqmlqt5

I am interested in altering the color of table rows using either JQuery or CSS

Looking to update row colors based on grouping. For example: Color the TR accordingly for every 5 rows: First 5 rows in green (0-4 Rows), Next five rows in red (5-9 Rows), Following five rows in yellow (10-14 Rows) and repeat the pattern... ...

javascriptjqueryhtmlcss

After signing out, the function getRedirectResult in Firebase is being invoked

I'm a bit confused about some interesting behavior I've noticed while working with Firebase. Although I never used the older version, I believe getRedirectResult is a newer feature since they partnered with Google. Currently, I am using Vue.js a ...

javascriptfirebasevue.jsfirebase-authenticationvue-router

Using JavaScript to launch a new window for a specific folder

When opening a popup window with a specific URL, I typically use the following code: $("#OpenFolder").click(function () { var url = "https://stackoverflow.com"; windowObjectReference = window.open(url, "ModulesList", " ...

javascriptnode.jsnodes