Why can't I add a new row?

JavaScript
1

when i click on the add button can not add a new row

2021-03-13_111020
2021-03-13_1110201036Ă—453 16.1 KB

Is there any error in this code line?

            html_code += '<td><select name="item_name[]" id="item_name'+count+'" class="form-control select3"><option value="">chosse</option><?php echo fill_product($conn)?></select></td>';

complete code

      <?php
        // zayadkrdn
        if(isset($_GET["add"]))
        {
        ?>
        <form method="post" id="invoice_form">
          <div class="table-responsive">
            <table class="table table-bordered">
              <tr>
                <td colspan="2" align="center"><h2 style="margin-top:10.5px">Create Invoice</h2></td>
              </tr>
              <tr>
                  <td colspan="2">
                    <div class="row">

                      <div class="col-md-12">
                        Reverse Charge<br />

                        <div class="form-group">
                            <label for="" class="control-label">Student</label>
                            <select name="order_no" id="order_no" class="form-control select3 select2-sm">
                              <option></option>
                              <?php echo student($conn); ?>

                            </select>
                            <small id="class"><?php echo isset($class) ? "Current Class: ".$class : "" ?></small>
                            <input type="hidden" name="class_id" value="<?php echo isset($class_id) ? $class_id: '' ?>">
                        </div>

                        <input type="date" name="order_date" id="order_date" class="form-control input-sm" placeholder="Select Invoice Date" />
                      </div>
                    </div>
                    <br />
                    <table id="invoice-item-table" class="table table-bordered">
                      <tr>
                        <th width="7%">Sr No.</th>
                        <th width="20%">Item Name</th>
                        <th width="5%">Quantity</th>


                      </tr>

                      <tr>
                        <td><span id="sr_no">1</span></td>
                        <td>

                          <select name="item_name[]" id="item_name1" class="form-control select3 select2-sm input-sm">
                            <option></option>
                            <?php echo fill_product($conn); ?>
                          </select>
                        </td>


                        <td><input type="text" name="order_item_quantity[]" id="order_item_quantity1" data-srno="1" class="form-control input-sm order_item_quantity" /></td>


                        <td></td>
                      </tr>
                    </table>
                    <div align="right">
                      <button type="button" name="add_row" id="add_row" class="btn btn-success btn-xs">+</button>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td align="right"><b>Total</td>
                  <td align="right"><b><span id="final_total_amt"></span></b></td>
                </tr>
                <tr>
                  <td colspan="2"></td>
                </tr>
                <tr>
                  <td colspan="2" align="center">
                    <input type="hidden" name="total_item" id="total_item" value="1" />
                    <input type="submit" name="create_invoice" id="create_invoice" class="btn btn-info" value="create" />
                  </td>
                </tr>
            </table>
          </div>
        </form>
        <script>
        $(document).ready(function(){
          var final_total_amt = $('#final_total_amt').text();
          var count = 1;

          $(document).on('click', '#add_row', function(){
            count++;
            $('#total_item').val(count);
            var html_code = '';
            html_code += '<tr id="row_id_'+count+'">';
            html_code += '<td><span id="sr_no">'+count+'</span></td>';

            //html_code += '<td><input type="text" name="item_name[]" id="item_name'+count+'" class="form-control input-sm" /></td>';
            html_code += '<td><select name="item_name[]" id="item_name'+count+'" class="form-control select3"><option value="">گەران</option><?php echo fill_product($conn)?></select></td>';
            html_code += '<td><input type="text" name="order_item_quantity[]" id="order_item_quantity'+count+'" data-srno="'+count+'" class="form-control input-sm number_only order_item_quantity" /></td>';


            //html_code += '<td><input type="text" name="order_item_tax1_rate[]" id="order_item_tax1_rate'+count+'" data-srno="'+count+'" class="form-control input-sm number_only order_item_tax1_rate" /></td>';
            //html_code += '<td><input type="text" name="order_item_tax1_amount[]" id="order_item_tax1_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm order_item_tax1_amount" /></td>';
            //html_code += '<td><input type="text" name="order_item_tax2_rate[]" id="order_item_tax2_rate'+count+'" data-srno="'+count+'" class="form-control input-sm number_only order_item_tax2_rate" /></td>';
            //html_code += '<td><input type="text" name="order_item_tax2_amount[]" id="order_item_tax2_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm order_item_tax2_amount" /></td>';
            //html_code += '<td><input type="text" name="order_item_tax3_rate[]" id="order_item_tax3_rate'+count+'" data-srno="'+count+'" class="form-control input-sm number_only order_item_tax3_rate" /></td>';
            //html_code += '<td><input type="text" name="order_item_tax3_amount[]" id="order_item_tax3_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm order_item_tax3_amount" /></td>';

            //html_code += '<td><input type="text" name="order_item_final_amount[]" id="order_item_final_amount'+count+'" data-srno="'+count+'" readonly class="form-control input-sm order_item_final_amount" /></td>';
            html_code += '<td><button type="button" name="remove_row" id="'+count+'" class="btn btn-danger btn-xs remove_row">X</button></td>';
            html_code += '</tr>';
            $('#invoice-item-table').append(html_code);
          });

          $(document).on('click', '.remove_row', function(){
            var row_id = $(this).attr("id");
            var total_item_amount = $('#order_item_final_amount'+row_id).val();
            var final_amount = $('#final_total_amt').text();
            var result_amount = parseFloat(final_amount) - parseFloat(total_item_amount);
            $('#final_total_amt').text(result_amount);
            $('#row_id_'+row_id).remove();
            count--;
            $('#total_item').val(count);
          });

          function cal_final_total(count)
          {
            var final_item_total = 0;
            for(j=1; j<=count; j++)
            {
              var quantity = 0;
              var price = 0;
              var actual_amount = 0;
              var tax1_rate = 0;
              var tax1_amount = 0;
              var tax2_rate = 0;
              var tax2_amount = 0;
              var tax3_rate = 0;
              var tax3_amount = 0;
              var item_total = 0;
              quantity = $('#order_item_quantity'+j).val();
              if(quantity > 0)
              {
                price = $('#order_item_price'+j).val();
                if(price > 0)
                {
                  actual_amount = parseFloat(quantity) * parseFloat(price);
                  $('#order_item_actual_amount'+j).val(actual_amount);
                  tax1_rate = $('#order_item_tax1_rate'+j).val();
                  if(tax1_rate > 0)
                  {
                    tax1_amount = parseFloat(actual_amount)*parseFloat(tax1_rate)/100;
                    $('#order_item_tax1_amount'+j).val(tax1_amount);
                  }
                  tax2_rate = $('#order_item_tax2_rate'+j).val();
                  if(tax2_rate > 0)
                  {
                    tax2_amount = parseFloat(actual_amount)*parseFloat(tax2_rate)/100;
                    $('#order_item_tax2_amount'+j).val(tax2_amount);
                  }
                  tax3_rate = $('#order_item_tax3_rate'+j).val();
                  if(tax3_rate > 0)
                  {
                    tax3_amount = parseFloat(actual_amount)*parseFloat(tax3_rate)/100;
                    $('#order_item_tax3_amount'+j).val(tax3_amount);
                  }
                  item_total = parseFloat(actual_amount) + parseFloat(tax1_amount) + parseFloat(tax2_amount) + parseFloat(tax3_amount);
                  final_item_total = parseFloat(final_item_total) + parseFloat(item_total);
                  $('#order_item_final_amount'+j).val(item_total);
                }
              }
            }
            $('#final_total_amt').text(final_item_total);
          }

          $(document).on('blur', '.order_item_price', function(){
            cal_final_total(count);
          });

          $(document).on('blur', '.order_item_tax1_rate', function(){
            cal_final_total(count);
          });

          $(document).on('blur', '.order_item_tax2_rate', function(){
            cal_final_total(count);
          });

          $(document).on('blur', '.order_item_tax3_rate', function(){
            cal_final_total(count);
          });

          $('#create_invoice').click(function(){
          //  if($.trim($('#order_receiver_name').val()).length == 0)
          //  {
          //    alert("Please Enter Reciever Name");
          //    return false;
          //  }

            if($.trim($('#order_no').val()).length == 0)
            {
              alert("Please Enter Invoice Number");
              return false;
            }

            if($.trim($('#order_date').val()).length == 0)
            {
              alert("Please Select Invoice Date");
              return false;
            }

            for(var no=1; no<=count; no++)
            {
              if($.trim($('#item_name'+no).val()).length == 0)
              {
                alert("Please Enter Item Name");
                $('#item_name'+no).focus();
                return false;
              }

              if($.trim($('#order_item_quantity'+no).val()).length == 0)
              {
                alert("Please Enter Quantity");
                $('#order_item_quantity'+no).focus();
                return false;
              }

            //  if($.trim($('#order_item_price'+no).val()).length == 0)
            //  {
            //    alert("Please Enter Price");
            //    $('#order_item_price'+no).focus();
            //    return false;
            //  }

            }

            $('#invoice_form').submit();

          });

        });
        </script>
        <?php
        }
        // end addd
