CODEWITHSUNDEEP
javascriptphplaravellaravel-5
Christianus Andre
Christianus Andre

Reputation: 237

Dynamic Form Edit Page : Laravel 5.2

this is not a big problem, i believe you all have an idea to solve this. please kindly help.

The matter is i've dynamic form, i can save it into DB and call it again into edit page for each rows and its work fine for me but, idk how to add new row again into DB cause variable that i used cant count the rows. Look at this brother

This is My Table View

<tbody>
              <?php foreach($rows as $value): ?>
              <tr>
                <td><textarea class="form-control" rows="3" name="analisa[]" placeholder="Analisa Penyebab" style="resize: none;
                height: 50px">{{$value->analisa}}</textarea></td>
                <td><textarea class="form-control" rows="3" name="tindakan[]" placeholder="Tindakan Perbaikan dan Pencegahan" 
                style="resize: none; height: 50px">{{$value->tindakan}}</textarea></td>
                <td><input class="form-control" type="text" name="pic[] placeholder="PIC" value="{{$value->pic}}"></td>
                <td><input class="form-control" type="date" name="tanggal_pelaksanaan[]" class="picker__table" value="{{$value->tanggal_pelaksanaan}}"></td>
              </tr>
              <?php endforeach?>
            </tbody>
          </table>
<a class="button" href="#" role="button" id="add">&nbspTambah Analisa</a><br><br>

Now look at my Javascript

$(document).ready(function(){
    var i = count($rows);
    $('#add').click(function(){

        $('#tbanalisa tbody').append("<tr>"+"<td>"+i+"</td>"+"<td><textarea class=\"form-control\" rows=\"3\" name=\"analisa[]"+"\" placeholder=\"Analisa Penyebab\" style=\"resize: none; height: 50px\"></textarea></td>"+"<td><textarea class=\"form-control\" rows=\"3\" name=\"tindakan[]"+"\" placeholder=\"Tindakan Perbaikan dan Pencegahan\"style=\"resize: none; height: 50px\"></textarea></td>"+"<td><input class=\"form-control\" type=\"text\" name=\"pic[]"+"\" placeholder=\"PIC\"></td>"+"<td><input class=\"form-control\" type=\"date\" name=\"tanggal_pelaksanaan[]"+"\"></td>"+"</tr>");
    i++; 
    });

});

Imagine that i already have 2 rows, now if i change var i = 3; it works fine, now how it automaticly count how many rows i already have ??

Upvotes: 0

Views: 211

Answers (2)

Sagar Gautam
Sagar Gautam

Reputation: 9389

<?php $counter = 0; ?>

You can use a variable say $counter and increment it at each row of the table and access this variable from java script as 

$(document).ready(function(){
    var $counter = <?php echo json_encode($counter); ?>;
        $('#add').click(function(){
        $('#tbanalisa tbody').append("<tr>"+"<td>"+i+"</td>"+"<td><textarea class=\"form-control\" rows=\"3\" name=\"analisa[]"+"\" placeholder=\"Analisa Penyebab\" style=\"resize: none; height: 50px\"></textarea></td>"+"<td><textarea class=\"form-control\" rows=\"3\" name=\"tindakan[]"+"\" placeholder=\"Tindakan Perbaikan dan Pencegahan\"style=\"resize: none; height: 50px\"></textarea></td>"+"<td><input class=\"form-control\" type=\"text\" name=\"pic[]"+"\" placeholder=\"PIC\"></td>"+"<td><input class=\"form-control\" type=\"date\" name=\"tanggal_pelaksanaan[]"+"\"></td>"+"</tr>");

        $counter++;
    });

});

Upvotes: 0

Jason Joslin
Jason Joslin

Reputation: 1144

You should store your count in an element (with php) so that you can access this value with jquery in the client browser e.g:

<tbody data-row-count="<?=count($rows); ?>">

Doesnt have to be the tbody element Im just using it as an example

Now in your jquery you can get current row count and set it again on click:

$(document).ready(function(){
    var i = $(tbody).data('row-count');
    $('#add').click(function(){

        $('#tbanalisa tbody').append("<tr>"+"<td>"+i+"</td>"+"<td><textarea class=\"form-control\" rows=\"3\" name=\"analisa[]"+"\" placeholder=\"Analisa Penyebab\" style=\"resize: none; height: 50px\"></textarea></td>"+"<td><textarea class=\"form-control\" rows=\"3\" name=\"tindakan[]"+"\" placeholder=\"Tindakan Perbaikan dan Pencegahan\"style=\"resize: none; height: 50px\"></textarea></td>"+"<td><input class=\"form-control\" type=\"text\" name=\"pic[]"+"\" placeholder=\"PIC\"></td>"+"<td><input class=\"form-control\" type=\"date\" name=\"tanggal_pelaksanaan[]"+"\"></td>"+"</tr>");
    i++;
    $(tbody).data('row-count', i);
    });
});

Probably better to add an ID to your counter element so it has a unique identifier in html and can be accessed in jQuery via the ID. So in your element add id=RowCounter then in jQuery you can access with $('#RowCounter')

Upvotes: 1

Related Questions