How to get value of all components after first value..

Question

4.00/5 (1 vote)

See more:

Hi friends,
I am generating components like textboxes etc dynamically on a button click.
Now i want the value of all components and want to save these values in the database.
When implementing this i just getting value of 1st row and while next row coming and i am filling the value and clicking the corresponding button, still getting value of first row..

Here is the code..

XML

<html>
<head>
<script language="javascript" type="text/javascript">

function incrementCount() {
    document.frm.count.value = parseInt(document.frm.count.value) + 1;
    addTextBox();
}

function decCount() {
    document.frm.count.value = parseInt(document.frm.count.value) - 1;
    removeTextBox();
}

function addTextBox() {
    var form = document.frm;
    form.appendChild(document.createElement('div')).innerHTML = "<table width='40%'>"
        + "<tr><td>Name</td><td><input type='text' id='date' name='count'></td><td><select id='Reimbursement' name='Reimbursement'><option selected='selected' value='None'>None</option><option value='DA'>DA</option><option value='Ticket'>Ticket</option><option value='Misc'>Misc</option></select></td> <td><textarea name='ta' id='ta' ></textarea></td> <td><input type='checkbox' id='in_travel' name='chk' value='In Travel'></td><td><input type='button' value='Click' id='click' onClick='incrementCount1()' name='click'></td></tr>"
        + "</table>";
    incrementCount1() ;
}

function removeTextBox() {
    var form = document.frm;
    if (form.lastChild.nodeName.toLowerCase() == 'div')
        form.removeChild(form.lastChild);
}

function incrementCount1() {
var x=  document.getElementById('date').value;
var y= document.getElementById('Reimbursement').value;
var z= document.getElementById('in_travel').value;
var w=  document.getElementById('ta').value;
alert('textbox='+ x + <br/> + 'dd=' + y + 'check=' + z + 'textare=' + w);
}

</script>

<body>

<form name="frm">
<table width="40%" border="1">
<tr>
<td>Name: </td>
<td><input type="text" name="count" value="0" readonly ></td>
<td><INPUT type="button" value="ADD" name="add" onClick="incrementCount()"></td>
<td><INPUT type="button" value="Remove" name="remove" onClick="decCount()"></td>
</tr>
</table>
</form>

</body>
</html>

I just want that on clicking the row click button the value of that row components come and i can save them in the database..

If you done this before or have any idea related this type of work.
Pls let me know..
Many thanks to all of you..

Updated after using code provided by Mohibur Rashid..(Major issue How to get value of these object one by one.)

XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="js/jquery.min.js"></script>
<SCRIPT>
    RowCount=1;
    stat=false;
    function AddRow()
    {

        jQtable=$('#SaleTable');
        jQtable.each(function()
        {
            var LastRow="<TR><TD align=center><INPUT TYPE='text' name='ProductName_"+RowCount+"'></TD><TD align=center><INPUT style='text-align:right' type='TEXT' name='Quantity_"+RowCount+"' ID='Quantity_"+RowCount+"' size=10></TD><TD align=center><INPUT style='text-align:right'  type='checkbox' name='in_travel_"+RowCount+"' ID='in_travel_"+RowCount+"' size=10></TD><TD align=center><INPUT style='text-align:right' type='TEXT' name='UnitPrice_"+RowCount+"' ID='UnitPrice_"+RowCount+"' size=10></TD><TD align=center><textArea name='Remark_"+RowCount+"' ID='Remark_"+RowCount+"' cols=10></textArea></TD> <td align=center><select id='reimbursement_"+RowCount+"' name='reimbursement_"+RowCount+"'><option selected='selected' value='None'>None</option><option value='DA'>DA</option><option value='Ticket'>Ticket</option><option value='Misc'>Misc</option></select></td><TD align=center><INPUT style='text-align:right' type='submit' name='submit_"+RowCount+"' ID='submit_"+RowCount+"' onclick='getvalue()' value='Submit' size=10></TD><TD align=center></TR>";
            $(this).append(LastRow);
            });
RowCount++;
    }
    function removeTableRow()
    {
        jQtable=$('#SaleTable');
        if(RowCount > 1)
        {
            jQtable.each(function()
            {
                if($('tbody', this).length > 0)
                {
                    $('tbody tr:last', this).remove();
                }
                else
                {
                    $('tr:last', this).remove();
                }
            });
            RowCount--;
        }

    }

