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')'="">

Negi Rox · Accepted Answer · 2020-03-17 11:09:12Z

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">

But it's passing st and pc as object and i want to pass as string
Your answer is producing onchange="getstock(this.value,st2,pc2)" but i want getstock(this.value,'st2','pc2')

sachin · Accepted Answer · 2020-03-17 11:22:28Z

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">

Collectives™ on Stack Overflow

Adding variable value on onchange event

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related