Simple math function using a JQuery clone event

Question

For each of my .cloned fields, I'd like to (txtA/txtB) = txtC

Write out the answer to textfield C.

<table>
 <tr> 
  <td><input type="text" id="txtA" name="txtA"></td> 
  <td><input type="text" id="txtB" name="txtB"></td>
  <td><input type="text" id="txtC" name="txtC" readonly="readonly" tabIndex="-1" value=""></td> 
</tr>
</table>

JS:

 // Clone table rows
$(function() {
    var i = 1;
    $("#txtA").change(function() {
        $("table tr:first").clone(true).find("input").each(function() {
            $(this).val('').attr('id', function(_, id) { return id + i });
            $(this).val('').attr('name', function(_, id) { return id + i });

         }).end().appendTo("table");
        i++;
    });
// JQuery Math function

});

Adam Rackis · Accepted Answer · 2011-12-15T20:34:08.940

1

I'm not sure what that second code sample is supposed to do, but if you want to divide the value in txtA by txtB and store it in txtC, here's how you could do that:

$("#txtC").val(  $("#txtA").val() / $("#txtB").val() );

edited Dec 15 '11 at 20:34

answered Dec 15 '11 at 20:27

Adam Rackis

82,527
56
270
393

1

The `+` operator is unnecessary because the `/` operator is only defined for numbers; "10"/"2" will give you 5. – Dennis Dec 15 '11 at 20:32
The JQuery code above clones the rows, so there would be txtA1/txtB1 = txtC1, txtA2/txtB2 = txtC2 and so on... How would the math function work then? Thank you. – user1100603 Dec 15 '11 at 20:56
Instead of using ID's, I would use classnames. Clone the textbox, then add a class of `"txtA" + i` and drop the ids. – Adam Rackis Dec 15 '11 at 20:58
Sounds good. I can do that. How would the calculation read? Would it be in the top function? – user1100603 Dec 15 '11 at 21:01
I don't know your requirements, but the above code will divide the two textboxs' values and put the quotient into a third. Just adjust the selectors to use the appropriate class names. – Adam Rackis Dec 15 '11 at 21:04
Ok. Last thing. I added your code above to my function. For a simple example. The math function is not looping with each additional row. – user1100603 Dec 15 '11 at 21:13
@user1100603 - Did you adjust the selectors so they would select the newly cloned textboxes? – Adam Rackis Dec 15 '11 at 21:15
@user1100603 - when you clone the table row, you'll want to assign a new class name that's unique - txtA3 for the third row, txtA4 for the fourth row, etc. Then you can select on these new class names by $(".txtA3") to do your calculation – Adam Rackis Dec 15 '11 at 21:40
The rows are unique: http://jsfiddle.net/vJKD4/3/ – user1100603 Dec 15 '11 at 21:50
@user1100603 - you're going to have to re-think this approach. You'll want to try to use class names instead of ids. After the clone, re-assign the textboxes to use a new classname based on row number – Adam Rackis Dec 15 '11 at 21:54
What do you think? I honestly have no idea. I'm pulling my hair out. Anything code wise you can provide, would be great. – user1100603 Dec 15 '11 at 21:57
@user1100603 - this should get you started - merry Christmas :) http://jsfiddle.net/vJKD4/4/ – Adam Rackis Dec 15 '11 at 22:08

Simple math function using a JQuery clone event

1 Answers1