Entry: click the button to add an input box.

:

ProgramSteps:

1. Field: div label

 

 
  <DivID= "Tags"> </Div>
..........
<DivID= "Showtags"> </Div>
 

 

The two DIV labels are used to mark a field so that JS can add content to the page. In other words, it is the entry for js to add content to the page.

 

2. Add input box

In function addtags (),

 

 
  VaR STR ="<InputType= 'Text'Name= 'Tagsinput'Size= '20'/> <BR/>";
Document. getelementbyid ("tags"). innerhtml + = STR;
 

 

To add an input box.

 

3. How can I ensure that the content in the original input box is retained after a new input box is added?

You can save the original content in an array before adding it. After adding a new input box, you can restore the content in the array to the previous input box.

 

Code

 1  // Save the content in the input box to the array
  2  VaR itemoriginal = Document. getelementsbyname ("tagsinput ");
  3  VaR arr = new array (itemoriginal. Length );
  4  For (var j = 0; j  <  Itemoriginal . Length; j ++ ){
  5  Arr [J]  = Itemoriginal. Item (j). value;
  6    }
  7  // Add the statement in the input box ....
  8  
  9  // Restore the content in the previous input box
  10  VaR Str = "<Input type = 'text' name = 'tagsinput' size = '20'/> <br/>"  ;
  11  Document. getelementbyid ("tags"). innerhtml +  = STR;
  12    VaR itemnew  = Document. getelementsbyname ("tagsinput ");
  13    For (VAR I  = 0; I <arr. length; I ++)
  14   {
  15  Itemnew. Item (I). Value  = Arr [I];
  16    } 

 

Bytes ---------------------------------------------------------------------------------------

Complete program:

Code

  1   < Script  Type  = "Text/JavaScript"  >  
  2      Function  Addtags ()
  3   {
  4     VaR Itemoriginal  =  Document. getelementsbyname (  "  Tagsinput  "  );
  5     VaR  Arr  =    New  Array (itemoriginal. Length );
  6     For  (  VaR  J  =     0 ; J  <  Itemoriginal. length; j  ++  ){
  7   Arr [J]  =  Itemoriginal. Item (j). value;
  8   }
  9  
  10     VaR  Str  =     "  <Input type = 'text' name = 'tagsinput' size = '20'/> <br/>  "  ;
  11  Document. getelementbyid (  "  Tags  "  ). Innerhtml  + =  STR;
  12     VaR  Itemnew  = Document. getelementsbyname (  "  Tagsinput  "  );
  13     For  (  VaR  I  = 0  ; I  <  Arr. length; I  ++  )
  14   {
  15   Itemnew. Item (I). Value  =  Arr [I];
 16   }
  17   }
  18      Function  Showtags (){
  19     VaR  Item  = Document. getelementsbyname (  "  Tagsinput  "  );
  20     For  (  VaR  I  = 0  ; I  <  Item. length; I  ++  )
  21   {
  22   Document. getelementbyid (  "  Showtags "  ). Innerhtml  + =  Item [I]. Value  +     "     "  ;
  23   }
 24   }
  25      </  Script  >  
  26      <  Form  Action  = ""  Method  = "Post" >  
  27     <  Input  Name  = "Addtag"  Type  = "Button"  Value  = "Add Tag"  Onclick  = "Addtags ()"  />  
  28    <  Div  ID  = "Tags"  > </  Div  >  
  29     <  BR  />  
  30   
  31    <  HR  />  
  32     <  Input  Type  = "Button"  Onclick  = "Showtags ()"  Value  = "Show tags"     /> 
  33     <  Div  ID  = "Showtags"  > </  Div  >  
  34      </  Form  >