2

Hi @arman, I just copy / pasted your code to a fiddle and it seems to be working fine…

3

but when i called this function does not working

function fill_product($conn){
	$output= '';
	//$select = $pdo->prepare("SELECT * FROM tbl_product");
//  $select->execute();
//  $result = $select->fetchAll();
 $classes = $conn->query("SELECT * FROM subjects order by subject asc ");
while($row = $classes->fetch_array()):
	?>
<option value="<?php echo $row['id'] ?>" data-json='<?php echo json_encode($row) ?>'><?php echo $row['subject_code'].' | '.ucwords($row['subject']) ?></option>
	<?php
	endwhile;
	return $output;
}
4

Javascript cannot call PHP code.

PHP code executes before the page loads, and is then done. It runs on the server, then hands the finished HTML/JS to the browser, who runs the HTML and JS.

EDIT: What you’re doing is preloading the javascript. Sorry, confused me with the definition.

Uhh… Hang on.

$output= '';

return $output;

Where in your code do you add anything to $output?

2 Likes
5

Ah okay, I overlooked the PHP part. Well this can’t work, you cannot execute server side scripts on the client side; if you need to dynamically add database content, you’ll have to request that content using AJAX.

If the options are the same for each row though, you might just copy them from the first row that has already been populated on the server side:

