Running a javascript on repeater items from a button or focus?

I have a form with a repeater with 3 textboxes (TextBox1, TextBox2, and TextBox3) and a button. The button is not part of the repeater.
When I click the button, I want to multiply TextBox1 and TextBox2 and have TextBox3 show the result if TextBox1 and TextBox2 are numeric, but do nothing if either TextBox1 or TextBox2 is blank or non-numeric for each line in the repeater.

Alternatively, I could add a button to each line of the repeater, or ideally run the script once the focus leaves either TextBox1 or TextBox2.

How would I achieve one of these scenarios?
Mike MillerSoftware EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mike MillerSoftware EngineerAuthor Commented:
     <script type="text/javascript" language="javascript">
         function calc() {
             var sum = 0;
             ('.cssSalary').each(function () {
                 sum = sum + parseInt((this).html());
             });
             ('.cssSum').html(sum);
         }
        </script>

Open in new window



			<asp:Repeater ID="Repeater4" runat="server">
			<ItemTemplate>
			<table>                    
		        <tr>
                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbPLUnits" runat="server" BorderStyle="None" class="cssSalary"></asp:TextBox></td>
                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbPLAPUnits" runat="server" BorderStyle="None" class="cssSalary"></asp:TextBox></td>
                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbTotalPieces" runat="server" CssClass="cssSum"></asp:TextBox></td>
                        </tr>
		        </table>
		        </ItemTemplate>
			</asp:Repeater>
			<BR>
			<button type="button" onclick='calc()'>Calc</button>

Open in new window


Returns...

Object doesn't support property or method 'each'


I've also tried putting the onclick='calc()' in the TD like in the example...same result.
0
CodeCruiserCommented:
I think its missing the $

