Utilizing a Dropdown Menu to Enable Multiple Textboxes

Can someone help me create a select list that dynamically increases or decreases the number of text boxes displayed based on the user's selection? For example, if the user selects "2" in the select list, then 2 text boxes should appear; if they choose "3", then 3 should appear. I need the HTML and JavaScript code to make this work.


    <!DOCTYPE html>
<html>
<head>
 <title>MAIN</title>
</head>
<script>

function onchange_action(){

  var e=document.getElementsByName("AuthoringForm")[0];
  for(j=1; j<(e.value)+1; j++){

    var x = document.getElementById((j).value);
    console.log(j);
        x.style.display = "none";

    }   
  }


</script>

<body>

<form>
...

I've attempted the above code but it's not functioning as expected. Any help would be appreciated!

Answer №1

Issue Resolved!

<!DOCTYPE html>
<html>
 <head>
<title>MAIN</title>
</head>
<script>

function switchTabs(){

var e=document.getElementsByName("AuthoringForm")[0];
for(j=1; j<= e.value; j++){

    document.getElementById(j).style.display='block';

}   

for(; j<5; j++){
document.getElementById(j).style.display='none';    
   }
  }


</script>

<body>

<form>
<div id="1">
  <input type="text">hello</input>
</div>
<div id="2">
  <input type="text">hello</input>
</div>
<div id="3">
  <input type="text">hello</input>
</div>
<div id="4">
  <input type="text">hello</input>
</div>
</form>

<select name="AuthoringForm" property="disease_name" size="1" 
onchange="switchTabs();">
    <option selected="selected"> Select Number of Products </option> 
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>


</body>
</html>

:)

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

A guide on extracting and converting strings in React to display as HTML

I am in the process of developing a simple blog app using a MERN stack. Currently, I have the functionality to create posts with just plain text. Is there a way to incorporate HTML rendering within the content of these posts? For example, a post might con ...

Safari browser experiencing issues with JQuery Slider functionality

I am facing an issue with a slider that works perfectly in all browsers except Safari. I have been struggling to figure out the root cause of this problem. You can view the fiddler code here: http://jsfiddle.net/sjramsay/UyvvL/ It appears that when the co ...

Testing an AngularJS factory that returns a promise and mocking a service that utilizes $http

My service includes a method that returns an $http promise: function sessionService($http, serviceRoot) { return { getAvailableDates: function () { return $http.get(serviceRoot + '/session/available_dates'); } ...

Failed to load TypeScript file or similar issue

Whenever I attempt to generate a TypeScript file from a partial view (MVC .NET) that is loaded through a rest call and then appended to a div element, I encounter an error in my console. The error message reads: Uncaught ReferenceError: xyz is not defined ...

In Vue, the concept of using the debounce method is not clearly defined

I am aware that using the arrow syntax for a method can cause 'this' to not be mapped to the Vue instance. In my case, I am utilizing lodash.debounce and I don't think I'm using the arrow syntax here? Encountering Error: Cannot read pr ...

Changing $scope within an AngularJS service

I am currently working on an application that utilizes the Gmaps API for geolocalization. One of the challenges I faced was adding new markers based on user events. To address this, I created a service that listens to map events and adds markers when click ...

Steps to implement the selection of multiple items from a drop-down or list on a React.js website

Hi there, I am a newcomer to the world of React JS web development. I am looking for guidance on how to implement a feature where users can select multiple cities from a drop-down or list, similar to the examples shown in image1. Once the user has made th ...

Triggering a SQL Server Agent Job through a web application

Can anyone provide me with pointers on how to trigger an SQL Agent job using JavaScript from a webpage? I've been struggling to get it working and haven't come across any helpful resources so far. Thanks in advance for your assistance! ...

Transferring selected text to a Cordova application from a different application

Can I extract highlighted text from a different application, such as a browser, and send it to my Intel XDK Cordova app in JSON format for utilization? (Potentially utilizing a context menu) ...

Repeatedly making jQuery ajax calls within a loop can lead to overwhelming the browser and

It's interesting to note that the response time from the database might be causing a browser to crash after 10 minutes. In the ajax call, all data from a specific table is being requested and then parsed into a div. The database table isn't very ...

Unable to use the same hexadecimal HTML entity in the value props of a React JSX component

Can someone explain why this code snippet displays dots as password and the other displays plain hexadecimal codes? <Field label="Password" value="&#x2022;&#x2022;&#x2022;&#x2022;&#x2022;" type="password" /> While this one disp ...

Issue with header background images not showing up in Safari browser

On my website, the top header background and the background of the "Kreation Team" Div are not appearing on Safari for iPads and iPhones, but they are visible on iMacs and MacBooks. The background images do not show up on smaller devices. If you compare C ...

Class remains unaffected by media query modification

With Bootstrap5 in play and an additional stylesheet added as the last one in the lineup, my goal is to customize the margins of the .content class. The snippet of code below resides at the end of my stylesheet... .content { width: 100vw; m ...

text field remaining populated

I have a form where the input fields clear when they are clicked on. It works well on most pages, but there is a specific type of page where it is not functioning properly due to the presence of another javascript running. - issue observed // On this pa ...

Using VBA in Excel along with Selenium, iterate through radio button options to identify the selected value and display it on the screen

I'm trying to figure out which radio button option is currently selected. I've attempted various methods to loop through the radio buttons and identify the one with the 'checked' attribute, but so far haven't had much luck. ...

The javascript file jquery-ui-1.10.4.custom.js is encountering an issue with the error message 'this.source is not a function'

I am encountering an error while using 'jquery-ui-1.10.4.custom.js' for auto-complete. The error being thrown is 'TypeError: this.source is not a function' Here is the HTML code snippet: <input type="text" ng-model="srchfname" auto ...

Applying these sorting functions to my specific scenario

Hello everyone, I hope you can help me out with this issue. I have been struggling for hours trying to sort my array of objects in JavaScript based on a specific property, but I just can't seem to get it right. I have referred to some of the top post ...

The _doc property within Mongoose

I need assistance with this JavaScript code I have: app.post('/auth', async (req, res) => { try { const user = UserModel.findOne({email: req.body.email}).exec() if (!user) return res.status(404).json({ message: ...

Responsive CSS - reordering div elements

#div1 { position: relative; max-width: 100%; height: 100px; background-color: green; color: white; } #div2 { position: relative; max-width: 100%; height: 100px; background- ...

Tips on activating the overlay solely on the image without affecting the entire column

Currently, I am working on a project locally and do not plan to release it. However, I am facing an issue with making the overlay only appear on the image rather than covering the entire column. I came across some pre-built code on the w3 schools website ...