Adding contents using javascript on click

Question

Trying to add one more row onClick using javascript. But it is not adding!

Tried the below code:

    $(document).ready(function(){
        var cont = 3
        var qty = "qty"
		var item = "item"
		var what = "service"
        $(".add-row").click(function(){
            var nameqty = qty+cont
			var nameitem = item+cont
			var namewhat = service+cont
            var markup = '<tr><td><select name="' + nameitem + '" class="country"><option>Select Item</option><option value='ZZ2017TF11A1'>Shirt</option><option value='ZZ2017TF11A2'>Pant</option></select></td><td><select class="country" name="' + namewhat + '"></select></td><td><input type="text" name="' + nameqty + '" value="" placeholder="Quantity"></td></tr>';
            $(markup).insertBefore($('button[type="submit"]').closest("tr"));
            cont++;
            console.log(qty)
			console.log(item)
			console.log(what)
        });
    });

<form method="post" action="invoice_form.php" id="item_sel">
	    
	<table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
   <tr>
    <td colspan="3">
      <input type="text" name="customer" value="" placeholder="Customer Name">
    </td>
  </tr>
  <tr>
    <th>Item</th>
	<th>Service</th>
    <th>Qty</th>
    
  </tr>

    <tr>
	  <td>
	  <select name='item1' class='country'>
            <option value="Select Item">Select Item</option>
			<option value='ZZ2017TF11A1'>Shirt</option><option value='ZZ2017TF11A2'>Pant</option></select></td>

	  <td><select class="country" name="service1">
</select></td>
<td><input type="text" name="qty1" value="" placeholder="Quantity"></td>
    </tr>
	<tr>
	  <td>
	  <select name='item2' class='country'>
            <option>Select Item</option>
			<option value='ZZ2017TF11A1'>Shirt</option><option value='ZZ2017TF11A2'>Pant</option></select></td>

	  <td><select class="country" name="service2">
</select></td>
<td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
    </tr>
	<tr>
        <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default">
        <span class="glyphicon glyphicon-save"></span> &nbsp; Save
        </button>
        </td>
    </tr>
</table>
    <input type="button" class="add-row" value="Add Row">
</form>

Trying to add one more row on-click using javascript. But it is not adding!

I am not able to find what mistake I have made in the above code!

Please have a look at the snippet, basically 'JavaScript' part.

Answer 1

You've two problems in your code :

1. You're service variable isn't defined.
2. You've a quotes problem in you're markup variable.

If you fix the both you're snippet should work as the snippet below shows.

I suggest the use of a model div that will be used in your JS for the creation of new items like :

<div id="markup_model" class="hide">
    <table>
        <tr>
            <td>
                <select name="' + nameitem + '" class="country">
                    <option>Select Item</option>
                    <?php 
                        $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); 
                        $stmt->execute();

                        if( $stmt->rowCount() > 0 ){ 
                            while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ 
                                echo "<option value='{$row['IRN']}'>{$row['Name']}</option>";
                            }
                        }   
                    ?>
                </select>‌
            ​</td>
            <td>
                <select class="country" name="' + namewhat + '"></select>
            </td>
            <td>
                <input type="text" name="' + nameqty + '" value="" placeholder="Quantity"/>
            </td>
        </tr>
    </table>
</div>

Then in your JS code the markup will looks like :

var markup = $('#markup_model table').html();

Hope this helps.

$(document).ready(function() {
  var cont = 3
  var qty = "qty"
  var item = "item"
  var what = "service"

  $(".add-row").click(function() {
    var nameqty = qty + cont;
    var nameitem = item + cont;
    var namewhat = what + cont;

    var markup = $('#markup_model tbody');
    
    $(markup).find('.country:eq(0)').attr('name', nameitem);
    $(markup).find('.country:eq(1)').attr('name', namewhat);
    $(markup).find('input').attr('name', nameqty);

    $(markup.html()).insertBefore($('button[type="submit"]').closest("tr"));

    cont++;
  });
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post" action="invoice_form.php" id="item_sel">
  <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
    <tr>
      <td colspan="3">
        <input type="text" name="customer" value="" placeholder="Customer Name">
      </td>
    </tr>
    <tr>
      <th>Item</th>
      <th>Service</th>
      <th>Qty</th>
    </tr>
    <tr>
      <td>
        <select name='item1' class='country'>
            <option value="Select Item">Select Item</option>
			<option value='ZZ2017TF11A1'>Shirt</option><option value='ZZ2017TF11A2'>Pant</option></select></td>

      <td><select class="country" name="service1">
</select></td>
      <td><input type="text" name="qty1" value="" placeholder="Quantity"></td>
    </tr>
    <tr>
      <td>
        <select name='item2' class='country'>
            <option>Select Item</option>
			<option value='ZZ2017TF11A1'>Shirt</option><option value='ZZ2017TF11A2'>Pant</option></select></td>
      <td><select class="country" name="service2">
</select></td>
      <td><input type="text" name="qty2" value="" placeholder="Quantity"></td>
    </tr>
    <tr>
      <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default hide">
        <span class="glyphicon glyphicon-save"></span> &nbsp; Save
        </button>
      </td>
    </tr>
  </table>
  <input type="button" class="add-row" value="Add Row">
</form><br><br><br>

<div id="markup_model" class="hide">
  <table>
    <tr>
      <td>
        <select name="nameitem" class="country">
                    <option>Select Item</option>
                </select>
      </td>
      <td>
        <select class="country" name="namewhat"></select>
      </td>
      <td>
        <input type="text" name="nameqty" value="" placeholder="Quantity" />
      </td>
    </tr>
  </table>
</div>