show or hide textbox according to number entered

C# Corner

Garima Bansal

3y1k.NET

scenario is:

1 If user enter Number of floor = 1 then Floor Number and Area textbox show otherwise hidden

No Of Floor

Floor No

Area

.
.
.

Floor No

Area

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh3y ago
Accepted answer
It is not displaying floor and area number because you are not setting the value, copy paste below and test
```
for (let i = 1; i < =value; i++) {
                    inner += `Floor No ${i}
Area ${i}
```
` } parent.innerHTML = inner; });

Garima Bansal3y ago

Now its work fine in all scenario

for (let i = 0; i < value; i++) {
inner += `

Floor No${i + 1}

Area${i + 1}

`
}
parent.innerHTML = inner;

Garima Bansal3y ago

Sachin Singh

the way i am doing works fine but the only problem is it not display

Floor No 1

Floor No 2

Floor No 3

and see frontend snippet below

Sachin Singh3y ago

@garima

what you are doing in your code is, you are asking the user to enter a number if he enters 4 then you are creating 4 div (div0 to div3).

Do you want this behavior? Or just the the 4th floor (entered ) one?

also even if you want to generate 4 div if a user enters 4 then start from 1 instead of 0.

for (let i = 1; i < =value; i++) {
                    inner += `Floor No
Area

`
                }
                parent.innerHTML = inner;
            });

Garima Bansal3y ago

Hello Pankaj Patel and Sachin Singh

No Of Floor

i implemented this way but only problem with this way Floor No 1 and Area 1......Floor No 5 and Area 5 not mentioned

Sachin Singh3y ago

simply wrap the floor number and area in a single div and show and hide the div instead.


                                No Of Floor
                                
                            
                            

                            


                            
                           ---wrapper start
                                
                                    Floor No
                                    
                                

                                
                                    Area
                                    
                                
  ---wrapper end
                                .
                                .
                                .
   ---wrapper start
                                
                                    Floor No
                                    
                                

                                
                                    Area
                                    
                                
  ---wrapper end

$(function(){
$("id^=floorscheck").hide(); // hide all on page load until any floor number is entered

})

$("#NoOfFloor").change(function(){
$("id^=floorscheck").hide();
 $("id=floorscheck"+$(this).val()).show();
})

Pankajkumar Patel3y ago

Hi Garima Bansal,

One way is like following:




Page Title




  No Of Floor
  
  
  

  


  
    
      Floor No
      
    
    
      Area
      
    
	
    
      Floor No
      
    
    
      Area
      
    
    
    
      Floor No
      
    
    
      Area
      
    
    
    
      Floor No
      
    
    
      Area
      
    
    
    
      Floor No
      
    
    
      Area

Hope this will help you!

Garima Bansal3y ago

If number of floor is one then its shows only one floor Number and Area textbox and if user enter number of floor is 3 then it shows two floor number and area textbox