Dynamically appended text field value not geting printed through id in javascript

Dynamically appended text field value not geting printed through id in javascript - javascript

it is working for first row and after adding second row it is not running please help me to resolve the issue
i Want to use dynamically added text field value in java script
Form
<tr>
<td>
<select required id="itemname-1" name="itemname[]" class="form-control" onchange='showUser(this)'>
<option selected="true" disabled="disabled">Select Item Code</option>
</select>;</td>
<td>
<input type="text" class="form-control col-xs-2" id="quantity-1" placeholder="Quantity" name="quantity[]" style='float:left' onchange="getdetails(this);">
<p id="parameterr-1" style='float:left'></p><input type="hidden" name='parameter[]' id='parameter-1'>
</td>
<td>
<input type="text" class="form-control col-xs-2" id="bp-1" placeholder="Basic Price" name="price[]" onchange="getdetails(this);">
</td>
<td>
<input type="text" class="form-control col-xs-2" id="gst-1" placeholder="GST" name="gst[]" readonly='readonly'>
</td>
<td>
<input type="text" class="form-control col-xs-2" id="tbp-1" placeholder="Total Basic Price" name="tbp[]" readonly='readonly'>
</td>
<td>
<input type="text" class="form-control col-xs-2" id="tgst-1" placeholder="Total GST" name="tgst[]" readonly='readonly'>
</td>
<td>
<input type="text" diasabled class="form-control col-xs-2" id="tot-1" placeholder="Total" name="grand[]" readonly='readonly'>
</td>
<td>
<a href="javascript:void(0);" id="addCF">
<button class="btn-primary btn">Add</button>
</a>
</td>
</tr>
Add Button
<td>
<a href="javascript:void(0);" id="addCF">
<button class="btn-primary btn">Add</button>
</a>
</td>
ADD Form Script
var i = 2;
$(document).ready(function() {
$("#addCF").click(function() {
$("#customFields").append("<tr><td><select required id='itemname-" + i + "' name='itemname[]' class='form-control' onchange='showUser(this);'><option value=''>Select Item Code</option><?php $q='SELECT * FROM items where category="
Raw Material "';$res=mysqli_query($con,$q);while($row=mysqli_fetch_assoc($res)) {echo " < option value = '". $row['
itemid ']."' > " .$row['item_code'] ." < /option>" ;}echo "</select > " ;?></td><td><input type='text' class='form-control col-xs-2' id='quantity-" + i + "' placeholder='Quantity' name='quantity[]' value='0' onchange='getdetails(this);'><p id='parameterr-" + i + "' style='float:left'></p><input type='hidden'name='parameter[]' id='parameter-" + i + "'></td><td><input type='text' class='form-control col-xs-2' id='bp-" + i + " ' placeholder='Basic Price' value='0' name='price[]' onchange='getdetails(this);'></td><td><input type='text' class='form-control col-xs-2' id='gst-" + i + "' placeholder='GST' readonly='readonly' name='gst[]' onblur='tax()'></td><td><input type='text' class='form-control col-xs-2' id='tbp-" + i + "' readonly='readonly' placeholder='Total Basic Price' name='tbp[]'></td><td><input type='text' class='form-control col-xs-2' id='tgst-" + i + "' placeholder='Total GST' name='tgst[]' readonly='readonly'></td><td><input type='text' readonly='readonly' class='form-control col-xs-2' id='tot-" + i + "' placeholder='Total' name='grand[]'></td><td><a href='javascript:void(0);'' id='remCF'><button class='btn-default btn'>Remove</button></a></td></tr>");
i++;
});
$("#customFields").on('click', '#remCF', function() {
$(this).parent().parent().remove();
});
});
I am facing issue while running this function
function getdetails(str) {
var name = str.id;
var res = name.split("-");
var b = res[1];
var qtyid = "quantity-" + b;
var priceid = "bp-" + b;
var tbpid = "tbp-" + b;
var tgstid = "tgst-" + b;
var gstid = "gst-" + b;
var totid = "tot-" + b;
alert(priceid);
var qty = document.getElementById(qtyid).value;
var price = document.getElementById(priceid).value;
var gst = document.getElementById(gstid).value;
if (qty == 0) {
alert("Please Enter Quantity");
} else if (price == 0) {
alert("Please Enter Price");
} else if (price == 0) {
alert("Please Enter Price");
} else if (gst == 0) {
alert("Please Select Item to place purchase Id");
} else {
document.getElementById(tbpid).value = qty * price;
var tbp = document.getElementById(tbpid).value;
var gst = document.getElementById(gstid).value;
document.getElementById(tgstid).value = tbp * (gst / 100);
var tgst = document.getElementById(tgstid).value;
document.getElementById(totid).value = tgst + tbp;
}
}
it is working for first row and after adding second row it is not running please help me to resolve the issue
i Want to use dynamically added text field value in java script

