HI folks....
I want to create a form that includes a textBox and a button,when ever i will click the button i shuld want to create a new text box.and i want to take the value of the each text box when a second button click.If anybody knows the answer plz inform me..
Thanxzz in advance..
Jithesh
You can do this by many ways. One way is by doing Javascript.
Please refer the below site for your reference.
Please visit the daniweb javascript/dhtml/ajax forum
thanx mahendrabilla i have seen the example u suggeted . But in my question there ll not be any text box user have to create the text box wen the button click, and shuld take the values from that...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;
cellRight.appendChild(el);
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
<BODY>
<form action="sample.html">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<input type="button" value="Submit" onclick="validateRow(this.form);" />
<input type="checkbox" id="chkValidate" /> Validate Submit
</p>
<p>
<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
</p>
<table border="1" id="tblSample">
<tr>
<th colspan="3">Sample table</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="txtRow1"
id="txtRow1" size="40" /></td>
</tr>
</table>
</form>
</BODY>
</HTML>
Paste the above code in Notepad and Save the file as .html. And Check whether that satifiies your reqirement.
Thanks,
Mahendra Vishwanath Billa
---------------------------------------------------------------
Please mark the thread as Solved if it satifies your requirements.
Thnx mahendrabilla this is what i need..but I need to take the values of the textbox. did u know how we can take the values of that textbox in server side..??
Along with text box, create the corresponding Hidden Control of type server control (runat=server) for each text box. Then save the value of textbox to these hidden controls. The value of these hidden controls you can fetch as server side script where as textbox you cannot. Specify the ids uniquely for each hidden control.
Thanks,
Mahendra Vishwanath Billa
---------------------------------------------------------------
Please mark the thread as Solved if it satifies your requirements.
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;
cellRight.appendChild(el);
var elh = document.createElement('input');
elh.type = 'hidden';
elh.runat ='server'; //This need to check
elh.name = 'hdntxtRow' + iteration;
elh.id = 'hndtxtRow' + iteration;
cellRight.appendChild(elh);
}
Modify the function as said above to have the Hidden controls
Thanks,
Mahendra Vishwanath Billa
---------------------------------------------------------------
Please mark the thread as Solved if it satifies your requirements.
Using Request.Form(ControlID) you can fetch the control value at the server side if runat=server is not supporting.
Thanks,
Mahendra Vishwanath Billa
---------------------------------------------------------------
Please mark the thread as Solved if it satifies your requirements.
you can use ajax for this.
ok mr.mahendrabilla i got the idea to do the same...just i have done the following code to get the values in server side..now its working as per my requirement...thanks for your support..
<?php
if(isset($_POST["Submit"]))
{
for($i=0;$i<count($_POST);$i++)
{
if(!empty($_POST["txtRow".$i]))
{
echo $_POST["txtRow".$i]."<br />";
}
}
}?>
This java script is uusefull for this purpose.
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow' + iteration;
el.id = 'txtRow' + iteration;
el.size = 40;
cellRight.appendChild(el);
}Plz check these sites also.
<snipped>
how i get the value from this... please help me i have same prob... The textbox is generated successfully but i am unable to fetch the value which i have added in to the dynamically generated textbox
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.