$('.cssSalary').each(function () {
                 sum = sum + parseInt((this).html());
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Mike MillerSoftware EngineerAuthor Commented:
I'm getting '$' is not defined when I leave them in
0
CodeCruiserCommented:
Are you using JQuery?
0
Mike MillerSoftware EngineerAuthor Commented:
Yes, I had my ref to jquery I copied from the page and mine is in a folder called scripts. I changed that and it's running without the errors, but not appearing to do anything.
0
CodeCruiserCommented:
Use F12 developer tools to debug the javascript to see if it is being called and what's it doing.
0
Mike MillerSoftware EngineerAuthor Commented:
Ok, It's being called. The value of sum is NaN but I filled out all of the fields with numbers.


Repeater items:
                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbPLAPUnits" runat="server" BorderStyle="None" class="cssSalary"></asp:TextBox></td>
                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbPLUnits" runat="server" BorderStyle="None" class="cssSalary"></asp:TextBox></td>
                        <td align = "left" style="border:1px solid #A9A9A9;white-space: nowrap;"><asp:TextBox ID="tbTotalPieces" runat="server" BorderStyle="None" Cssclass="cssSum"></asp:TextBox></td>

Open in new window


Trigger:
<button type="button" onclick='calc()'>Click Me!</button>

Open in new window


Jquery:
        <script type="text/javascript" language="javascript">

            function calc() {
                var sum = 0;
                $('.cssSalary').each(function () {
                    sum = sum + parseInt($(this).html());
                });
                $('.cssSum').html(sum);
            }

        </script>

Open in new window

0
CodeCruiserCommented:
How many times is each function running? Is there any other control using cssSalary class?
0
Mike MillerSoftware EngineerAuthor Commented:
It runs through once for each item in the repeater times the number of times cssSalary is listed. In the example I'm using, there are six items and the function is run 12times. There are no other instances of cssSalary in the code aside from those listed above.
0
CodeCruiserCommented:
Can you give either your complete markup or page source?
0
Mike MillerSoftware EngineerAuthor Commented:
Ok, I'm just starting over here. Maybe you can help. Here's my current query...

            function calc() {
                var sum = 0;
                alert(sum);
            }

Open in new window


I've got this firing, and working properly. As expected, it returns the value of zero.

So I added this to the code:

            function calc() {
                var sum = 0;
                $('.cssSalary').each(function () {
                   sum = parseInt($(this).html());
                });
                alert(sum);
            }

Open in new window


Here is the textbox in the repeater:
<asp:TextBox ID="tbPLAPUnits" runat="server" BorderStyle="None" Height="19px" CssClass="cssSalary"></asp:TextBox>

The alert still fires, but returns NaN

Just for grins, I tried this:

            function calc() {
                var sum = 0;
                $('.cssSalary').each(function () {
                   sum = $(this).html();
                });
                alert(sum);
            }

Open in new window


Which just returned a blank alert. How would I just cycle through each repeater element and display the value in the alert? Maybe if I can figure that out, I can wrap this up.
0
Mike MillerSoftware EngineerAuthor Commented:
Ok made some progress...

Here's my texboxes in my repeater:

<asp:TextBox ID="tbPLAPUnits" runat="server" BorderStyle="None" Height="19px" CssClass="cssSalary"></asp:TextBox>
<asp:TextBox ID="tbPLUnits" runat="server" BorderStyle="None" Height="19px" CssClass="cssUnits"></asp:TextBox>
<asp:TextBox ID="tbTotalPieces" runat="server" BorderStyle="None" Height="19px" CssClass="cssTotal"></asp:TextBox>

Open in new window


My button that fires the jQuery:

<input type="button" id="filter" name="filter" value="Test" onclick="calc()" />

Open in new window


And my current jQuery:

        <script type="text/javascript" language="javascript">
                var sum = 0;
                var sum2 = 0;
                var sum3 = 0;
                $('.cssSalary').each(function () {
                    sum = $("input[id$=tbPLAPUnits]").val();
                });
                $('.cssUnits').each(function () {
                    sum2 = $("input[id$=tbPLUnits]").val();
                });
                sum3 = parseInt(sum) + parseInt(sum2)
                alert(sum3);
            }
        </script>

Open in new window


This will fire an alert with the total of the two textboxes. Works great. So now I need to figure out how to assign the value to the third textbox in the repeater instead of displaying it in an alert. Also I assume this will only work for 1 line in the repeater. Can I just do another "each" to make it work for every line?
0
Mike MillerSoftware EngineerAuthor Commented:
Ok, a bit more progress...

I removed the cssClass from the 2nd 2 textboxes:

<asp:TextBox ID="tbPLAPUnits" runat="server" BorderStyle="None" Height="19px" CssClass="cssSalary"></asp:TextBox>
<asp:TextBox ID="tbPLUnits" runat="server" BorderStyle="None" Height="19px"></asp:TextBox>
<asp:TextBox ID="tbTotalPieces" runat="server" BorderStyle="None" Height="19px"></asp:TextBox>

Open in new window


Then modified the jQuery like this:

        <script type="text/javascript" language="javascript">
            function calc() {
                var sum = 0;
                var sum2 = 0;
                var sum3 = 0;
                $('.cssSalary').each(function () {
                    sum = $(this).val();
                    sum2 = $(this).val();
                    sum3 = parseInt(sum) + parseInt(sum2)
                    alert(sum3);
                });
            }
        </script>

Open in new window


This fires of the alert with the values I need. No to just figure out how to assign those values to the 3rd textbox.
0
Mike MillerSoftware EngineerAuthor Commented:
Ok that actually wasnt working. I was using the same numbers in each line and it was just adding them from one texbox to itself. So back to the original code:

        <script type="text/javascript" language="javascript">
            function calc() {
                var sum = 0;
                var sum2 = 0;
                var sum3 = 0;
                $('.cssSalary').each(function () {
                    sum = sum + parseInt($(this).val());
                });
                alert(sum)
            }
        </script>

Open in new window


This is giving me the total of all textboxes (cssSalary) in all the rows in the repeater. How do I get the value for each row?
0
Mike MillerSoftware EngineerAuthor Commented:
All three textboxes are in a table row. I assigned the "class" value of the row to "myRow" then modifed the jQuery like this:

        <script type="text/javascript" language="javascript">
            function calc() {
                var sum = 0;
                var sum2 = 0;
                var sum3 = 0;
                $('.myRow').each(function () {
                    sum = parseInt($('.cssSalary').val());
                    sum2 = parseInt($('.cssSalary2').val());
                    sum3 = sum + sum2
                    alert(sum3)
                });
            }
        </script>

Open in new window


Interestingly, it knows to iterate through as many times as there are rows, but it only calculates the values for the textboxes in the first row. So in this scenario there are 3 rows in the table in the repeater, I get the same value in an alert 3 times.
0
Mike MillerSoftware EngineerAuthor Commented:
Ok, got it for real this time...

        <script type="text/javascript" language="javascript">
            function calc() {
                var repeater = $('.cssSalary').length + 1
                for (i = 1; i < repeater; i++) {
                    var u1 = document.getElementById("popup_Repeater4_ctl0" + i + "_tbPLAPUnits").value;
                    var u2 = document.getElementById("popup_Repeater4_ctl0" + i + "_tbPLUnits").value;
                    var total = parseInt(u1) * parseInt(u2)

                    alert(total);
                }
        </script>

Open in new window


It ain't pretty but it works. I still cannot figure out how to assign the value to a text box though.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike MillerSoftware EngineerAuthor Commented:
Got it. Added this

$('#popup_Repeater4_ctl0' + i + '_tbTotalPieces').val(total)

Open in new window

0
CodeCruiserCommented:
Glad you got it working :-)
0
Mike MillerSoftware EngineerAuthor Commented:
Answered myself
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.