Category: JQuery

24 Apr 2015 07:09

Joined:	20/01/2015
Level:	Bronze
Points:	51

Points:	5

Get values of textbox that is added dynamically in button click

Hi,

This is the script used by me to add rows dynamically containing textbox

<script type="text/javascript">
var rowCount = 1;
function addMoreRows(frm) {
rowCount++;
var recRow = '<p id="rowCount' + rowCount + '"><tr ><td ><input name="" type="text" size="17%" maxlength="120" /></td><td><input name="" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input name="" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td><td> <a href="javascript:void(0);" onclick="removeRow(' + rowCount + ');">Delete</a></td></tr></p>';
jQuery('#addedRows').append(recRow);
}

function removeRow(removeNum) {
jQuery('#rowCount' + removeNum).remove();
}
</script>

code in aspx

<table rules="all" style="background:#fff;">
<tr>
<td style="font-size:14px;" >Weight</td>
<td style="font-size:14px;">MRP</td>
<td style="font-size:14px;">Price</td>
<td><span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);">
Add More
</span>
</td>

</tr>
<tr id="rowId" class="nr">
<td><input name="" type="text" size="17%" maxlength="120"/></td>
<td><input name="" type="text" size="17%" maxlength="120"/></td>
<td><input name="" type="text" size="17%" maxlength="120" /></td>
<td></td>
</tr>

<tr>
<td colspan="6" >
<p id="addedRows"></p>
</td>
</tr>

</table>

now i want to get the values of dynamically added tr textbox and insert in database.
so how can i get the count of tr that is added dynamically in jquery?

how can i get the values of all textbox that is added dynamically in jquery?

#758317

25 Apr 2015 08:21

Joined:	30/11/2012
Level:	Gold
Points:	520

Points:	3

Hi saara,

Just give a distinct name for each field you are appending i.e input name like you have given for ID.

id="rowCount' + rowCount + '"

So each ID value you know now.. as you know what is going to be your rowcount just use this ID and save the details accordingly.

Hope This Helped!

Regards,
J.Sunil Jas
www.thisisdotnet.blogspot.com

#758348

27 Apr 2015 02:55

Joined:	13/06/2007
Level:	Gold
Points:	21327

Points:	4

With the help of 'findcontrol()' method of TR or you can loop on each table row and search the control type there, see below snippet


foreach (TableRow tr in tbl.Controls )
        {
            foreach (TableCell tc in tr.Controls)
            {
 
                if (tc.Controls[0] is TextBox)
                { 
                    Response.Write(((TextBox)tc.Controls[0]).Text);         
                }
            }
            Response.Write("<br/>");  
        }

hope it helps

Thanks
Koolprasd2003
Editor, DotNetSpider MVM
Microsoft MVP 2014 [ASP.NET/IIS]

#758387

28 Apr 2015 04:26

Joined:	17/03/2009
Level:	Gold
Points:	2282

Points:	4

Hi

Try like this

<code>
Added a new css class to all text boxes
'studentGrade'

<input type="text" class="studentGrade" id="student_grade1" >
<input type="text" class="studentGrade" id="student_grade2" >
<input type="text" class="studentGrade" id="student_grade3" >

<input type="button" id="save_button" class="button" value="Save Student Grades">

jquery logic to read textbox values

$('#save_button').click(function (){
$.each($('.studentGrade'), function(i, item) {
var stuGrade = $('#student_grade['+i+']').val();
alert(stuGrade);
});
});
</code>

Check the following links also

http://www.jqueryfaqs.com/Articles/Dynamically-add-and-remove-TextBoxes-and-get-value-of-dynamic-TextBox-using-jQuery.aspx

http://stackoverflow.com/questions/11271457/how-to-get-value-of-all-textbox-of-div

Get values of textbox that is added dynamically in button click

About dotnetspider.com

Quick Links

General

Services