The first row only works in my row.

<?PHP for ($i = 1; $i <= 20; $i++){ ?>
            <div id="lines" class="row">
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><span id="row_number"><?PHP if ( $i < 10 ){ echo "0".$i;}else{echo $i;} ?></span></div>
                <div class="col-sm-2" style="text-align:left;border:1px solid #808080">
                    <select id="part_number" style="border:0px;">
                        <option value="None Selected"></option>
                            $partNumbers = $wpdb->get_results("SELECT * FROM _cif_inventory_table;");
                                foreach ($partNumbers as $partNumber) {
                                    echo '<option value="'.$partNumber->part_number.'">'.$partNumber->part_number.'</option>';
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input size="5" maxlength="5" id="quantity" value="" /></div>
                <div class="col-sm-6" style="text-align:left;border:1px solid #808080"><input size="75" id="description-<?PHP echo $i; ?>" value="" /></div>
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input id="unitPrice-<?PHP echo $i; ?>" /></div>
                <div class="col-sm-1" style="text-align:left;border:1px solid #808080"><input id="amount" value="" /></div>
            </div><!-- end .row -->
        <?PHP } ?>

I'm pretty sure it's the id's that aren't working as expected because they are all the same so I decided to add my loop counter to my id <input size="75" id="description-<?PHP echo $i; ?>" value="" /> and <input id="unitPrice-<?PHP echo $i; ?>" /> but I am confused on how to got this on the ajax side I tried to do it like

    $("#part_number").on('change', function() {
var part_number = $(this).val();
var row_number  = $('#row_number').html();

//alert("Row Number: " + row_number);

    url: '<?PHP echo admin_url('admin-ajax.php'); ?>',
    type: 'post',
    data: { action: 'description', part_number: part_number },
    success: function(data) {

        for (var i = 1; i <= 20; i++) {
            $('#description-'+i).val( data );

    url: '<?PHP echo admin_url('admin-ajax.php'); ?>',
    type: 'post',
    data: { action: 'unit_price', part_number: part_number },
    success: function(data) {

        for ( var i = 1; i <= 20; $++) {
            $('#unitPrice-'+i).val( data );


but this populates every description field on the selection of the dropdown on row 1.

  • Need more context - bigger picture of what you are trying to do. From what I can see, you should make a single ajax call with all of the form content (pass all your parts at once) instead of making a request for each row in the form.
    – jdm2112
    Commented Jul 31, 2018 at 15:13
  • I updated my ajax, but I'm not sure I am understanding you, this was my first attempt at ajax and I don't quite understand what I'm doing
    – bckelley
    Commented Jul 31, 2018 at 15:22
  • Understood - there can be a lot to grok when diving into ajax. The data you send with your ajax request is an object and could contain the description, unit_price and much more in a single ajax request. Hopefully that makes sense. joanmiquelviade.com/…
    – jdm2112
    Commented Jul 31, 2018 at 15:40


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.