1

I have 3 rows and 3 columns in the table. Quantity field is input field.

I want to add new input fields in another column when anyone changes input field value.

Now, I am using below code:

<td class="a-right">
        <span class="nobr">
                    <div class="newFields"></div>              
        </span>
    </td>

<script>
jQuery(function() {

    var input = jQuery('<input type="text" />');
    var newFields = jQuery('');
   jQuery('.awrma-items-count').on('change', function(event) {
       event.preventDefault();
                var n = this.value || 0;
                        for (i=1; i <= n; i++) {
                            var newInput = input.clone();
                            newFields = newFields.add(newInput);

                            newInput.appendTo('.newFields');
                        }
            });

    function removeFields(n) {
        var removeField = newFields.slice(n).remove();
        newFields = newFields.not(removeField);
    }
});
</script>

When I use above code, It is adding the number of fields multiply with the number of rows(2*3=6 fields) in each row. But I want to add the input fields only in the same row.

for example: If I add quantity 2, then 2*3=6 input fields add all 3 rows. But I want to add these 2 input fields only that row. see screenshot: http://nimb.ws/RmKGg2

How can I achieve?

1

I have modified above code. Please check below updated code and I hope this will be useful to you.

<table id="shopping-cart-table" class="cart-table data-table" border="1" cellpadding="10" cellspacing="0">
    <thead>
        <tr>
            <th>Product Name</th>
            <th>SKU</th>
            <th>Qty</th>
            <th>Serial #</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First Product</td>
            <td>TEST001</td>
            <td><input type="text" name="qty" class="awrma-items-count" /></td>
            <td class="a-right">&nbsp;</td>
        </tr>
        <tr>
            <td>Second Product</td>
            <td>TEST002</td>
            <td><input type="text" name="qty" class="awrma-items-count" /></td>
            <td class="a-right">&nbsp;</td>
        </tr>
        <tr>
            <td>Third Product</td>
            <td>TEST003</td>
            <td><input type="text" name="qty" class="awrma-items-count" /></td>
            <td class="a-right">&nbsp;</td>
        </tr>
    </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    jQuery(function() {
        var input = jQuery('<input type="text" />');
        var newFields = jQuery('');
        jQuery('.awrma-items-count').on('change', function(event) {
            event.preventDefault();
            var n = this.value || 0;
            var serialNumber = jQuery(this).parent('td').next('td');
            serialNumber.empty();

            for (i=1; i <= n; i++) {
                var newInput = input.clone();
                newFields = newFields.add(newInput);
                newInput.appendTo(serialNumber);
            }
        });

        function removeFields(n) {
            var removeField = newFields.slice(n).remove();
            newFields = newFields.not(removeField);
        }
    });
</script>
| improve this answer | |
0

Please use this code-

<script>

    var input = jQuery('<input type="text" name="qtyinput[]" />');
    var newFields = jQuery('');

       function generate_input(n, item)
       {
                var n = jQuery("."+n).val() || 0;
                console.log(n);
                jQuery('.newFields-'+item).html('');

                for (i=1; i <= n; i++) {
                    var newInput = input.clone();
                    newFields = newFields.add(newInput);
                    newInput.appendTo('.newFields-'+item);
                }
        }

    function removeFields(n) {
        var removeField = newFields.slice(n).remove();
        newFields = newFields.not(removeField);
    }

</script>

call function generate_input(n, item) onkeyup in your input tag

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.