function getvalue()
	{
	////var inp= $('input:radio[name=PatientPreviouslyReceivedDrug]:checked').val();
		alert(RowCount);<--Value changing every time--->
var sl= $('input:text[name=Slno_+ RowCount]').val(); <--here Rowcount value remain same-->
alert(sl);
var in_tra= $('input:checkbox[name=in_travel_+ RowCount]:checked').val(); <--here Rowcount value remain same-->
alert(in_tra);
var slect=$("#reimbursement_+ RowCount option:selected").val();<--Value not Getting-->
alert(slect);
var val= $('input:text[name=Slno_2]').val(); <--need Like This when row count=2 -->
alert(val);

}
</SCRIPT>
</head>

<body>
<TABLE id='SaleTable'>
    <TR style='color:WHITE;font-weight:900;background:#4876FF;font-size:10pt'>
        <TD  align=center>
            Product Name
        </TD>
        <TD  align=center>
            Quantity
        </TD>
        <TD align=center>
            Unit Price
        </TD>
        <TD align=center>
            Total Price
        </TD>
        <TD align=center>
            Remarks
        </TD>
        <TD align=center>
            Type
        </TD>
        <TD align=center>
            Submit
        </TD>
    </TR>
    <TR>
        <TD align=center>
            <INPUT TYPE="TEXT" ID="ProductName_1">
        </TD>
        <TD align=center>
            <INPUT type='TEXT' name='Quantity_1' ID='Quantity_1' size=10 style='text-align:right'>
        </TD>
        <TD align=center>
            <input type="checkbox" name="in_travel_1" id="in_travel_1" value="in_terval" />
        </TD>
        <TD align=center>
            <INPUT type='TEXT' name='TotalPrice_1' ID='TotalPrice_1' size=10 style='text-align:right'>
        </TD>

        <TD align=center>
            <textArea name="Remark_1" ID="Remark_1" cols=10></textArea>
        </TD>
        <TD align=center>
            <select id="reimbursement_1" name="reimbursement_1" >
               <option selected="selected" value="">--None--</option>
               <option value="DA">DA</option>
               <option value="Ticket">Ticket</option>
               <option value="Misc">Misc </option>
               </select>
        </TD>
        <TD align=center>
            <INPUT type="submit" value="Submit" id="submit_1" name="submit_1" >
        </TD>
    </TR>
</TABLE>
<INPUT type="submit" value="Add" onclick='AddRow()'>
<INPUT type="submit" value="remove" onclick=' removeTableRow()'>
</body>
</html>

Thanks

Posted 27-Aug-12 19:54pm

Rajeshkrathor

Updated 29-Aug-12 19:27pm

v4

Add a Solution

3 solutions

Solution 1

You have lots of issue to deal with. but one major thing I will point out

everytime you click on Add button it create another sets of objects with same name as beginning. so whenever you click add button for the first time it a it creates another sets of objects. then it becomes array of objects.

then you cant get the values with document.frm.count.value.

in incrementCount1 you have accessed objects with ID, but you didn't put any identification to any objects. fix these :)

an example for your help:

C++

<SCRIPT>
	RowCount=1;
	stat=false;
	function AddRow()
	{
		 RowCount++; //Move up here
		jQtable=$('#SaleTable');
		jQtable.each(function()
		{
			var LastRow="<TR><TD align=center><INPUT TYPE='text' name='ProductName_"+RowCount+"'></TD><TD align=center><INPUT style='text-align:right' type='TEXT' name='Quantity_"+RowCount+"' ID='Quantity_"+RowCount+"' size=10></TD><TD align=center><INPUT style='text-align:right' type='TEXT' name='UnitPrice_"+RowCount+"' ID='UnitPrice_"+RowCount+"' size=10></TD><TD align=center><INPUT style='text-align:right'  type='TEXT' name='TotalPrice_"+RowCount+"' ID='TotalPrice_"+RowCount+"' size=10></TD><TD align=center><textArea name='Remark_"+RowCount+"' ID='Remark_"+RowCount+"' cols=10></textArea></TD><TD align=center></TR>";
			$(this).append(LastRow);
			});
              
	}	
	function removeTableRow()
	{
		jQtable=$('#SaleTable');
		if(RowCount > 1)
		{
			jQtable.each(function()
			{
				if($('tbody', this).length > 0)
				{
					$('tbody tr:last', this).remove();
				}
				else
				{
					$('tr:last', this).remove();
				}
			});
			RowCount--;
		}
		
	}
