Date:

Share:

How to Create a Text Box Dynamically in JavaScript

Related Articles

How to create a text box dynamically in JavaScript

How to create a text box dynamically in JavaScript, In this blog post, I will go over how to create a text box dynamically when the user enters a numeric value into the text box.

The application we will create is as follows:




document

Dynamically create a text box base on an input numeric value

Enter the text box number you want to create

The app is divided into 2 parts

HTML code

For HTML, there are 2 things we will need to create

(1) Input text box, assign with ID -> “id_TextBox”

(2) The text box is assigned to the function -> “genTextBox” with the On change feature

(3) We will encode the function “genTextBox” below JavaScript Dose.

(4) Onchange will call the genTexBox function when it detects that changes have been made to the text box

(5) Assign an empty order list with id -> “id_input”

HTML code as below


<body>
<h2>Dynamically Generate TextBox Base on Inputted Numerical Value</h2>

<P>Input Number Of Text Box you want to create </p>
    <br>
    <!-----------------------Input Text Box------------------------------------>
    <input type="text" class ="" id="id_TextBox" onchange= "genTextBox() "/>    
    <br>
    <!-----------------------Un Orderlist to be append Later------------------------------------>
    <ul id="id_input">


    </ul>



    
</body>


JavaScript Code

Each time the text box detects changes it will call the function “genTextBox”

Code as below


var inputValue =0;
var textAppId=0;
var temp_1 =0;

const genTextBox=()=>

     // Delete Everything 
     let menu = document.getElementById('id_input');
     while (menu.firstChild) 
            menu.removeChild(menu.firstChild);
        
    // Clear Value
    inputValue =0;


    // Get UL Value
    var ul = document.getElementById("id_input"); 
    
    // Get Text Box Input Value
    inputValue = document.getElementById("id_TextBox").value;  


    for (var i = 0; i < inputValue  ; i++) 


          //--------------Create List Element ------------------------------
          var li = document.createElement('li');
      
          //---------------Create Unique ID For Test Box---------------------
             textAppId="";
             
             temp_1=0;
             temp_1 = i+1;
             textAppId ="text"+temp_1;
 
         //--------------------------------------------------------------------
                const input_M = document.createElement("input");
                
                input_M.setAttribute("id",textAppId);
           
                input_M.setAttribute("type", "text");
                

                li.appendChild(input_M);

          // Append LI to Unorder List ---------------------------------------

                 ul.appendChild(li);







    




;



Check to find all possible combinations of numbers to reach a given amount of JavaScript. Here

Source

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Popular Articles