jquery and add new row +data to select field

Hello,

I have a problem I would like to insert via jquery in a table a new line. so far so good now i would like to pass data into a select field again and again.

my jquery code:

 $(document).ready(function(){
        var i=1;
        $("#add_row").click(function(){b=i-1;
            $('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
            $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
            i++;
        });
        $("#delete_row").click(function(){
            if(i>1){
                $("#addr"+(i-1)).html('');
                i--;
            }
            calc();
        });

        $('#tab_logic tbody').on('keyup change',function(){
            calc();
        });
        $('#tax').on('keyup change',function(){
            calc_total();
        });


    });

and my html Code:

 <tr id='addr0'>
    <td>1</td>
        <td>
               <select name="produkt[]" class="editSelect form-control form-control-sm">
                       @foreach($articles as $article)
                            <option value="2">{{ $article->article_name }}</option>
                       @endforeach
                </select>
           </td>
           <td><input type="number" name='qty[]' placeholder='Enter Qty' class="form-control qty" step="0" min="0"/></td>
           <td><input type="number" name='price[]' placeholder='Enter Unit Price' class="form-control price" step="0.00" min="0"/></td>
            <td><input type="number" name='total[]' placeholder='0.00' class="form-control total" readonly/></td>
</tr>

When I insert a new line I do not get the data $ article in line 2 anymore.

Why ?

Thank you

lostdreamer_nl

7 years ago

Level 53

You're trying to add something to a non existing part of the HTML dom:

            $('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);

You do not have a <tr id="addr2"> yet since you are only adding it the line below that one.

Probably better:

        $("#add_row").click(function(){b=i-1;
            // add another row
            $('#tab_logic').append( "<tr id='addr"+ i +"'>"+ $('#addr'+b).html() +"</tr>" );
            // change it's number
            $('#addr'+i + ' td:first-child').html(i+1);
            i++;
        });

Nosean

7 years ago

Level 1

ok I have a new row ... but the data of the foreach loop are not available. I really have no idea what that is.

lostdreamer_nl

7 years ago

Level 53

what do you mean with "the data of the foreach loop are not available. "

Javascript is only copying the HTML, it has no knowledge of your foreach loop, but it should be copying the entire <select> box with all its values.

btw: You might want to fix this bug as well:


                       @foreach($articles as $article)
                            <option value="2">{{ $article->article_name }}</option>
                       @endforeach

Everything has value = 2

Please or to participate in this conversation.