Adding variable value on onchange event

Question

I have a table and i am adding new row through javascript and adding an event on new row as well but it's not working.

Here is my code:

function moreitem() {
  document.getElementById('tottr').value = parseInt(document.getElementById('tottr').value) + 1;
  ain = document.getElementById('tottr').value;
  $('#mytable tbody tr:last')
    .after("<tr><td><select name='pid[]' id='' class='form-control' onchange='getstock(this.value,'st" + ain + "','pc" + ain + "')'><option value=''>Select Product</option><option value='1'>Drink</option></select></td><td><input type='text' id='st" + ain + "'  placeholder='Available Stock' class='form-control'></td><td><input type='text' id='qty" + ain + "' onchange='gettot(this.value,ain)' name='qty[]' placeholder='Quantity' class='form-control'></td><td><input type='text' id='pc" + ain + "'  name='pprice[]' placeholder='Per Piece Price' class='form-control'></td><td><input type='text'  name='tprice[]' placeholder='Total Price' id='tp" + ain + "' class='form-control'></td></tr>");
}

function getstock(inval, stid, pcid) {
  $.ajax({
    url: "getprice.php",
    data: "inval=" + inval + "&stid=" + stid + "&pcid=" + pcid,
    type: "post",
    success: function(e) {
      // alert(e);
      $('#hide').html(e);
    }
  })
  // alert(inval);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Product</th>
      <th>Stock</th>
      <th>Qty.</th>
      <th>Amount Per Piece</th>
      <th>Total Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr id="tr1">
      <td>
        <select name="pid[]" id="" class="form-control" onchange="getstock(this.value,'st1','pc1')">
          <option value="1">hello</option>
          <option value="2">Hello2</option>
        </select>
      </td>
      <td><input type="text" id="st1" placeholder="Available Stock" class="form-control"></td>
      <td><input type="text" id="qty1" onchange="gettot(this.value,1)" name="qty[]" placeholder="Quantity" class="form-control"></td>
      <td><input type="text" id="pc1" name="pprice[]" placeholder="Per Piece Price" class="form-control"></td>
      <td><input type="text" name="tprice[]" placeholder="Total Price" id="tp1" class="form-control"></td>
    </tr>
  </tbody>
  <tfoot>

    <tr>
      <td colspan="5">
        <a href="#" onclick="moreitem()" class="btn btn-primary">Add More Item</a>
      </td>
    </tr>
  </tfoot>
</table>
<input type="hidden" id="tottr" value="1">

getstock is working for the first row but not for other rows and when i inspect the select dropdown it shows below:

onchange="getstock(this.value," st2','pc2')'="">

Answer 1

I think the single quote before getstock and before st2 gets confused. You can escape and print double quotes for onchange event so that the inside single quote and outside double quotes doesn't get confused. I hope the below code helps.

function moreitem(){        document.getElementById('tottr').value=parseInt(document.getElementById('tottr').value)+1;
		ain=document.getElementById('tottr').value;
		$('#mytable tbody tr:last').after("<tr><td><select name='pid[]' id='' class='form-control' onchange=\"getstock(this.value,'st"+ain+"','pc"+ain+"')\"><option value=''>Select Product</option><option value='1'>Drink</option></select></td><td><input type='text' id='st"+ain+"'  placeholder='Available Stock' class='form-control'></td><td><input type='text' id='qty"+ain+"' onchange='gettot(this.value,ain)' name='qty[]' placeholder='Quantity' class='form-control'></td><td><input type='text' id='pc"+ain+"'  name='pprice[]' placeholder='Per Piece Price' class='form-control'></td><td><input type='text'  name='tprice[]' placeholder='Total Price' id='tp"+ain+"' class='form-control'></td></tr>");
}

	function getstock(inval,stid,pcid){
		$.ajax({
			url:"getprice.php",
			data:"inval="+inval+"&stid="+stid+"&pcid="+pcid,
			type:"post",
			success:function(e){
				// alert(e);
				$('#hide').html(e);
			}
		})
		// alert(inval);
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" class="table table-bordered table-striped">
		<thead>
			<tr>
				<th>Product</th>
				<th>Stock</th>
				<th>Qty.</th>
				<th>Amount Per Piece</th>
				<th>Total Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr id="tr1">
				<td>
					<select name="pid[]" id="" class="form-control" onchange="getstock(this.value,'st1','pc1')">
						<option value="1">hello</option>
            <option value="2">Hello2</option>
					</select>
				</td>
				<td><input type="text" id="st1"  placeholder="Available Stock" class="form-control"></td>
				<td><input type="text" id="qty1" onchange="gettot(this.value,1)" name="qty[]" placeholder="Quantity" class="form-control"></td>
				<td><input type="text" id="pc1"  name="pprice[]" placeholder="Per Piece Price" class="form-control"></td>
				<td><input type="text"  name="tprice[]" placeholder="Total Price" id="tp1" class="form-control"></td>
			</tr>
		</tbody>
		<tfoot>
			
			<tr>
				<td colspan="5">
					<a href="#" onclick="moreitem()" class="btn btn-primary">Add More Item</a>
				</td>
			</tr>
		</tfoot>
	</table>
<input type="hidden" id="tottr" value="1">

Answer 2

Don't do so messy while using parameterize function with html string. make it simple and pass it to function.

something like below

 var stvar="st"+ain;
  var pcvar="pc"+ain;

var ain = 1

function moreitem() {
    document.getElementById('tottr').value = parseInt(document.getElementById('tottr').value) + 1;
    ain = document.getElementById('tottr').value;
    var stvar = "st" + ain;
    var pcvar = "pc" + ain;
    $('#mytable tbody tr:last').after("<tr><td><select name='pid[]' id='sel_"+ain+"' class='form-control'><option value=''>Select Product</option><option value='1'>Drink</option></select></td><td><input type='text' id='st" + ain + "'  placeholder='Available Stock' class='form-control'></td><td><input type='text' id='qty" + ain + "' onchange='gettot(this.value,ain)' name='qty[]' placeholder='Quantity' class='form-control'></td><td><input type='text' id='pc" + ain + "'  name='pprice[]' placeholder='Per Piece Price' class='form-control'></td><td><input type='text'  name='tprice[]' placeholder='Total Price' id='tp" + ain + "' class='form-control'></td></tr>");
    $("#sel_"+ain).on("change",function(){
        getstock($(this).val(), stvar, pcvar) 
    })
}

function getstock(v, s, p) {
    console.log(v)
    console.log(s)
    console.log(p)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Product</th>
            <th>Stock</th>
            <th>Qty.</th>
            <th>Amount Per Piece</th>
            <th>Total Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr id="tr1">
            <td>
                <select name="pid[]" id="" class="form-control" onchange="getstock(this.value,'st1','pc1')">
                    <option value="1">hello</option>
                    <option value="2">Hello2</option>
                </select>
            </td>
            <td><input type="text" id="st1" placeholder="Available Stock" class="form-control"></td>
            <td><input type="text" id="qty1" onchange="gettot(this.value,1)" name="qty[]" placeholder="Quantity" class="form-control"></td>
            <td><input type="text" id="pc1" name="pprice[]" placeholder="Per Piece Price" class="form-control"></td>
            <td><input type="text" name="tprice[]" placeholder="Total Price" id="tp1" class="form-control"></td>
        </tr>
    </tbody>
    <tfoot>

        <tr>
            <td colspan="5">
                <a href="#" onclick="moreitem()" class="btn btn-primary">Add More Item</a>
            </td>
        </tr>
    </tfoot>
</table>
<input type="hidden" id="tottr" value="1">