Hi friends....
In this post i will explain how to create Dynamic form control using javascript.
Ok Lets come
You make dynamic form controls just follow following steps.
Dynamci Form:
There are 8 or 10 steps you follow, easily make dynamic form controls in your webpage. Am explain one control to dynamci add and remove
Step 1:
You create form in your page, like one textbox, and button and event attribute onclick call the function in following way
<div id="dynamic">
Contact No:<input id="contact1" type="text" />
<input id="Button1" type="button" value="Add More" onclick="makeDynamic()" />
</div>
Step 2:
And write script in <head> tag. You must assign row counting, because it use make dynamic like following way
<head>
<script type="text/javascript">
var row=1;
function makeDynamic()
{
}
</script>
</head>
Step 3:
You start inside function, when Add more button click the function will called, you start increase your counting variable row++, and refrence your dynamic area.. like following way
<script type="text/javascript">
var row=1;
function makeDynamic()
{
row++;
var dynamic=document.getElementById('dynamic');
}
Step 4:
You create the dynamic control appear new portion like newdynamic div. You craete dynamic use two methods
1.createElement
2.setAttribute
Like the following way
var newdynamic=document.createElement('div');
newdynamic.setAttribute('id','innerDiv'+row);
Step 5:
Next you create dynamic text like lable in following way
var newSpan=document.createElement('span');
newSpan.innerHTML="ContactNo: ";
Step 6:
You make dynamic control textbox use above two attributes createElement,setAttribute and more control type like text,button etc
var newTextBox=document.createElement('input');
newTextBox.type='text';
newTextBox.setAttribute('id','contact1'+row);
Step 7:
Dynamically add remove button like following way
var newButton=document.createElement('input');
newButton.type='button';
newButton.value='Remove';
newButton.id='btn'+row;
Step 8:
Add the event in dynamic remove button like following way
newButton.onclick=function RemoveEntry()
{
var dynamic=document.getElementById('dynamic');
dynamic.removeChild(this.parentNode);
}
Step 9:
Add all dynamic controls are append in main dynamic parts like following way
newdynamic.appendChild(newSpan);
newdynamic.appendChild(newTextBox);
newdynamic.appendChild(newButton);
Step 10:
Finally add dynamic controls are in append in above dynamic parts in html. like following way
dynamic.appendChild(newdynamic);
The above example code here
<html>
<head>
<script type="text/javascript">
//step2
var row=1;
function makeDynamic()
{
//step3
row++;
var dynamic=document.getElementById('dynamic');
// step4
var newdynamic=document.createElement('div');
newdynamic.setAttribute('id','innerDiv'+row);
//step5
var newSpan=document.createElement('span');
newSpan.innerHTML="ContactNo: ";
// step6
var newTextBox=document.createElement('input');
newTextBox.type='text';
newTextBox.setAttribute('id','contact1'+row);
// step7
var newButton=document.createElement('input');
newButton.type='button';
newButton.value='Remove';
newButton.id='btn'+row;
// step8
newButton.onclick=function RemoveEntry() { var dynamic=document.getElementById('dynamic');
dynamic.removeChild(this.parentNode);
}
//step9
newdynamic.appendChild(newSpan);
newdynamic.appendChild(newTextBox);
newdynamic.appendChild(newButton);
//step10
dynamic.appendChild(newdynamic);
}
</script>
<title>Dynamic Form Control</title>
</head>
<body>
<div id="dynamic">
Contact No:<input id="contact1" type="text" />
<input id="Button1" type="button" value="Add More" onclick="makeDynamic()" />
</div>
</body>
</html>
Output is:
In this post i will explain how to create Dynamic form control using javascript.
Ok Lets come
You make dynamic form controls just follow following steps.
Dynamci Form:
There are 8 or 10 steps you follow, easily make dynamic form controls in your webpage. Am explain one control to dynamci add and remove
Step 1:
You create form in your page, like one textbox, and button and event attribute onclick call the function in following way
<div id="dynamic">
Contact No:<input id="contact1" type="text" />
<input id="Button1" type="button" value="Add More" onclick="makeDynamic()" />
</div>
Step 2:
And write script in <head> tag. You must assign row counting, because it use make dynamic like following way
<head>
<script type="text/javascript">
var row=1;
function makeDynamic()
{
}
</script>
</head>
Step 3:
You start inside function, when Add more button click the function will called, you start increase your counting variable row++, and refrence your dynamic area.. like following way
<script type="text/javascript">
var row=1;
function makeDynamic()
{
row++;
var dynamic=document.getElementById('dynamic');
}
Step 4:
You create the dynamic control appear new portion like newdynamic div. You craete dynamic use two methods
1.createElement
2.setAttribute
Like the following way
var newdynamic=document.createElement('div');
newdynamic.setAttribute('id','innerDiv'+row);
Step 5:
Next you create dynamic text like lable in following way
var newSpan=document.createElement('span');
newSpan.innerHTML="ContactNo: ";
Step 6:
You make dynamic control textbox use above two attributes createElement,setAttribute and more control type like text,button etc
var newTextBox=document.createElement('input');
newTextBox.type='text';
newTextBox.setAttribute('id','contact1'+row);
Step 7:
Dynamically add remove button like following way
var newButton=document.createElement('input');
newButton.type='button';
newButton.value='Remove';
newButton.id='btn'+row;
Step 8:
Add the event in dynamic remove button like following way
newButton.onclick=function RemoveEntry()
{
var dynamic=document.getElementById('dynamic');
dynamic.removeChild(this.parentNode);
}
Step 9:
Add all dynamic controls are append in main dynamic parts like following way
newdynamic.appendChild(newSpan);
newdynamic.appendChild(newTextBox);
newdynamic.appendChild(newButton);
Step 10:
Finally add dynamic controls are in append in above dynamic parts in html. like following way
dynamic.appendChild(newdynamic);
The above example code here
<html>
<head>
<script type="text/javascript">
//step2
var row=1;
function makeDynamic()
{
//step3
row++;
var dynamic=document.getElementById('dynamic');
// step4
var newdynamic=document.createElement('div');
newdynamic.setAttribute('id','innerDiv'+row);
//step5
var newSpan=document.createElement('span');
newSpan.innerHTML="ContactNo: ";
// step6
var newTextBox=document.createElement('input');
newTextBox.type='text';
newTextBox.setAttribute('id','contact1'+row);
// step7
var newButton=document.createElement('input');
newButton.type='button';
newButton.value='Remove';
newButton.id='btn'+row;
// step8
newButton.onclick=function RemoveEntry() { var dynamic=document.getElementById('dynamic');
dynamic.removeChild(this.parentNode);
}
//step9
newdynamic.appendChild(newSpan);
newdynamic.appendChild(newTextBox);
newdynamic.appendChild(newButton);
//step10
dynamic.appendChild(newdynamic);
}
</script>
<title>Dynamic Form Control</title>
</head>
<body>
<div id="dynamic">
Contact No:<input id="contact1" type="text" />
<input id="Button1" type="button" value="Add More" onclick="makeDynamic()" />
</div>
</body>
</html>
Output is:
I hope this useful
Thanks..
No comments:
Post a Comment