show or hide textbox according to number entered

Question

Hi 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

Sachin Singh · 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 Floor No ${i} Area ${i} ` } parent.innerHTML = inner; });

Sachin Singh · Answer

@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 Floor No Area ` } parent.innerHTML = inner; });

Sachin Singh · Answer

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(); })

Pankaj Patel · Answer

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 function hideAll() { for(let i = 1; i Hope this will help you!

Garima Bansal · Answer

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

Garima Bansal · Answer

Now its work fine in all scenario for (let i = 0; i inner += ` Floor No${i + 1} Area${i + 1} ` } parent.innerHTML = inner;

Garima Bansal · Answer

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

Garima Bansal · Answer

Hello Pankaj Patel and Sachin Singh No Of Floor jQuery('#NoOfFloor').on('input', function () { var value = parseInt($('#NoOfFloor').val()); let parent = document.getElementById("floors"); parent.innerHTML = ""; let inner = ""; for (let i = 0; i inner += ` Floor No Area ` } parent.innerHTML = inner; }); i implemented this way but only problem with this way Floor No 1 and Area 1......Floor No 5 and Area 5 not mentioned