| View previous topic :: View next topic |
| Author |
Message |
Daniel
Contributing Member
Joined: 14 Feb 2007
Posts: 207
|
 Posted: Mon Mar 05, 2007 12:30 pm Post subject: adding textboxes dynamically using Java Script |
 |
|
Hi All,
I need to add text boxes dynamically when clicks on Add link using JavaScript so it doesnt have to process in the server. How do i do this?
Thanks |
|
| Back to top |
|
 |
MsN
Tech Author
Joined: 14 Mar 2007
Posts: 61
|
| Posted: Tue Mar 20, 2007 12:03 pm Post subject: |
|
|
The following example shows how to add text to html through Java Script. See the html code and the function used.
Code
| Code: | <html>
<head>
<script language=javascript>
function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1 + 2);
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<input type=text id=' + num + ' value=' + num + '><a href="javascript:remove('+divIdName+')">Remove</a>';
ni.appendChild(newdiv);
}
function remove(dId) {
var ni = document.getElementById('myDiv');
ni.removeChild(dId);
}
</script>
</head>
<body>
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:addElement()" >Add TextBox</a></p>
<div id="myDiv"></div>
</body>
</html> |
Expalnation
When user clicks the link 'Add TextBox' java script function addElement is called. The html hold a hidden input type to hold the numeric id of last textbox created. In the starting it will be 0. Each newly created textbox should have a unique ID so that when the form is submitted, value for each textbox can be obtained on the server using ASP or PHP.
Now lets see the function
First it will get the div to which newly created element should be added.
var ni = document.getElementById('myDiv');
Then it will get the element that holds the numeric unique id for new elements. Then it will get the number for new element and assign it to the value holding element
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1 + 2);
numi.value = num;
So now the variable num has the new numeric value to be assigned to the new element. See that the element value is also updated.
You may be confused with why the above code has -1 + 2. This is to force the script to do numeric addition instead of concatenation of string. -1+2 is 1 so its same as (document.getElementById('theValue').value +1) but if we use this instead of addition concatenation take place. like first time num will be 0, then 01, then 011 so on. To avoid this and to force numeric addition we use - inbetween and get the result we need.
Now we create a new div element which hold the new textbox. See that how we assign unique id to the new div and text box.
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<input type=text id=' + num + ' value=' + num + '><a href="javascript:remove('+divIdName+')">Remove</a>';
The html code for Textbox is generated and it also have a <a> tag which calls the function to remove that particular textbox. For removing we pass the unique id to the function.
At the end we just append the newly created div to the main div in the html code body tag.
ni.appendChild(newdiv);
Removing part just get the main div from and remove the child. The id of the div tag to be removed is passed to the function.
Hope that this code helped you. You can replace textbox and put in any component you need.
_________________
--------------
MsN |
|
| Back to top |
|
|
warhead2020
Junior Member
Joined: 08 Apr 2009
Posts: 1
|
| Posted: Wed Apr 08, 2009 9:21 am Post subject: |
|
|
Hi MSN, i had altered a bit ur code..
first.php
--------------------------------------------------------------------------------
<script language="javascript" >
function addElement()
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1 + 2);
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = '<input type=file id=imgfile' + num + ' name=imgfile' + num + '><a href="javascript:remove('+divIdName+')">Remove</a>';
ni.appendChild(newdiv);
}
function remove(dId)
{
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1 + 0);
numi.value = num;
ni.removeChild(dId);
}
<form name="frmUp" method="post" action="AddListUploadPictureProp.php">
<p><a href="javascript:addElement()" >Add Upload Field</a></p>
<p>
<input type="hidden" value="0" id="theValue" name="theValue"/>
</p>
<table width="100%" border="0">
<tr>
<td>
<div id="myDiv">
</div>
</td>
</tr>
<tr>
<td><label>
<input type="submit" name="button" id="button" value="Submit" />
</label></td>
</tr>
</table>
<div id="myDiv">
</div>
</form>
-----------------------------------------------------------------------------
second.php
----------------------------------------------
$theValue = $_REQUEST['theValue'];
echo "theValue " . $theValue;
for($i = 1;$i <= $theValue;$i++)
{
echo basename($_FILES['imgfile' . $i]['name']);
}
------------------------------------------------
in the second.php, i cant grab the " echo basename($_FILES['imgfile' . $i]['name']); "...any error in my code? thanx in advance.. |
|
| Back to top |
|
|
|
