Contact Us
  
 
 
    SearchSearch   RegisterRegister   Log inLog in 

Add HTML text boxes at runtime in javascript

Add HTML text boxes at runtime in javascript

 
Post new topic   Reply to topic     Forum Index -> JavaScript, DHTML, AJAX
View previous topic :: View next topic  
Author Message
juniormember



Joined: 28 Jun 2008
Posts: 154

PostPosted: Sun Jul 20, 2008 11:39 am    Post subject: Add HTML text boxes at runtime in javascript Reply with quote

This example help to add more text box in html and through javascript

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add text boxes at run time in javascript</title>
<script>
var cnt=2;
var valueput="";
var arSetValue=new Array();
function setArray()
{
 var elements=document.frm.elements.length;
 var arcnt=0;
 for(j=0;j<elements;j++){
    if(document.frm.elements[j].name=="sVariable")
    {
     arSetValue[arcnt]=document.frm.elements[j].value;
     arcnt++;
    }
  }   
}

function addMore()
{
  var htmlVariable="";
  for(var i=1;i<=cnt;i++)
  {
    valueput="";
    if(cnt>i)
   {
    valueput=arSetValue[i-1];
   }
    htmlVariable=htmlVariable+"<input type=\"text\" name=\"sVariable\" value='"+valueput+"'><br /><br/>";
  }
  cnt++;
  document.getElementById("sVariable").innerHTML=htmlVariable;
}

function addLess()
{
  var htmlVariable="";
  if(cnt>2){
  cnt--;
  }
     for(var i=cnt;i>1;i--)
     {
      valueput="";
      if(cnt-i>=0)
      {
       valueput=arSetValue[cnt-i];
      }
      htmlVariable=htmlVariable+"<input type=\"text\" name=\"sVariable\" value='"+valueput+"'><br /><br/>";
     }

  document.getElementById("sVariable").innerHTML=htmlVariable;
 }
</script>
</head>

<body>
<form  name="frm" method="post">
<div><a href="javascript:setArray();addMore();">Add More Text Box</a> &nbsp;&nbsp;<a href="javascript:addLess()">Remove Text Box</a></div>
<div id="sVariable"><input type="text" name="sVariable" /></div>
</form>
</body>
</html>
Back to top
View user's profile Send private message
bhumij



Joined: 08 Dec 2008
Posts: 2

PostPosted: Fri Dec 12, 2008 1:40 pm    Post subject: Reply with quote

Good example to add html form fields at runtime.

We can add dynamic field by dom property. It is more easy and good to use DOM of javascript

http://www.quirksmode.org/dom/domform.html

Any form field or html tag can created dynamic with DOM property of browser try that also
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic     Forum Index -> JavaScript, DHTML, AJAX All times are GMT
Page 1 of 1

 
Jump to:  
  Quick Post a Reply Topic
     
  Name (required)  
     
  Email Address (will not be published) (required)  
     
  Subject of topic (required)  
     
   
     
   
     
  Advertisement  
     
 
     


  More Links  
 
JSP Introduction
JSP Setup
Simple JSP Example
JSP Variable
Array Declaration in JSP
JSP Forms and User Input
Form Validation
JSP Cookies
JSP Session Object
Loop, content collection, iterator, conditional check in JSP
JSP Application Object
JSP Include
JSP Response Object
JSP Request Object
JSP Error Handling
JSP File Handling Object
JSP Action Tag
JSP Implicit Objects
JSP Declaration
JSP Directive
JDBC Introduction
JDBC Driver
JDBC Connection
JDBC Prepared/Statement
JDBC ResultSet
JDBC Close Connection object
JDBC Insert
JDBC Display Records
JDBC Update
JDBC Delete
JDBC Sorting
JDBC Query
JDBC Exception
JDBC Add Batch
JDBC Transaction/RollBack