access dynamically created textfield with jquery

[adeeb alexander]

Hi all.

I am currently able to sum up values of given text field, and want to do the same by creating dynamic textfields and accessing them by their classnames. I have successfully created dynamic textfields. I have checked the code with firebug. All class names are correctly assigned as it was done manually. Now I am not getting the output when I am creating textfields dynamically. Is this possible or I have simply for so long??



Thanks and Regards
Adeeb.

[Bear Bibeault]

"not getting the output" <-- what does this mean?

Please explain things more clearly.

[adeeb alexander]

Thanks for the reply Bear.


To be more clear when I am hand coding the elements like below

<tr>
<td>
<input type="checkbox">
</td>
<td>
<input type="text" value="test">
</td>
<td>
<input class="1a" type="text">
</td>
<td>
<input id="1a" class="qty" type="text">
</td>
<td>
<input id="1at" class="tot" type="text">
</td>
</tr>

in the table and using jquery I am doing multiplication operation. This is fine. It is working if define in the code those elements. The problem is I am creating elements dynamically on clicking the button. The code is below

function addRow(tableID)
	{
			//		alert(text+id);
		var table = document.getElementById(tableID);
		var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
            var cell1 = row.insertCell(0);//chekbox
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            cell1.appendChild(element1);
 
            var cell2 = row.insertCell(1);//item
            var element2 = document.createElement("input");
            element2.type = "text";
		//	element2.setAttribute("name","txt");
			element2.setAttribute("value","test");
            cell2.appendChild(element2);
			
 
            var cell3 = row.insertCell(2);//price
            var element3 = document.createElement("input");
			element3.type = "text";
						element3.setAttribute("class","1a");			
            cell3.appendChild(element3);
			
			var cell4 = row.insertCell(3);//qty
            var element4 = document.createElement("input");
            element4.type = "text";
			element4.setAttribute("id","1a");
			element4.setAttribute("class","qty");			
            cell4.appendChild(element4);
			
			var cell5 = row.insertCell(4);//tot
            var element5 = document.createElement("input");
            element5.type = "text";
			element5.setAttribute("class","tot");
			element5.setAttribute("id","1at");
            cell5.appendChild(element5);
	}

This is also fine the fields are created. But jquery is not working on it. NOTE: There is no mistake in assigning classes and id's as I have copied the code from fire bug, then pasted in the table and tested. But again the same code when generated by clicking the button I think jquery is unable to access it. How can that be, I am not sure and confused. My Jquery code is below.

<script language="javascript" type="text/javascript">
$(document).ready(function(){
		  $(".qty").each(function() {
		$(this).keyup(function() {
		
			var $abc = $(this).prop("id");
		   // var v= $abc
		  //  alert('.'+$abc);
		   // alert('#'+$abc+'t');
			var a = $('.1a').val();
			var b = $(this).val();
			$('#1at').val(a * b);
			calculateSum();
		});
		});
});
    function calculateSum() {
 
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".tot").each(function() {
 
            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }
 
        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#sum").html(sum.toFixed(2));
 }
	</script>

Thanks.

[Bear Bibeault]

Why aren't you using jQuery to create the elements?

And please fix up the wonky indentation. Makes the code really hard to read.

And, have you used the JavaScript console to inspect the DOM after the additions so you can see if the elements have been added as you expect?

[adeeb alexander]

So, you mean in order to access the elements with jquery I have to create elements with jquery only???

[Bear Bibeault]

Please show me where I said that.

No, I asked why you were doing things the hard way instead of the easy way.

[adeeb alexander]

K sorry I got you in wrong way. I will create with jquery later. First I want to know what the exact problem is, where I am going wrong. Also I am not good in jquery, and this type of bugs are scaring me. :d. I am struck here from almost 8 hrs. How can this be, the elements created have exactly same values as I wrote manually. Its working when written manually but not when auto generated.


Thanks Bear for spending your time looking into the problem.

[adeeb alexander]

Hey this could give a clear understanding of the problem. The code below contains both hardcoded(written in file) and auto generated code. The above is written manually. The second row is auto generated. Now only first row is giving the desired output. i.e if I enter value in 2nd and 3rd text field I am getting result in 4th textfield.

<body>
<form action="result.jsp" method="post" name="exp4">
<input type="button" value="click me" onclick="addRow("dataTable")">
<table id="dataTable">
 <tbody>
 <tr></tr>
 <tr>
 <td>
 <input type="checkbox">
 </td>
 <td>
 <input type="text" value="test">
 </td>
 <td>
 <input class="1a" type="text">
 </td>
 <td>
 <input id="1a" class="qty" type="text">
 </td>
 <td>
 <input id="1at" class="tot" type="text">
 </td>
 </tr>
 <!--  Auto generated code from here -->
 <tr>
 <td>
 <input type="checkbox">
 </td>
 <td>
 <input type="text" value="test">
 </td>
 <td>
 <input class="1a" type="text">
 </td>
 <td>
 <input id="1a" class="qty" type="text">
 </td>
 <td>
 <input id="1at" class="tot" type="text">
 </td>
 </tr>
 </tbody>
 </table>
<span id="sum">12.00</span>
</form>

Thanks

[Bear Bibeault]

Did you follow my instructions regarding using the JavaScript console to inspect the DOM to see if the elements are created as intended?

If not, then you are wasting both our time.

And please indent your code and HTML. I will no longer look at unformatted code now that you've been asked twice.

[adeeb alexander]

Hi Bear.
I dint understand what code format you are talking about. Please give a small example so that i wont do such mistakes again. The problem is solved and the code is below. Hope this will be useful for someone.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
		$('#add').click(function(){
			addRow('t')
		})
	});
	function keyup() {
		var a = $(this).closest('tr').find('.1a').val();
		var b = $(this).val();
		$(this).closest('tr').find('.tot').val(a * b);
		calculateSum();
	}
	function calculateSum() {
		var sum = 0;
		//iterate through each textboxes and add the values  
		$(".tot").each(function () {
			//add only if the value is number  
			if (!isNaN(this.value) && this.value.length != 0) {
				sum += parseFloat(this.value);
			}
		});
		//.toFixed() method will roundoff the final sum to 2 decimal places  
		$("#sum").html(sum.toFixed(2));
	}
	function addRow(tableID) {
		//      alert(text+id);  
		var table = document.getElementById(tableID);
		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);
		var cell1 = row.insertCell(0); //chekbox  
		var element1 = document.createElement("input");
		element1.type = "checkbox";
		cell1.appendChild(element1);
		var cell2 = row.insertCell(1); //item  
		var element2 = document.createElement("input");
		element2.type = "text";
		//  element2.setAttribute("name","txt");  
		element2.setAttribute("value", "test");
		cell2.appendChild(element2);
		var cell3 = row.insertCell(2); //price  
		var element3 = document.createElement("input");
		element3.type = "text";
		element3.setAttribute("class", "1a");
		cell3.appendChild(element3);
		var cell4 = row.insertCell(3); //qty  
		var element4 = document.createElement("input");
		element4.type = "text";
		element4.setAttribute("class", "qty");
		cell4.appendChild(element4);
		$(element4).keyup(keyup)
		var cell5 = row.insertCell(4); //tot  
		var element5 = document.createElement("input");
		element5.type = "text";
		element5.setAttribute("class", "tot");
		cell5.appendChild(element5);
	}
</script>
</head>
<body>
<button id="add">add</button>
<table id="t"></table>
<span id="sum"></span>
</body>
</html>

Thanks for the Help Bear.