Please check the append string again. Easy solution is to replace :
THIS
$("#customFields").append("<tr><td><select required id='itemname-" + i + "' name='itemname[]' class='form-control' onchange='showUser(this);'><option value=''>Select Item Code</option><?php $q='SELECT * FROM items where category="
Raw Material "';$res=mysqli_query($con,$q);while($row=mysqli_fetch_assoc($res)) {echo " < option value = '". $row['
itemid ']."' > " .$row['item_code'] ." < /option>" ;}echo "</select > " ;?></td><td><input type='text' class='form-control col-xs-2' id='quantity-" + i + "' placeholder='Quantity' name='quantity[]' value='0' onchange='getdetails(this);'><p id='parameterr-" + i + "' style='float:left'></p><input type='hidden'name='parameter[]' id='parameter-" + i + "'></td><td><input type='text' class='form-control col-xs-2' id='bp-" + i + " ' placeholder='Basic Price' value='0' name='price[]' onchange='getdetails(this);'></td><td><input type='text' class='form-control col-xs-2' id='gst-" + i + "' placeholder='GST' readonly='readonly' name='gst[]' onblur='tax()'></td><td><input type='text' class='form-control col-xs-2' id='tbp-" + i + "' readonly='readonly' placeholder='Total Basic Price' name='tbp[]'></td><td><input type='text' class='form-control col-xs-2' id='tgst-" + i + "' placeholder='Total GST' name='tgst[]' readonly='readonly'></td><td><input type='text' readonly='readonly' class='form-control col-xs-2' id='tot-" + i + "' placeholder='Total' name='grand[]'></td><td><a href='javascript:void(0);'' id='remCF'><button class='btn-default btn'>Remove</button></a></td></tr>");
WITH
$("#customFields").append(`<tr><td><select required id='itemname-" + i + "' name='itemname[]' class='form-control' onchange='showUser(this);'><option value=''>Select Item Code</option><?php $q='SELECT * FROM items where category="
Raw Material "';$res=mysqli_query($con,$q);while($row=mysqli_fetch_assoc($res)) {echo " < option value = '". $row['
itemid ']."' > " .$row['item_code'] ." < /option>" ;}echo "</select > " ;?></td><td><input type='text' class='form-control col-xs-2' id='quantity-" + i + "' placeholder='Quantity' name='quantity[]' value='0' onchange='getdetails(this);'><p id='parameterr-" + i + "' style='float:left'></p><input type='hidden'name='parameter[]' id='parameter-" + i + "'></td><td><input type='text' class='form-control col-xs-2' id='bp-" + i + " ' placeholder='Basic Price' value='0' name='price[]' onchange='getdetails(this);'></td><td><input type='text' class='form-control col-xs-2' id='gst-" + i + "' placeholder='GST' readonly='readonly' name='gst[]' onblur='tax()'></td><td><input type='text' class='form-control col-xs-2' id='tbp-" + i + "' readonly='readonly' placeholder='Total Basic Price' name='tbp[]'></td><td><input type='text' class='form-control col-xs-2' id='tgst-" + i + "' placeholder='Total GST' name='tgst[]' readonly='readonly'></td><td><input type='text' readonly='readonly' class='form-control col-xs-2' id='tot-" + i + "' placeholder='Total' name='grand[]'></td><td><a href='javascript:void(0);'' id='remCF'><button class='btn-default btn'>Remove</button></a></td></tr>`);

Related

JavaScript Function not taking the array index returning as undefined

