dennis dennis - 3 months ago 28
HTML Question

Codeigniter Addrow not working

i am using codeigniting base but it seems like the script is not working.
Nothing is happening when im clicking the + button. I've found this script on a website. i hope someone can help me out with it :D, Thanks alot sincerely Dennis

<div class="row"><br/>
<div class="container" style="background-color:#e3e3e3">
<center><h1>Information Product</h1></center>

<form action="<?= site_url('product/save') ?>" method="post">
<table class="table">
<tr>
<td>
<label>Title</label>
<input type="text" class="form-control" name="title">
</td>
</tr>
</table>
<input type="submit" value="Submit" class="btn btn-primary">
<table class="table table-borderd table-hover">
<thead>
<tr>
<th>ProductName</th>
<th>Quantity</th>
<th>Price</th>
<th><input type="button" class="btn btn-primary addrow" id="addrow" value="+"></th>
</tr>
</thead>
<tbody class="detail">
<tr>
<td><input type="text" name="product_name[]" class="form-control"></td>
<td><input type="text" name="quantity[]" class="form-control"></td>
<td><input type="text" name="price[]" class="form-control"></td>
<td><a href="#" class="remove">Remove</a></td>
</tr>
</tbody>
</table>
</form>

</div>
</div>

<script type="text/javascript">
$(function(){
$('.addrow').click(function(){
var tr = '<tr>'+
'<td><input type="text" name="product_name[]" class="form-control"></td>'+
'<td><input type="text" name="quantity[]" class="form-control"></td>'+
'<td><input type="text" name="price[]" class="form-control"></td>'+
'<td><a href="#" class="remove">Remove</a></td>'+
'</tr>';
$('.detail').append(tr);
});

$('body').delegate('.remove','click',function(){
var tr = $(this).parent().parent();
var c = confirm("Do you want to remove this ?");
if(c)
{
tr.remove();
}
});
});



Answer
   <div class="row"><br/>
   <div class="container" style="background-color:#e3e3e3">
   <center><h1>Information Product</h1></center>

  <form action="<?= site_url('product/save') ?>" method="post">
    <table class="table">
            <tr>
                <td>
                    <label>Title</label>
                    <input type="text"  class="form-control" name="title">
                </td>
            </tr>
    </table>
    <input type="submit" value="Submit" class="btn btn-primary">
    <table class="table table-borderd table-hover">
        <thead>
            <tr>
                <th>ProductName</th>
                <th>Quantity</th>
                <th>Price</th>
                <th><input type="button" class="btn btn-primary addrow" id="addrow" value="+"></th>
            </tr>
        </thead>
        <tbody class="detail">
            <tr>
                <td><input type="text" name="product_name[]" class="form-control"></td>
                <td><input type="text" name="quantity[]" class="form-control"></td>
                <td><input type="text" name="price[]" class="form-control"></td>
                <td><a href="#" class="remove">Remove</a></td>
            </tr>
        </tbody>
    </table>
  </form>

</div>
</div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(function(){
  $('.addrow').click(function(){
      var tr = '<tr>'+
                '<td><input type="text" name="product_name[]" class="form-control"></td>'+
                '<td><input type="text" name="quantity[]" class="form-control"></td>'+
                '<td><input type="text" name="price[]" class="form-control"></td>'+
                '<td><a href="#" class="remove">Remove</a></td>'+
            '</tr>';
    $('.detail').append(tr);
});

$('body').delegate('.remove','click',function(){
    var tr = $(this).parent().parent();
    var c = confirm("Do you want to remove this ?");
    if(c)
    {
        tr.remove();
    }
   });
 });
  </script>

you forgot to include jquery library before running jquery function.

Comments