CODEWITHSUNDEEP
jquery
ak85
ak85

Reputation: 4264

trouble adding multiple values to array

In this fiddle when you select a value it populates all input fields. I am trying to use this same principle in this fiddle but it is not working. I am not quite sure why?

I am not getting any errors but I feel as though the below code is in the wrong spot and is being ignored?

    jQuery('#newtable select').on('change', function() {
        var div_id = 'div_'+jQuery(this).attr('id');
        var select_val = jQuery(this).find('option:selected').data('value');
        console.log();
        if( select_val != '' ) {
            var a = select_val.split(',');
            var count = 0;
            jQuery('tr#'+div_id+' .flag').each(function() {
            jQuery(this).val(a[count]);
            ++count;
            });
        } else {
            jQuery('tr#'+div_id+' input.input_text').val('');
        }
    });

What I am trying to acheive in the second fiddle is for when you select 'Ryan $100' it updates the below code.

    <table id="newtable">
    <tr id='div_m2'>
            <input type="hidden" class='input_text flag' value="0" name="id[]">
            <input type="hidden" class='input_text flag' value="0" name="name[]">
            <input type="hidden" class='input_text flag' value="0" name="sales[]">
            <input type="hidden" class='input_text flag' value="0" name="price[]">
            <td colspan="3">
                <select id='m2'>
    <option value="" data-value="">Choose Salesman</option>
    <option value="0" data-value="id_03,Ryan,1,100">Ryan $100</option>
    <option value="0" data-value="id_01,Tom,1,100">tom $100</option>
                </select>
            </td>
        </tr>
    </table>

to this

        <input type="hidden" class='input_text flag' value="id_03" name="id[]">
        <input type="hidden" class='input_text flag' value="Ryan" name="name[]">
        <input type="hidden" class='input_text flag' value="1" name="sales[]">
        <input type="hidden" class='input_text flag' value="100" name="price[]">

and when you do this showValues() is also run so that the above data is included in the table I am generating.

So my desired output for the table if you choose ryan $100 is.

    <table id="results">
        <tbody>
        <tr><th>Rank</th><th>Salesman</th><th>Products Sold</th><th>Total Sale Price</th><th>Commission (30% of Total Sale Price + 5 for each sale)</th></tr>
        <tr data-id="id_03"><td>1</td><td>ryan</td><td>2</td><td>110</td><td>550.00</td></tr>
        <tr data-id="id_02"><td>2</td><td>Jerry</td><td>3</td><td>60</td><td>300.00</td></tr>
        <tr data-id="id_01"><td>3</td><td>Tom</td><td>5</td><td>50</td><td>250.00</td></tr>
        </tbody>
    </table>

Upvotes: 0

Views: 110

Answers (1)

Chris
Chris

Reputation: 1112

This should solve your problem:

http://jsfiddle.net/VNSam/19/

If you want to update your table on select you should call showValue() :-)

Upvotes: 2

Related Questions