I have created a Crud application and have a data() which accepts Json
user = {name: name, age: age, email: email, dob: do}
as input.
When I call the editUser(), the array index is not being taken.
but when I pass the array index statically through the console, the function works as it should.
How should I correct the mistake?
I also have an updateUser() which also faces the same problem.
function read(users) {
var html = "<table border='1|1' class=\"table container\">";
var userhtml = document.getElementById('user');
userhtml.innerHTML = '';
var t = Object.keys(users[0]);
for (var i = 0; i <= 0; i++) {
html += "<tr>";
html += "<th>" + t[0] + "</th>";
html += "<th>" + t[1] + "</th>";
html += "<th>" + t[2] + "</th>";
html += "<th>" + t[3] + "</th>";
html += "<th>" + " Edit" + "</th>";
html += "<th>" + "Delete" + " </th>";
html += "</tr>"
for (var j = i; j < users.length; j++) {
html += "<tr>";
html += "<td>" + users[j].name + "</td>";
html += "<td>" + users[j].age + "</td>";
html += "<td>" + users[j].email + "</td>";
html += "<td>" + users[j].dob + "</td>";
html += "<td>" + "<a href='#' onclick='editUser()'>Edit</a>" + "</td>";
html += "<td>" + "<a href='#' onclick='deleteUsers()'>Delete</a>" + "</td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("user").innerHTML = html;
}
}
function editUser(index) {
debugger;
var userhtml1 = document.getElementById('edit');
userhtml1.innerHTML = '';
for (var i = 0; i < users.length; i++) {
if (i == index) {
userhtml1.innerHTML += ' <div class="user"> Name :<input id="EditName" type="text" value ="' + users[i].name + '"><br />' +
'Age :<input id="EditAge" type="text" value="' + users[i].age + '"> <br /> ' +
'Email :<input id="EditEmail" type="text" value="' + users[i].email + '"> <br /> ' +
'DOB :<input id="EditDOB" type="text" value="' + users[i].dob + '"> <br /> ' +
'<button class="edit" onclick="updateUser()">Update</button>';
} else {
userhtml1.innerHTML += '';
}
}
}
function updateUser(index) {
debugger;
var updatename = document.getElementById('EditName').value;
var updateage = document.getElementById('EditAge').value;
var updateemail = document.getElementById('EditEmail').value;
var updatedob = document.getElementById('EditDOB').value;
if (updatename == '' || updateemail == '' || updateage == '' || updatedob == '') {
alert("Please Fill the Fields!");
}
else {
users[index].name = updatename;
users[index].email = updateemail;
users[index].age = updateage;
users[index].dob = updatedob;
read(users);
}
}
<form action="#" onsubmit="data(name, age, email, dob)">
<!--data(name, age, email, dob)-->
<!--onsubmit="return validate()"-->
<div class="form-group">
<label class="form-text">Name :</label>
<input type="text" id="Name" placeholder="Enter Name" class="form-control" " />
<span id="ErrorName " class="text-danger "></span>
</div>
<div class="form-group ">
<label class="form-text ">Age :</label>
<input type="text " id="Age " placeholder="Enter Age " class="form-control " />
<span id="ErrorAge " class="text-danger "></span>
</div>
<div class="form-group ">
<label class="form-text ">Email :</label>
<input type="text " id="Email " placeholder="Enter Email " class="form-control " />
<span id="ErrorEmail " class="text-danger " />
</div>
<div class="form-group ">
<label class="form-text ">Password :</label>
<input type="password " id="Password " placeholder="Enter Password " class="form-control " />
<span id="ErrorPassword " class="text-danger "></span>
</div>
<div class="form-group ">
<label class="form-text ">Confirm Password :</label>
<input type="password " id="ConfirmPassword " placeholder="Confirm Password " class="form-control " onblur=" " />
<span id="ErrorConfirmPassword " class="text-danger "></span>
</div>
<div class="form-group ">
<label class="form-text ">Date of Birth :</label>
<input type="date " id="DOB " class="form-control " />
<span id="ErrorDOB " class="text-danger "></span>
</div>
<div class="form-group col-lg-12 text-center ">
<input type="submit " id="Submit " class="btn btn-success " />
</div>
</form>
<div class="container " id="user ">
</div>
<br />
<div class="form-group " id="edit ">
</div>

You just forgot to pass the argument. Try this please:
// Change this line
html += "<td>" + "<a href='#' onclick='editUser()'>Edit</a>" + "</td>";
// For this one
html += "<td>" + "<a href='#' onclick='editUser("+j+")'>Edit</a>" + "</td>";
Also, note that your for statement only executes once.. you can just remove it leaving the code inside untouched.
// This executes only once, no matter what.
for (var i = 0; i <= 0; i++) { // <-- remove this
// your code..
} // <-- remove this
// Because it would be the same as just doing:
// your code..
Edit for the updateUser problem:
// For the updateUser problem, note that I added the i variable for the call:
userhtml1.innerHTML += ' <div class="user"> Name :<input id="EditName" type="text" value ="' + users[i].name + '"><br />' +
'Age :<input id="EditAge" type="text" value="' + users[i].age + '"> <br /> ' +
'Email :<input id="EditEmail" type="text" value="' + users[i].email + '"> <br /> ' +
'DOB :<input id="EditDOB" type="text" value="' + users[i].dob + '"> <br /> ' +
'<button class="edit" onclick="updateUser('+i+')">Update</button>';

js tablesort not sorting with table that has values with dynamic cont

I have a PHP file that calls a JS file. The PHP has two tables that use the table sorter plugin, one works and one doesn't. The one that works comes straight from an Ajax call, the one that doesn't is populated with information from the same Ajax call as well as some js var. I am able to sort by columns that are filled by Ajax return, but I am unable to sort by the 4 columns (Code, QtyOrder, $, Comments) which are filled by JS variable values and are editable. I am using PHP 5.3.24 and jqueryui/1.10.0, is it possible to sort by editable and js filled columns and if so how?
thanks
$(document).ready(function() {
$('#loading').hide();
$("#guides").tablesorter();
$("#inv").tablesorter();
function populate(cnt) {
$("#cheggNote").hide();
$("#getting").hide();
$("#getting").hide();
$("#getting2").hide();
$("#getting3").hide();
$("#getting4").hide();
$("#guides tbody").remove();
$("#inv tbody").remove();
$("#detailSales tbody").remove();
$("#detailSales2 tbody").remove();
var po = $('#po').val();
$.ajax({
type: "POST",
url: "poInfo2.php",
//async:false,
dataType: "json",
data: ({
po: po,
filter: $('#filter').val(),
cnt: cnt,
end: $('#end').html()
}),
success: function(data) {
var isbn = data.isbn;
$("#qtyA").val(data.qty);
$("#price").val(data.price);
$("#priceOffered").val(data.pr_off);
$("#title").val(data.title);
$("#isbn10").val(data.isbn10);
$("#publisher").val(data.Publisher);
$("#copy").val(data.Copyright);
$("#weight").val(data.Weight);
$("#isbn13").val(data.isbn);
$("#list").val(data.list);
$("#AmzLow").val(data.AmzLow);
$("#AmzNewPrice").val(data.AmzNew);
$("#Rank").val(data.Rank);
$("#source").val(data.source);
$("#end").html(data.pages);
$("#start").html(cnt + 1);
if (data.isbn == null) {
$("#guides").append('<tr><td>No Records Found</td></tr>');
$("#inv").append('<tr><td>No Records Found</td></tr>');
} else {
for (var x = 0; x < data.PurPO.length; x++) {
$("#inv").append('<tr><td id=tableDATE>' + data.PurDate[x] + '</td><td id=tablePO>' + data.PurPO[x] +
'</td><td id=tableQtyOrdered>' + data.PurQty[x] + '</td><td id=tablePrice>' + data.PurPrice[x] + '</td></tr>');
}
$("#inv").trigger("update");
$("#guides").append('<tr><td>' + data.AMGprice + '</td><td>Amtext</td><td><input type="text" class="qty" id="ACode" value="' + data.ACode +
'"</td><td><input type="text" class="qty" id="AQty" value="' + data.AQty +
'"</td><td id="ANewPricemarg">' + ANewPricemarg + '</td><td><input type="text" class="qty" id="ANewPrice" value="' + data.ANewPrice +
'"</td><td><input type="text" class="qty" id="Acomments" value="' + data.Acomments +
'"/></td><td class="price">' + data.Atitle +
'</td></tr><tr><td>' + data.FGnew + '</td><td>Follett N</td><td><input type="text" class="qty" id="FNewCode" value="' + data.FNewCode +
'"</td><td><input type="text" class="qty" id="FNewQty" value="' + data.FNewQty +
'"</td><td id="FNewmarg">' + FNewmarg + '</td><td><input type="text" class="qty" id="FNew" value="' + data.FNew +
'"</td><td><input type="text" class="qty" id="Fcomments" value="' + data.Fcomments +
'"/></td><td class="price">' + data.Ftitle +
'</td></tr><tr><td>' + data.FGused + '</td><td>Follett U</td><td><input type="text" class="qty" id="FUsedCode" value="' + data.FUsedCode +
'"</td><td><input type="text" class="qty" id="FUsedQty" value="' + data.FUsedQty +
'"</td><td id="FUsedPricemarg">' + FUsedPricemarg + '</td><td><input type="text" class="qty" id="FUsedPrice" value="' + data.FUsedPrice +
'"</td><td><input type="text" class="qty" id="FUsedcomments" value="' + data.FUsedcomments +
'"/></td><td class="price">' + data.Ftitle +
'</td></tr><tr><td>' + data.NEBGPrice + '</td><td>Nebraska</td><td></td><td><input type="text" class="qty" id="NQty" value="' + data.NQty +
'"</td><td id="NPricemarg">' + NPricemarg + '</td><td><input type="text" class="qty" id="NPrice" value="' + data.NPrice +
'"</td><td><input type="text" class="qty" id="Ncomments" value="' + data.Ncomments +
'"</td><td></td></tr><tr><td>' + data.BWGNewPrice +
'</td><td>BkWin N</td><td><input type="text" class="qty" id="BWCode" value="' + data.BWCode +
'"</td><td><input type="text" class="qty" id="BWQty" value="' + data.BWQty +
'"</td><td id="BWmarg">' + BWmarg + '</td><td><input type="text" class="qty" id="BW" value="' + data.BW +
'"</td><td><input type="text" class="qty" id="BWcomments" value="' + data.BWcomments +
'"</td><td></td></tr><tr><td>' + data.BWGPrice +
'</td><td>BkWin U</td><td><input type="text" class="qty" id="BWCodeU" value="' + data.BWCodeU +
'"</td><td><input type="text" class="qty" id="BWQtyU" value="' + data.BWQtyU +
'"</td><td id="BWUmarg">' + BWUmarg + '</td><td><input type="text" class="qty" id="BWU" value="' + data.BWU +
'"</td><td><input type="text" class="qty" id="BWUcomments" value="' + data.BWUcomments +
'"</td><td></td></tr><tr><td>' + data.BKBGPrice +
'</td><td>BookByte</td><td><input type="text" class="qty" id="BKBCode" value="' + data.BKBCode +
'"</td><td><input type="text" class="qty" id="BKBQty" value="' + data.BKBQty +
'"</td><td id="BKBmarg">' + BKBmarg + '</td><td><input type="text" class="qty" id="BKB" value="' + data.BKB +
'"</td><td><input type="text" class="qty" id="BKBcomments" value="' + data.BKBcomments +
'"</td><td></td></tr><tr><td></td><td>F Qoute N</td><td><input type="text" class="qty" id="FquoteNewCode" value="' + data.FQuoteNewCode +
'"</td><td><input type="text" class="qty" id="FQuoteNewQty" value="' + data.FQuoteNewQty +
'"</td><td id="FQuoteNewmarg">' + FQuoteNewmarg + '</td><td><input type="text" class="qty" id="FQuoteNew" value="' + data.FQuoteNew +
'"</td><td id="FQuoteNewmarg><input type="text" class="qty" id="FQNcomments" value="' + data.FQNcomments + '"/></td><td class="price">' + data.FQtitle +
'</td></tr><tr><td></td><td>F Qoute U</td><td><input type="text" class="qty" id="FQuoteUsedCode" value="' + data.FQuoteUsedCode +
'"</td><td><input type="text" class="qty" id="FQuoteUsedQty" value="' + data.FQuoteUsedQty +
'"</td><td id="FQuoteUsedmarg">' + FQuoteUsedmarg + '</td><td><input type="text" class="qty" id="FQuoteUsed" value="' + data.FQuoteUsed +
'"</td><td><input type="text" class="qty" id="FQUcomments" value="' + data.FQUcomments + '"/></td><td class="price">' + data.FQtitle +
'<td></tr><tr><td></td><td>Valore</td><td></td><td><input type="text" class="qty" id="VLRQty" value="' + data.VLRQty +
'"</td><td id="VLRmarg">' + VLRmarg + '</td><td><input type="text" class="qty" id="VLR" value="' + data.VLR +
'"</td><td><input type="text" class="qty" id="VLRcomments" value="' + data.VLRcomments +
'"</td><td></td><tr><td></td><td>Bkscouter</td><td></td><td><input type="text" class="qty" id="Bookscouter1Qty" value="' + data.Bookscouter1Qty +
'"</td><td id="Bookscouter1marg">' + Bookscouter1marg + '</td><td><input type="text" class="qty" id="Bookscouter1" value="' + data.Bookscouter1 +
'"</td><td><input type="text" class="qty" id="BKScomments" value="' + data.BKScomments +
'"</td><td></td><tr><td></td><td>Recycle</td><td></td><td><input type="text" class="qty" id="ScoutRecycleQty" value="' + data.ScoutRecycleQty +
'"</td><td id="ScoutRecyclemarg">' + ScoutRecyclemarg + '</td><td><input type="text" class="qty" id="ScoutRecycle" value="' + data.ScoutRecycle +
'"</td><td><input type="text" class="qty" id="Recycomments" value="' + data.Recycomments +
'"</td><td></td></tr><tr><td></td><td>Bks Amz</td><td></td><td><input type="text" class="qty" id="ScoutAmzQty" value="' + data.ScoutAmzQty +
'"</td><td id="ScoutAmzmarg">' + ScoutAmzmarg + '</td><td><input type="text" class="qty" id="ScoutAmz" value="' + data.ScoutAmz +
'"</td><td><input type="text" class="qty" id="AMZcomments" value="' + data.AMZcomments +
'"</td><td></td></tr><tr><td></td><td>McKenzie</td><td></td><td><input type="text" class="qty" id="McKenzieQty" value="' + data.McKenzieQty +
'"</td><td id="MCKmarg">' + MCKmarg + '</td><td><input type="text" class="McKenzie" id="McKenzie" value="' + data.McKenzie +
'"</td><td><input type="text" class="qty" id="MCKcomments" value="' + data.MCKcomments +
'"</td><td></td></tr>');
var shipweight = document.getElementById("weight").value;
} //END OF ELSE
$("#cnt").val(data.cnt);
$("#guides").trigger("update");
} // END OF SUCCESS
}); //END OF AJAX
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="inventory" class="noprint">
<table id="inv" class="tablesorter" style="border: 1px solid black;">
<caption class="cap">Order History</caption>
<thead>
<tr>
<th>DATE</th>
<th>PO</th>
<th>QtyOrdered</th>
<th>Price</th>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--INVENTORY-->
<div id="guide">
<table class="tablesorter" id="guides" style="border: 1px solid black;">
<thead>
<tr>
<th>Current</th>
<th>Guide</th>
<th>Code</th>
<th>QtyOrder</th>
<th>Margin</th>
<th>$</th>
<th>Comments</th>
<th>Title</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<!--GUIDE-->

for anyone with the same issues it is possible in the new version of tablesorter , jut update the tablesorter and you are good to go.

Jquery works in JSFiddle but not works in computer

This is the answer I get from jsfiddle. It's working on the fiddle part, but it's not working when I move it to my computer. I replaced the code in my program and also included all of the external resource library. However, it's still not working at all.
var x = 1;
function appendRow() {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + x);
// I ASSIGNED A CLASS CALLED INPUT TO THE ELEMENT YOU WANT TO SELECT
newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3' style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control' name='Dates'> <select class='form-control input' id='slct" + x + "' name='Branch''><option disabled='' selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>");
newTextBoxDiv.appendTo("#div");
x++;
}
function changeIt(rowIndex) {
//i++; DO NOT INCREMENT I!!! IT WILL CREATE THE REFERRAL ERROR YOU HAD. BECAUSE THE FUNCTION WOULD BE REFERRING TO A NON-EXISTING INPUT ELEMENT. I REPLACED IT WITH ROWINDEX, WHICH IS INITIATED WHILE CALLING THE FUNCTION
var select = document.getElementById("slct" + rowIndex);
var divv = document.getElementById("container" + rowIndex);
var value = select.value;
if (value == 0.5) {
toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div>";
divv.innerHTML = toAppend;
return;
}
if (value == 1) {
toAppend = "";
divv.innerHTML = toAppend;
return;
}
}
$("#button").click(function() {
appendRow();
});
$("#div").on("change", ".input", function() {
//EXTRACT THE NUMBER FROM THE CLICKED ITEM'S ID
let rowIndex = $(this).attr("id").replace(/.[^0-9]/g, "");
changeIt(rowIndex);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
<button value="Add Row" id="button">Add row</button>
</div>

make sure your script is below the html for your button
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
<button value="Add Row" id="button">Add row</button>
</div>
<!-- your js goes here -->
<script>
var x = 1;
function appendRow() {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + x);
// I ASSIGNED A CLASS CALLED INPUT TO THE ELEMENT YOU WANT TO SELECT
newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3' style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control' name='Dates'> <select class='form-control input' id='slct" + x + "' name='Branch''><option disabled='' selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>");
newTextBoxDiv.appendTo("#div");
x++;
}
function changeIt(rowIndex) {
//i++; DO NOT INCREMENT I!!! IT WILL CREATE THE REFERRAL ERROR YOU HAD. BECAUSE THE FUNCTION WOULD BE REFERRING TO A NON-EXISTING INPUT ELEMENT. I REPLACED IT WITH ROWINDEX, WHICH IS INITIATED WHILE CALLING THE FUNCTION
var select = document.getElementById("slct" + rowIndex);
var divv = document.getElementById("container" + rowIndex);
var value = select.value;
if (value == 0.5) {
toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div>";
divv.innerHTML = toAppend;
return;
}
if (value == 1) {
toAppend = "";
divv.innerHTML = toAppend;
return;
}
}
$("#button").click(function() {
console.log('test');
appendRow();
});
$("#div").on("change", ".input", function() {
//EXTRACT THE NUMBER FROM THE CLICKED ITEM'S ID
let rowIndex = $(this).attr("id").replace(/.[^0-9]/g, "");
changeIt(rowIndex);
});</script>

Here you go with the solution
<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var x = 1;
function appendRow() {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + x);
// I ASSIGNED A CLASS CALLED INPUT TO THE ELEMENT YOU WANT TO SELECT
newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3' style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control' name='Dates'> <select class='form-control input' id='slct" + x + "' name='Branch''><option disabled='' selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>");
newTextBoxDiv.appendTo("#div");
x++;
}
function changeIt(rowIndex) {
//i++; DO NOT INCREMENT I!!! IT WILL CREATE THE REFERRAL ERROR YOU HAD. BECAUSE THE FUNCTION WOULD BE REFERRING TO A NON-EXISTING INPUT ELEMENT. I REPLACED IT WITH ROWINDEX, WHICH IS INITIATED WHILE CALLING THE FUNCTION
var select = document.getElementById("slct" + rowIndex);
var divv = document.getElementById("container" + rowIndex);
var value = select.value;
if (value == 0.5) {
toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div>";
divv.innerHTML = toAppend;
return;
}
if (value == 1) {
toAppend = "";
divv.innerHTML = toAppend;
return;
}
}
$("#button").click(function() {
console.log('test');
appendRow();
});
$("#div").on("change", ".input", function() {
//EXTRACT THE NUMBER FROM THE CLICKED ITEM'S ID
let rowIndex = $(this).attr("id").replace(/.[^0-9]/g, "");
changeIt(rowIndex);
});
});</script>
</head>
<body>
<div id="div">
<button value="Add Row" id="button">Add row</button>
</div>
<!-- your js goes here -->
</body>
</html>
I think you forgot to add $(document).ready(function(){});
I tested in my local & it's working.

Uncaught TypeError: Cannot read property 'value' of null at value change

DEMO PictureI am making a dynamic add row and dynamic selectbox option with using increment 'x' and 'i' value in two javascript function as the code below.Is working when select to option 0.5 but when change it to 1 it come out Uncaught TypeError: Cannot read property 'value' of null.Error Message
var x = 1;
function appendRow() {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + x);
newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3' style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control' name='Dates'> <select class='form-control' id='slct" + x + "' name='Branch' onchange='change();'><option disabled='' selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>");
newTextBoxDiv.appendTo("#div");
x++;
}
var i = 0;
function change() {
i++;
var select = document.getElementById("slct" + i);
var divv = document.getElementById("container" + i);
var value = select.value;
if (value == 0.5) {
toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div>";
divv.innerHTML = toAppend;
return;
}
if (value == 1) {
toAppend = "";
divv.innerHTML = toAppend;
return;
}
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="div">
<button onclick="appendRow()" value="Add Row">Add row</button>

I found out what went wrong. in your function called change() you are incrementing i. It increments every time you run it. This results into references to an id that does not exist, resulting in the error you got.
I made up a solution where you enter the relevant referential number in your function. just retrieve the number before you run the function. In this case after you made a change.
You should be able to figure it out from here. I also entered some comments in the code explaining the changes.
JS-Fiddle
html
<div id="div">
<button value="Add Row" id="button">Add row</button>
</div>
js/jQuery
var x = 1;
function appendRow() {
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + x);
// I ASSIGNED A CLASS CALLED INPUT TO THE ELEMENT YOU WANT TO SELECT
newTextBoxDiv.after().html("<div class='form-group'><label class='control-label col-sm-3' style='text-align:right;'>Date:</label><div class='col-sm-3'><div class='input-group date' ><span class='input-group-addon'><i class='fa fa-calendar'></i></span><input type='Date' class='form-control' name='Dates'> <select class='form-control input' id='slct" + x + "' name='Branch''><option disabled='' selected=''>Please Select Leave Day</option> <option value='1' >1</option><option value='0.5' >0.5</option></select></div></span></div><div id='container" + x + "'></div></div>");
newTextBoxDiv.appendTo("#div");
x++;
}
function changeIt(rowIndex) {
//i++; DO NOT INCREMENT I!!! IT WILL CREATE THE REFERRAL ERROR YOU HAD. BECAUSE THE FUNCTION WOULD BE REFERRING TO A NON-EXISTING INPUT ELEMENT. I REPLACED IT WITH ROWINDEX, WHICH IS INITIATED WHILE CALLING THE FUNCTION
var select = document.getElementById("slct" + rowIndex);
var divv = document.getElementById("container" + rowIndex);
var value = select.value;
if (value == 0.5) {
toAppend = "<label class='control-label col-sm-1'>Time:</label><div class='col-sm-2'><div class='input-group date' id = 'date'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div><div class='col-sm-2'><div class='input-group date' id = 'dates'> <span class='input-group-addon'><i class='fa fa-clock-o'></i></span><input type='time' class='form-control' ></div></div>";
divv.innerHTML = toAppend;
return;
}
if (value == 1) {
toAppend = "";
divv.innerHTML = toAppend;
return;
}
}
$("#button").click(function(){
appendRow();
});
$("#div").on("change",".input", function(){
//EXTRACT THE NUMBER FROM THE CLICKED ITEM'S ID
let rowIndex = $(this).attr("id").replace(/.[^0-9]/g, "");
changeIt(rowIndex);
});

