adding values to unknown element ids in jquery

Question

I have a dynamically created form in that a user can click "add row" and get a new element in the form.

some of the elements are quantity and price. I want to change values based on what users enter. so if he chooses qty=4 and price=10 i want amount to =40.

I dont know what to use as the selector for price or amount since input ids are dynamically generated.

var form = "<tr><td>Quantity</td>
                <td><input class='qty' type='text' id='qty[]' name='qty[]'></td>";

    form += "<td>Part Num</td>
             <td><input type='text' id='part[]' name='part[]'></td>";

    form += "<td>Description</td>
             <td><input class='desc' type='text' id='desc[]' name='desc[]'></td>";

    form += "<td>Unit Price</td>
             <td><input type='text' id='price[]' name='price[]'></td>";

    form += "<td>Amount</td>
             <td><input type='text' id='amount[]' name='amount'></td></tr>";

            $('#addItem').click(function(){
                    $('#itemsTable').append(form);
            });


     $(document).on('change','.qty',function(){

          //What can i use as a selector for value_of_qty and value_of_price here???

          //var total = $(value_of_qty) * $(value_of_price);
          //$(id_of_amount).val(total);
      });

on form submissions i see the following:

[qty] => Array
    (
        [0] => asdfdasf
        [1] => asdfdasf
    )
and so on....

It looks to me like you've closured around the form variable, which contains the HTML you'd like to dynamically append to the #itemsTable element when the user clicks on #addItem. There's no indication that you dynamically change that HTML at any point in this process. So all added rows will end up having the exact same id attribute values for their input elements, which is not allowed, as all id attribute values on a page must be unique. Am I missing something here? — bgoldst
– bgoldst, Commented Jan 20, 2015 at 20:55
Well as a test, i had a submit button to see what it would see what form sent. it shows an array for each field (qty array('0'='x','1'='y')...and so on... — bart2puck
– bart2puck, Commented Jan 20, 2015 at 20:57
I assume you're using PHP server-side which is interpreting the brackets in the form element names according to stackoverflow.com/questions/1137557/…. That PHP trick does not apply to ids; it just looks at the name values. I'm pretty sure your HTML is invalid because you have duplicate ids. — bgoldst
– bgoldst, Commented Jan 20, 2015 at 21:05

Renato Zannon · Accepted Answer · 2015-01-20 21:01:55Z

2

You have (roughly) this structure:

<tr>
  <td><input class="qty"></td>
  <td><input name="price[]"></td>
</tr>

So, given that you have the .qty input, all you need to do is rise to the tr and get its input[name='price[]']. In code:

$(document).on('change','.qty',function(){
  var $qty = $(this);
  var $price = $qty.closest("tr").find("input[name='price[]']");
});

answered Jan 20, 2015 at 21:01

Renato Zannon

30.2k7 gold badges42 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mouser Over a year ago

Why $qty and $price instead of qty and price?

Renato Zannon Over a year ago

Just a convention I use

bgoldst · Accepted Answer · 2015-01-20 21:37:41Z

As I described in my comment, your HTML is invalid because you have duplicate ids. You should dynamically generate the HTML you append to the parent element, and assign a unique id value with each appendage. Here's what I would do:

var g_ROWNUM = 1;

$('#addItem').click(function() {

    var form = '\
        <tr>\
            <td>Quantity</td><td><input class="qty" type="text" id="qty_${num}" name="qty[]"></td>\
            <td>Part Num</td><td><input type="text" id="part_${num}" name="part[]"></td>\
            <td>Description</td><td><input class="desc" type="text" id="desc_${num}" name="desc[]"></td>\
            <td>Unit Price</td><td><input type="text" id="price_${num}" name="price[]"></td>\
            <td>Amount</td><td><input type="text" id="amount_${num}" name="amount[]"></td>\
        </tr>\
    '.replace(/\$\{num\}/g,g_ROWNUM++);

    $('#itemsTable').append(form);

});

$(document).on('change', '.qty', function() {

    var qtyInput = $(this);
    var num = qtyInput.attr('id').replace(/^qty_/,'');
    var priceInput = $('#price_'+num);
    var amountInput = $('#amount_'+num);

    var total = qtyInput.val()*priceInput.val();
    amountInput.val(total);

});

As you can see, this allows you to extract the generated number and use it to retrieve the price and amount elements in the same row as the changed quantity element, and then apply any dynamic changes you want to the elements in that row.

http://jsfiddle.net/p6wrkne4/1/

indubitablee · Accepted Answer · 2015-01-20 21:03:07Z

0

you should restructure your html by adding classes like this:

<tr class="tableRow">
    <td>Quantity</td>
    <td><input class='qty' type='text' id='qty[]' name='qty[]'/></td><td>Part Num</td>
    <td><input type='text' id='part[]' name='part[]'/></td>
    <td>Description</td>
    <td><input class='desc' type='text' id='desc[]' name='desc[]'/></td>
    <td>Unit Price</td>
    <td><input type='text' class="price" id='price[]' name='price[]'/></td>
    <td>Amount</td>
    <td><input type='text' class="amount" id='amount[]' name='amount'/></td>
</tr>

$(document).on('change', '.qty', function() {
    var qty = $(this).val();
    var price = $(this).closest('.tableRow').find('.price').val();
    var total = qty * price;
    $(this).closest('.tableRow').find('.amount').val(total);
});

edited Jan 20, 2015 at 21:03

answered Jan 20, 2015 at 20:57

indubitablee

8,2262 gold badges27 silver badges50 bronze badges

1 Comment

bart2puck Over a year ago

the rest of whatever i want to do is the question. i want to put this value times the price field value in the amount field.

Ragnar · Accepted Answer · 2015-01-20 21:11:45Z

0

Try this code:

$(document).on('change','.qty',function(){
   var qtyInput = $(this);
   var price = qtyInput.closest("tr").find("input[name='price[]']").val();
   var amount = qtyInput.val() * price;        
   qtyInput.closest("tr").find("input[name=amount]").val(amount);
});

edited Jan 20, 2015 at 21:11

answered Jan 20, 2015 at 21:04

Ragnar

4,6281 gold badge33 silver badges42 bronze badges

Collectives™ on Stack Overflow

adding values to unknown element ids in jquery

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related