</SCRIPT>
<TABLE id='SaleTable'>
	<TR style='color:WHITE;font-weight:900;background:#4876FF;font-size:10pt'>
		<TD  align=center>
			Product Name
		</TD>
		<TD  align=center>
			Quantity
		</TD>
		<TD align=center>
			Unit Price
		</TD>
		<TD align=center>
			Total Price
		</TD>
		<TD align=center>
			Remarks
		</TD>
	</TR>
	<TR>
		<TD align=center>
			<INPUT TYPE="TEXT" ID="ProductName_1">	
		</TD>
		<TD align=center>
			<INPUT type='TEXT' name='Quantity_1' ID='Quantity_1' size=10 style='text-align:right'>
		</TD>
		<TD align=center>
			<INPUT type='TEXT' name='UnitPrice_1' ID='UnitPrice_1' size=10 style='text-align:right'>
		</TD>
		<TD align=center>
			<INPUT type='TEXT' name='TotalPrice_1' ID='TotalPrice_1' size=10 style='text-align:right'>
		</TD>
		
		<TD align=center>
			<textArea name="Remark_1" ID="Remark_1" cols=10></textArea>
		</TD>
	</TR>
</TABLE>
<INPUT onclick='AddRow()'>
<INPUT onclick='removeTableRow()' type='button' value='s'> <!--This will work now-->

To test this code also import jquery

Posted 27-Aug-12 21:01pm

Mohibur Rashid

Updated 28-Aug-12 21:31pm

v4

Comments

enhzflep 28-Aug-12 3:09am

If you have a closer look at the table that's created, you can see all the IDs in there.
form.appendChild(document.createElement('div')).innerHTML = "<table width='40%'>"
+ "<tr><td>Name</td><td><input type='text' id='date' name='count'></td><td><select id='Reimbursement' name='Reimbursement'><option selected='selected' value='None'>None</option><option value='DA'>DA</option><option value='Ticket'>Ticket</option><option value='Misc'>Misc</option></select></td> <td><textarea name='ta' id='ta' ></textarea></td> <td><input type='checkbox' id='in_travel' name='chk' value='In Travel'></td><td><input type='button' value='Click' id='click' önClick='incrementCount1()' name='click'></td></tr>"
+ "</table>";

Mohibur Rashid 28-Aug-12 3:36am

Its true, I didn't take the closer look, cause I was busy,
the issue with count name is still there. and he is creating objects again and again with the same id as well as same name.

[no name] 28-Aug-12 8:05am

Thanks Mohibur Rashid.
I have create another way..
here is the link http://www.codeproject.com/Questions/448467/How-to-add-object-as-table
but in this the problem is i can only getting same type of object..

Pls have a look and suggest.

Thanks

Mohibur Rashid 28-Aug-12 22:15pm

Well, here is a solution, very simple :)
you have a javascript counter right? yes you have.

now when you create a new element such as Name; give the id and name for this object as below:
"<input type='text' value='' id='Name_"+count+"' name='Name_"+count+"'>"
count++;
then append it. in your validation brows through 0 to count

[no name] 29-Aug-12 1:38am

Thanks Mohibur Rashid.
I couldnot able to apply this.
I am bit confuse. What are you saying..

Pls explain a bit(if possible).

Mohibur Rashid 29-Aug-12 1:51am

I will add an example updating my answer.

[no name] 29-Aug-12 2:37am

Thanks again Muhibur Rashid,
i used your code, it is working fine,
Except the remove button not working(i put there)
And the major issue now is how to get values of these objects one by one.

I have updated code (see Top).
Pls have a look and suggest.

Mohibur Rashid 29-Aug-12 2:52am

The thing is when you are creating a new object you are giving same name as before.