Put your 'return' outside of your if and before your final closing bracket.
if (value== 1) {
toAppend = "";
divv.innerHTML = toAppend;
}
return;

Sum values Javascript

Here http://webmark.pt/sharepics/orders.png is the sales order layout (./sharepics/add.zip the full code) that I need to customize.
Problem:
Dynamically sum the cells between size 39 and 50, and put the value in the Pairs (quantity).
Already managed to add the lines, but the result is added to the lines immediately below.
The code that does this operation:
var newTr = $('<tr id="row_' + count + '"></tr>');
newTr.html('<td><input name="product' + count + '" type="hidden" value="' + item_code + '"><input class="span5 tran" name="item' + count + '" type="text" value="' + item_code + '"></td>
.......
<td><input class="input-block-level text-center" name="sort' + count + '" type="text" value="" id="sort-' + count + '" onClick="this.select();"></td>
<td><input class="input-block-level text-center" name="size39' + count + '" type="text" value="" id="size39-' + count + '" onClick="this.select();"></td>
......
<td><input class="input-block-level text-center" name="size50' + count + '" type="text" value="" id="size50-' + count + '" onClick="this.select();"></td>
<td><input class="input-block-level text-center" name="quantity' + count + '" type="text" value="1" id="quantity-' + count + '" onClick="this.select();"></td>
<td><input class="span2 tran" style="text-align:right;" name="unit_price' + count + '" type="text" id="price-' + count + '" value="' + item_price + '"></td>
<?php echo '<td><input class="span2 tran2" name="cart\'+ count +\'" type="text" value="" required="required" data-error="' . $this->lang->line("cart") . ' ' . $this->lang->line("is_required") . '"></td>';
if (DISCOUNT_OPTION == 2) {
echo '<td><select class="span2 select tran" data-placeholder="Select..." name="discount\' + count + \'" id="discount-\' + count + \'">';
foreach ($discounts as $discount) {
echo "<option value=" . $discount->id;
if ($discount->id == DEFAULT_DISCOUNT) {
echo ' selected="selected"';
}
echo ">" . $discount->name . "</option>";
}
echo '</select></td>';
}
?>
<td><input class="input-block-level text-center" name="subtotalpares' + count + '" type="text" value="" id="subtotalpares" disabled onClick="this.select();"></td>
<td><i class="icon-trash tip del" id="' + count + '" title="Remove this Item" style="cursor:pointer;" data-placement="right"></i></td>');
newTr.prependTo("#dyTable");
count++;
an++;
total += parseFloat(item_price);
$("input[id^=size]").keyup(function () {
var sum = 0;
$("input[id^=size]").each(function () {
sum += (parseInt(this.value) ? parseInt(this.value) : 1);
});
$("input[id^=quantity]").val(sum);
});
I look forward to some help!

We Keep Coding

JavaScript is the programming language of the Web.

Dynamically appended text field value not geting printed through id in javascript - javascript

Related

JavaScript Function not taking the array index returning as undefined

js tablesort not sorting with table that has values with dynamic cont

Jquery works in JSFiddle but not works in computer

Uncaught TypeError: Cannot read property 'value' of null at value change

Sum values Javascript

Categories

Resources