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

How is it possible to receive a TRUE value when the API returns an error message indicating that the requested photo does not exist?

I am currently in the process of learning Angular and Typescript, but I am facing some challenges. I am working on an application that involves displaying a list of photos, as well as allowing users to create, edit, and delete existing photos. However, whe ...

javascriptangulartypescriptapihttprequest

How can I create an input field that only reveals something when a specific code is entered?

I am currently developing a website using HTML, and I would like to create an admin section that requires a password input in order to access. After consulting resources on w3schools, I attempted the following code: <button onclick="checkPassword()" i ...

javascripthtml

Display hidden text upon clicking using React Material UI Typography

I have a situation where I need to display text in Typography rows, but if the text is too long to fit into 2 rows, ellipsis are displayed at the end. However, I would like to show the full text when the user clicks on the element. I am attempting to chang ...

javascriptcssreactjsmaterial-uitypography

Error message: 'Unsupported projection operation: $push: { ... }', error code: 2, code name: 'InvalidOperation' }

Can anyone assist me with debugging this error that I am encountering? Here is the code snippet causing the issue: router.post('/accounts/show_accounts/:id', function(req,res){ Account.findOne( {_id:req.params.id}, {$push: { ...

javascriptnode.jsmongodbmongoose

Using jQuery, you can enclose a string of text with HTML tags easily

This specific content within the span is being dynamically created by PHP. However, I am uncertain how to efficiently target the text string in order to begin using jQuery. <!-- input: --> <span class="price">RM1,088.00 Annually + RM10.00 Se ...

javascriptjquery

Looping in jQuery: Tips for Improving Performance

In my popup window, I have a JavaScript function that utilizes jQuery to retrieve checked checkboxes from the parent window. It then uses jQuery again to access associated data from hidden fields in the parent window for each checkbox. var chked = $(&apos ...

javascriptjqueryhtmlasp.net

What is the best way to design a footer that remains fixed at the bottom of the screen but becomes unfixed when the user scrolls down?

Currently, I am working on creating a footer that remains fixed at the bottom of the user's screen regardless of the screen size. However, I also want the header to transition from a fixed position to being part of the page when the user scrolls down. ...

javascriptjquerycssscroll

In Angular components, data cannot be updated without refreshing the page when using setInterval()

Here's the Angular component I'm working with: export class UserListComponent implements OnInit, OnDestroy { private _subscriptions: Subscription; private _users: User[] = []; private _clickableUser: boolean = true; constructor( priv ...

javascriptangulartypescriptrxjssetinterval

Error in IONIC 3: The code is unable to read the 'nativeElement' property due to an undefined value, resulting in a TypeError

I am currently learning about IONIC 3 and working on an app that utilizes the Google Maps API. However, when I try to launch my app, I encounter the following error message: inicio.html Error: Uncaught (in promise): TypeError: Cannot read property ' ...

javascriptgoogle-mapstypescriptgeolocationionic3

Monitoring the usage of a specific component's screen time in a React Application

Is it possible to accurately track the time a specific component is rendered with certain props and while being on an active screen in React? I've had trouble finding a suitable library for this task. What would be the most effective approach to tackl ...

javascriptreactjs

Tips for populating category and subcategory using JSON data

When creating an admin form in React, I want to have a Category and sub-category dropdown selection with options populated from a JSON file (categories.json). The respective sub-categories should be displayed based on the selected category while adding a n ...

javascriptreactjschakra-ui

Saving videos for offline viewing in a Vue Progressive Web App with Vue.js 3

I'm having a bit of an issue with my Vue 3 and Typescript setup. I've created a PWA where I display videos, which works perfectly online. However, when I try to access them offline, the videos don't load properly. I have stored the videos in ...

javascriptvue.jsvuejs3progressive-web-apps

What causes the variance in outcomes between employing a literal string versus a local variable?

Here is a loop that I am working with: for (var key in criteria) { var exists = Object.keys(item).some(function(k) { return item[k] === "Test"; }) } Initially, this loop functions as expected and returns 15 trues based on the number of i ...

javascriptobjectecmascript-6

Efficient ways to organize JSON objects using JavaScript

I am in need of restructuring the data retrieved from an API call, which currently looks like this: { "Label3": [ { "name": "superman", "power": 8900 }, { "name": "iron man", "power": 3000 }, { "name": "spike spiegal", "power": 200 ...

javascriptarraysjsonalgorithmsorting

JavaScript function fails to execute when attempting to call it after opening email client with attachment

//deliver the email to the recipient in eml format Response.ClearHeaders(); Response.Clear(); Response.Buffer = true; Response.ContentType = "message/rfc822"; Response.AddHeader("content-length", bin.Length.ToString()); Response.AddHead ...

javascriptc#asp.net

Reasons Behind the News Not Being Retrieved Using [XML JS Query]

Can you help me troubleshoot my code? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>News Site</title> <script> window.document.onload = ...

javascriptajaxxml

Some sections of the HTML form are failing to load

I'm currently following a tutorial and applying the concepts to a Rails project I had previously started. Here's my main.js: 'use strict'; angular.module('outpostApp').config(function ($stateProvider) { $stateProvider.sta ...

javascripthtmlangularjs

Ways to insert a line break within a jQuery function using text()

I am looking to add a new line in my jQuery function. $.ajax({ url:"http: //192.168.1.4/Experiements/webservices/api.php", type:"GET", dataType:"json", data:{type:"login", UserName:userId,Password:userPassword}, ...

javascriptjquery

Exploring the ideal scenarios for utilizing propTypes in React

When creating in-house components that require specific props to function properly, I believe it is best to conduct prop requirement checks during testing rather than including propTypes in the production code. This is especially important for components t ...

javascriptreactjsreact-proptypes

Is it possible to modify parameter values while transitioning?

While transitioning, I need the ability to modify parameter values. After researching the documentation, I discovered a method called `params('to')` that allows accessing target state's parameters. This is how it looks in my code: $transiti ...

javascriptangularjsangular-ui-router