var options = $('[name="item_name[]"]').html()

$(document).on('click', '#add_row', function () {
  // ...
  html_code += '<td><select name="item_name[]" id="item_name' 
    + count 
    + '" class="form-control select3"><option value="">گەران</option>' 
    + options 
    + '</select></td>'
})

(I have updated the fiddle. Edit: Also, x-post.) ^^

6

I will check it

7

it was resolved, well done my bro.

8

why select2 cllass does not working in another option look at this pic
2021-03-13_214306
in here does not working
2021-03-13_214431

9

I’m gonna go out on a limb and guess it’s because you’ve got two selects with the same ID?
(Also if you’re gonna have multiple selects with the same name, why not do a multiple-select instead?)

1 Like
10

What’s the solution

11

Well if the problem is:

what do you suspect the solution would be?

1 Like
12

That’s why I like to call them “unique identifiers”, as that makes the problem and the solution immediately apparant.

2 Likes
13

Actually, the IDs should be unique as they’re all getting appended the incrementing count variable… @arman you probably just need to initialise select2 for the newly added select elements. Where are you doing that for the first working one anyway?

2 Likes
14 
  $(document).ready(function(){
    $('.selectA').select2({
      placeholder:"choose",
      width: "100%"
    });
  })

  $(document).ready(function(){
    $('.selectB').select2({
      placeholder:"choose",
      width: "100%"
    });
  })


                 <select name="item_name[]" id="item_name1" class="form-control selectA">
                           <option></option>
                           <?php echo fill_product($conn); ?>
                         </select>
  html_code += '<td><select name="item_name[]" id="item_name' + count + '" class="form-control selectB"><option value=""></option>'+options +'</select></td>';
15

When adding a new row:

var html_code = '...'
var $row = $(html_code)

// Initialize select2
$row.find('select').select2()
$('#invoice-item-table').append($row)
16

can u updated in here
https://jsfiddle.net/megapop/n92omsa8

17

Done so already. ;-)

1 Like
18

It works very well. Thank you again. :+1:

2 Likes
19

And that’s why i don’t like breaking up strings.

20

Sorry, guys. , How do I do that when i click the create button, say Item Name already on the list ?
Clearer, don’t select two similar names as the picture

2021-03-14_165327
2021-03-14_165327811Ă—327 5.91 KB