| |
|
View Example
In this tutorial we will learn how create inputs dynamically using javascript.
You can add any input controls in the run time using the javascript statement
t1[i]=document.createElement('input');
Here the javascript statement that creates the input element is document.createElement('input');
Then we have to assign the reference of this newly created input element to some variable. Here we have assigned it to an array named t1 at "i" th position.
Next we have to assign different attributes or properties of this newly created input element.
First we have used the javascript statement
t1[i].type='text';
This statement makes the newly created input "t1[i]" as a "text" input. In the similar way we can set the other attributes of the input element like
t1[i].name='text'+i;
t1[i].value = "hello";
t1[i].size = 10;
Next , we have to display this input on a form. This is done by the javascript statement
document.forms[0].appendChild(t1[i]);
Next, we have to execute this piece of code from the "onclick" event of a "button" control.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from old browsers
var i=0,j=0;
var t1= new Array();
function createtext(){
i++;
t1[i]=document.createElement('input');
t1[i].type='text';
t1[i].name='text'+i;
t1[i].value = "hello";
t1[i].size = 10;
document.forms[0].appendChild(t1[i]);
var mybr=document.createElement('<br>');
document.appendChild(mybr);
}
</SCRIPT>
</HEAD>
<BODY >
<form action="" method="get" name="f1">
<input name="b1" type="button" onClick="createtext()" value="new text">
</form>
</BODY>
</HTML>
In similar way we can create other input types. We just have to set the type of the input element as required.
For example , to create an "button" input we have to write the javascript statement
var b1 =document.createElement('input');
b1.type='button';
Also , we can create tables using javascript. But we have to set the parent child relationship between the different elements of the table properly
This rletionship is as follows
table(table)--> tablebody(tbody) --> tablerow(tr) -->tablecolumn(td)
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--Hide from old browsers
var i=0,j=0;
var tb = [];
var tr = [];
var td = [];
var tbody1 ;
var ttd = [];
var img = [];
var cells = [];
var el = [];
myId = [];
var row;
function createtable(){
j++;
tb = document.createElement('table');
tb.width = "100%";
tb.border = 1;
tb.setAttribute("cellpadding", "0");
tb.setAttribute("cellspacing", "0");
tbody1 = document.createElement('tbody');
tr[j] = document.createElement('tr');
for (var k=0;k<3;k++){
td[j] = document.createElement('td');
td[j].align = "center";
el[j] = document.createElement('input');
el[j].type = 'text';
el[j].name='text'+j;
el[j].value = "hello";
el[j].setAttribute("maxlength", "100");
el[j].size = 10;
td[j].appendChild(el[j]);
tr[j].appendChild(td[j]);
}
tbody1.appendChild(tr[j]);
tb.appendChild(tbody1);
sp=document.getElementById("ctable");
sp.appendChild(tb);
}
</SCRIPT>
</HEAD>
<BODY >
<form action="" method="get" name="f1">
<input name="b2" type="button" onClick="createtable()" value="new table">
</form>
<span id="ctable"></span>
</BODY>
</HTML>
Hope you have enjoyed the tutorial. Thank You.
Download Code
Back to Tutorial Index page
Your comments are most welcome admin@koderguru.com
|
|
|