In my example if you read with real care(cause you are new) then you will see that all obejects are getting created with new id and name

[no name] 29-Aug-12 3:01am

Have you check the code i posted above.(at the TOP). i used your method..
thanks

[no name] 29-Aug-12 3:03am

Thanks the Row_remove is solved.

Mohibur Rashid 29-Aug-12 3:10am

now, do you know the difference? please analysis the code

[no name] 29-Aug-12 3:21am

Yes Mohibur Rashid..

i use this function
function getvalue()
{
alert(RowCount);
}
By this i am getting the change in row..
but when i use this

var a=document.getElementById('ProductName_"+RowCount+"');
alert(a);
to get the value of object then not working..
Showing Null..
Thanks

Mohibur Rashid 29-Aug-12 3:34am

I move up RowCount++. and remember when you try to read "ProductName_"+RowCount you will only get the last ProductName.

To browse any object : you can loop through

[no name] 29-Aug-12 3:38am

Thanks a lot Mohibur Rashid
var txt=$('input:text[name=ProductName_+ RowCount]').val();
This working fine now..

Many Many Thanks..

Mohibur Rashid 29-Aug-12 3:52am

really? it should not work

[no name] 29-Aug-12 4:15am

Why should not work?
it is working...

[no name] 30-Aug-12 0:22am

Hi Mohibur Rashid,
You were right.
Its not working..
Taking the value of objects of first row.
even the count is increasing .
here what i used..

var sl= $('input:text[name=Slno_+ RowCount]').val();
alert(sl);
var in_tra= $('input:checkbox[name=in_travel_+ RowCount]:checked').val();
alert(in_tra);

Thnaks

Mohibur Rashid 30-Aug-12 0:36am

it was not suppose to. use this statement below example:
$("#ProductName_1").val(); //figure out rest

[no name] 30-Aug-12 0:40am

This the the main issue, there may be multiple of objects one can create.
if it will not take automatically then all work will be wasted..
thanks

Mohibur Rashid 30-Aug-12 0:45am

I have created at least 100 application with this, and all of them has multiple row to process, think little harder, you will get your way out

[no name] 30-Aug-12 0:54am

yes i have to..
thanks

Solution 2

While adding the dynamic control's, their ID's are kept fixed by you. Thus, while updating, when you try to find the control, first available control value is passed on.

You need to have different names for the dynamic controls. Easiest would be to have a counter and add that counter number to the predefined control name such that row1 textbox is textbox1, row2 textbox is textbox2, etc.

While saving, based on the rownumber, find the control and update the value.

Posted 27-Aug-12 21:47pm

Sandeep Mewara

Comments

[no name] 28-Aug-12 8:06am

Thanks sandeep Mewara..
check this link..

http://www.codeproject.com/Questions/448467/How-to-add-object-as-table

Thanks

Mohibur Rashid 29-Aug-12 3:32am

I move up RowCount++. and remember when you try to read "ProductName_"+RowCount you will only get the last ProductName

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Rajeshkrathor · Accepted Answer · 2012-08-29T20:28:00

i solve it finally With the help of Mohibur Rashid (Many Thanks)

C#

Use this
 $(LastRow).find(':submit').click(getvalue).end().appendTo('#SaleTable');

instead of

 $(this).append(LastRow);

and
function getvalue() {
    var row = $(this).closest('tr');
    var sl = $('input:text[name^="Slno_"]', row).val();
    alert(sl);
    var in_tra = $('input[name^="in_travel_"]:checked', row).val();
    alert(in_tra);
    var slect = $('select[name^="reimbursement_"]', row).val();
    alert(slect);
}

instead of.

function getvalue()
    {
    ////var inp= $('input:radio[name=PatientPreviouslyReceivedDrug]:checked').val();
        alert(RowCount);
var sl= $('input:text[name=Slno_+ RowCount]').val();
alert(sl);
var in_tra= $('input:checkbox[name=in_travel_+ RowCount]:checked').val();
alert(in_tra);
//var slect=$('input:select[name=reimbursement_+ RowCount]:selected').val();

var slect=$("#reimbursement_+ RowCount option:selected").val();
alert(slect);
var val= $('input:text[name=Slno_2]').val();
alert(val);

}