$(document).ready(function () {
var counter = 0;
var j=0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="eway_bill_no2' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="item_name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="item_hsn' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="quantity'+j+'" name="quantity' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="price'+j+'" onfocusout="getsubTotal2()" name="amount' + counter + '" id="page"/></td>';
cols += '<td><input type="text" class="form-control" id="subtotal'+j+'" name="subtotal' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="discount'+j+'" onfocusout="getPrice2()" name="discount' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="total'+j+'" name="total' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
j++;
});
/*here we are using this to add row in this auto calculation of prize and discount is in below functions*/
getsubTotal2 = function() {
var k=0;
var numVal3 = Number(document.getElementById("quantity"+k).value);
var numVal4 = Number(document.getElementById("price"+k).value);
var totalValue2 = (numVal3 * numVal4)
document.getElementById("subtotal"+k).value = totalValue2.toFixed(2);
k++;
}
getPrice2 = function() {
var l=0;
var numVal1 = Number(document.getElementById("subtotal"+l).value);
var numVal2 = Number(document.getElementById("discount"+l).value) / 100;
var totalValue = numVal1 - (numVal1 * numVal2)
document.getElementById("total"+l).value = totalValue.toFixed(2);
l++;
}
/*the function is getting called only once help me with this i am new here
its just an GST calculating form just want auto calculation of quantity*amount and amount-discount=total;
help with this
/*the function is getting called only once help me with this i am new here
its just an GST calculating form just want auto calculation of quantity*amount and amount-discount=total;
help with this
/*the function is getting called only once help me with this i am new here
its just an GST calculating form just want auto calculation of quantity*amount and amount-discount=total;
help with this
Related
I have a table and I append some rows if it is needed, when I add a row to my table the row number increase like 1, 2, 3, 4, and so on. but if I delete a row for example row number 4, it broke, and if add a new row it not start from number 4 it starts from number 5, how can I solve this problem.
this is my js code:-
$(document).ready(function () {
var rowcount, addBtn, tableBody;
addBtn = $('#addNew');
rowcount = $('#autocomplete_table tbody tr').length + 1;
tableBody = $('#autocomplete_table');
addBtn.click(function () {
$.ajax({
method: "get",
url: "book/getDepartment/" ,
success: function (data) {
console.log(data)
//rowcount=rowcount+1;
console.log(rowcount);
html = '<tr id="row_' + rowcount + '">';
html += '<td><button type="button" id="delete_' + rowcount + '" class=" btn btn-danger btn-sm remove delete_row"><i class="glyphicon glyphicon-remove-sign"></i></button></td>';
html += '<td><input type="text" data-field-name="book_name" name="book_name[]" id="book_name_' + rowcount + '" class=" form-control input-sm "></td>';
html += '<td><input type="text" data-field-name="edition" name="edition[]" id="edition_' + rowcount + '" class="form-control input-sm "></td>';
html += '<td><input type="text" required data-field-name="number" name="number[]" id="number_' + rowcount + '" class="form-control input-sm number"></td>';
html += '<td><input type="text" data-field-name="by_price" name="by_price[]" id="by_price_' + rowcount + '" class="form-control input-sm by_price"></td>';
html += '<td><input type="text" data-field-name="sell_price" name="sell_price[]" id="sell_price_' + rowcount + '" class="form-control input-sm sell_price"></td>';
html += '<td><input type="text" data-field-name="total_payment" name="total_payment[]" id="total_payment_' + rowcount + '" class="form-control input-sm total_payment"></td>';
html += '<td><select data-field-name="department" name="department[]" id="department_' + rowcount + '" class=" form-control input-sm department">';
html += '<option> انتخاب کنید...</option>';
$.each(data, function (i, item) {
html += '<option value="' + item.department_id + '">' + item.department_name + '</option>';
});
html += '</select></td>';
html += '</tr>';
rowcount++;
tableBody.append(html);
},
error: function () {
}
})
})
function delete_Row() {
var rowNo;
id = $(this).attr('id');
//console.log(id);
id_arr = id.split("_");
// console.log(id_arr);
rowNo = id_arr[id_arr.length - 1];
if (rowNo > 1) {
$('#row_' + rowNo).remove();
} else {
alert("شما نمی توانداین سطر را جذف کندید");
}
//console.log($(this).parent());
// $(this).parent().parent().remove();
}
function registerEvent() {
$(document).on('click', '.delete_row', delete_Row);
}
registerEvent();
});
success: function (data) {
rowcount = $('#autocomplete_table tbody tr').length + 1;
You have declare rowcount At Global scope that's why its value is equals to total row you add. when you delete any row you are not recounting total rows rowcount = $('#autocomplete_table tbody tr').length + 1; and it start with wrong number.just put your rowcount in side success function
I want to add text to dynamically created textbox.
var dynamicTextBox= "";
for (var i = 0; i < vm.FitToWork.length; i++) {
dynamicTextBox+= '<input class="form-control" name = "DynamicTextBox" id= "DynamicTextBox" type="text" value = "'vm.FitToWork[i]'" /> ' +
'<button id="btnAdd" class="delete-decl">+</button>';
}
document.getElementById("TextBoxContainer").innerHTML=dynamicTextBox;
its not working..
You have syntax error. You are trying to concatenate a variable vm.FitToWork[i] but not using concatenation operator (+). Try the following code:
var dynamicTextBox= "";
// ignore this. just have this to get the code working
var vm = {FitToWork : ["test","rest","vest"]};
for (var i = 0; i < vm.FitToWork.length; i++) {
dynamicTextBox += '<input class="form-control" name = "DynamicTextBox" id= "DynamicTextBox" type="text" value = "' + vm.FitToWork[i] + '" />';
dynamicTextBox += '<button id="btnAdd" class="delete-decl">+</button></br>';
}
document.getElementById("TextBoxContainer").innerHTML = dynamicTextBox;
<div id="TextBoxContainer"></div>
You missed concat.
var dynamicTextBox= "";
for (var i = 0; i < vm.FitToWork.length; i++) {
dynamicTextBox+= '<input class="form-control" name = "DynamicTextBox" id= "DynamicTextBox" type="text" value = "'+vm.FitToWork[i]+'" /> ' + '<button id="btnAdd" class="delete-decl">+</button>';
}
document.getElementById("TextBoxContainer").innerHTML=dynamicTextBox;
You forgot to add pluses in value:
... value="' + vm.FitToWork[i] + '" ...
value should be in + + value = "' + value + '"
so value = "'+vm.FitToWork[i]+'"
or you can try this
'<input name = "DynamicTextBox" type="text" value = "' + value + '" />' +
'<input type="button" value="+" id="btnAdd" class="delete-decl" />'
I am a novice when it comes to jQuery so please bear with me a little and I apologies for my poor coding in advance.
The logic to my code is simple or at least that was the aim.
A jQuery script checks a type field and then gets its values and builds a table. That all works 100%.
The issue comes when deleting rows and then updating the table id's on the new appended rows that is generated by clicking on the new row button.
The new rows do not delete.
Here is the code but I have also created a jsfiddle so you can check it out live, but there are some bugs that are not there on the site - for instance you need to double click the button for some reason for it to work
JS:
$('.purchase-order-button').on('click', function(){
var buildcotable = '';
var buildtrs = $('#formentry15').val();
var coArray = '';
var coArrayNumber = 1;
buildcotable += '<div class="table-responsive">';
buildcotable += '<table class="table table-bordered">';
buildcotable += '<thead>';
buildcotable += '<th class="text-center">CO Number</th>';
buildcotable += '<th class="text-center">CO Price</th>';
buildcotable += '<th class="text-center">Options</th>';
buildcotable += '</thead>';
buildcotable += '<tbody id="jquerypotable">';
//lets do a check and see how many are listed
if(buildtrs.indexOf(',') !== -1){
coArray = buildtrs.split(',');
$.each(coArray, function(){
var splitCoArray = this.split('=');
var coArrayPrice = splitCoArray[1].trim().replace('£', '');
var coArrayCode = splitCoArray[0].trim();
buildcotable += '<tr id="jqueryporow'+coArrayNumber+'">';
buildcotable += '<td><input type="text" value="'+coArrayCode+'" id="jqueryponumber'+coArrayNumber+'" class="form-control"></td>';
buildcotable += '<td><input type="text" value="'+coArrayPrice+'" id="jquerypovalue'+coArrayNumber+'" class="form-control"></td>';
buildcotable += '<td class="text-center"><a class="btn btn-danger delete-co-row" id="deletepo'+coArrayNumber+'">Delete CO Number</a></td>';
buildcotable += '</tr>';
coArrayNumber += 1;
});
} else {
if(buildtrs == '' || buildtrs == 'TBC'){
buildcotable += '<tr id="jqueryporow1">';
buildcotable += '<td><input type="text" value="" id="jqueryponumber1" class="form-control"></td>';
buildcotable += '<td><input type="text" value="" id="jquerypovalue1" class="form-control"></td>';
buildcotable += '<td class="text-center"><a class="btn btn-danger delete-co-row" id="deletepo1">Delete CO Number</a></td>';
buildcotable += '</tr>';
} else {
var splitSingleCoArray = buildtrs.split('=');
var coSinglePrice = splitSingleCoArray[1].trim().replace('£', '');
var coSingleCode = splitSingleCoArray[0].trim();
buildcotable += '<tr id="jqueryporow1">';
buildcotable += '<td><input type="text" value="'+coSingleCode+'" id="jqueryponumber1" class="form-control"></td>';
buildcotable += '<td><input type="text" value="'+coSinglePrice+'" id="jquerypovalue1" class="form-control"></td>';
buildcotable += '<td class="text-center"><a class="btn btn-danger delete-co-row" id="deletepo1">Delete CO Number</a></td>';
buildcotable += '</tr>';
}
}
buildcotable += '</tbody>';
buildcotable += '</table>';
buildcotable += '<p>Add New CO Number</p>';
buildcotable += '<p>Done</p>';
buildcotable += '</div>';
$('.ubl-section-7').html(buildcotable);
$('.ubl-section-7').show();
$('.model-background').fadeIn(500);
//add new row
$('#addnewpo').on('click', function(e){
e.preventDefault();
var numPoRows = $("#jquerypotable > tr").length;
var makeNewRowNum = numPoRows + 1;
var createnewporow = '<tr id="jqueryporow'+makeNewRowNum+'">';
createnewporow += '<td><input type="text" value="" id="jqueryponumber'+makeNewRowNum+'" class="form-control"></td>';
createnewporow += '<td><input type="text" value="" id="jquerypovalue'+makeNewRowNum+'" class="form-control"></td>';
createnewporow += '<td class="text-center"><a class="btn btn-danger delete-co-row-new" id="deletepo'+makeNewRowNum+'">Delete CO Number</a></td>';
createnewporow += '</tr>';
$('#jquerypotable').append(createnewporow);
});
//delete row
$('#jquerypotable > tr').on('click', '.delete-co-row', function(e){
e.preventDefault();
var getCoId = $(this).attr('id');
var coLastChar = parseInt(getCoId.substr(getCoId.length - 1));
var coHowManyRows = parseInt($("#jquerypotable > tr").length);
var makeMinusId = '';
var newi = coLastChar;
if(coLastChar == coHowManyRows){
$('#jqueryporow'+coLastChar).remove();
} else {
//before removing rows we need to rebuild the information given.
for(newi; newi <= coHowManyRows; newi++){
if(newi == coLastChar){
$('#jqueryporow'+newi).remove();
} else {
makeMinusId = (newi - 1);
$('#jqueryporow'+newi).attr('id', 'jqueryporow'+makeMinusId);
$('#jqueryponumber'+newi).attr('id', 'jqueryponumber'+makeMinusId);
$('#jquerypovalue'+newi).attr('id', 'jquerypovalue'+makeMinusId);
$('#deletepo'+newi).attr('id', 'deletepo'+makeMinusId);
}
}
}
});
});
enter link description here
Any help is gratefully received
You added an eventListener to the delete buttons at the initialization of the page but didnt do it again when creating the rows. I suggest adding the following code to your addnewpo button:
$('#addnewpo').on('click', function(e){
// your original code here
//...
//now add an event listener to the new deletebuttons
$('#jquerypotable > tr').on('click', '.delete-co-row-new', function(e){
e.preventDefault();
$(this).closest('tr').remove();
});
});
I Found the issue, the issue was the listener needed to remove the tr.
so instead of:
/now add an event listener to the new deletebuttons
$('#jquerypotable > tr').on('click', '.delete-co-row', function(e){
It needed to be:
/now add an event listener to the new deletebuttons
$('#jquerypotable').on('click', '.delete-co-row', function(e){
Thanks everyone for trying to help :)
I am adding rows dynamically to a table based on selection yet I would like to add fadeIn effect.
I am posting the part in which I add the rows to table.
Any help will be appreciated.
(I am trying to use the fadeIn effect while adding newRow to table and removing tblGraphPattern content afterwards). I want to have the effect in the lines
$("table.selectPattern").append(newRow);
$("#tblGraphPattern tr").remove();
var newRow = $("<tr>");
newRow.attr("align","center");
newRow.css("outline", "thin solid");
for(var i = 1; i<counter;++i)
{
if($("#divSubject"+i+"").length>0)
{
var cols = "";
subjectText=$("#divSubject"+i+"").html();
if(subjectText=="Any")
{subjectVal = "?s"+selectCounter;}
else{subjectVal=$("#txtGraphSubject"+i+"").val();}
predicateText=$("#divPredicate"+i+"").html();
if(predicateText=="Any")
{predicateVal = "?p"+selectCounter;}
else{predicateVal=$("#txtGraphPredicate"+i+"").val();}
objectText=$("#divObject"+i+"").html();
if(objectText=="Any"){objectVal="?o"+selectCounter;}
else{
objectVal=$("#txtGraphObject"+i+"").val();
}
cols += '<tr><td align="right"><div id="divSelectSubject'+num+'">'+subjectText+'</div><input type="text" value="'+subjectVal+'" name="txtSelectSubject'
+ num + '" id="txtSelectSubject' + num + '"/></td>';
cols += '<td align="center"><div id="divSelectPredicate'+num+'">'+predicateText+'</div><input type="text" value="'+predicateVal+
'" name="txtSelectPredicate' + num + '" id="txtSelectPredicate' + num + '"/></td>';
cols += '<td align="left"><div id="divSelectObject'+num+'">'+objectText+'</div><input type="text" value="'+objectVal+
'" name="txtSelectObject' + num + '" id="txtSelectObject' + num + '"/></td></tr>';
newRow.append(cols);
}
num++;
}
selectCounter++;
newRow.append('<td><input type="button" class="ibtnDel" value="Delete"></td>');
$("table.selectPattern").append(newRow);
$("#tblGraphPattern tr").remove();
Make your newRow hidden by setting display:none; before appending it to table.selectPattern and then fadeIn after appending is done.
var newRow = $('<tr style="display:none;"></tr>');
// your remaining code
$("table.selectPattern").append(newRow);
$("#tblGraphPattern tr").remove();
newRow.fadeIn(2000);
I am dynamically adding and removing textboxes though I can successfully adds textbox but unable to remove textbox on clicking the remove button every time i have to reload the browser to remove the textboxes after clicking remove button.
here is my javascript for adding and removing textboxes.
<script type="text/javascript">
$(document).ready(function(){
var COUNTER = 3;
var labelArray = ["answer", "rank"];
$("#addButton").click(function () {
for(var i = 0; i < labelArray.length; i++){
createNewInput(labelArray[i]);
}
COUNTER++;
});
function createNewInput(label){
var tbDiv = $('#TextBoxesGroup');
var str = '<div class="control-group">';
str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
str += '<div class="controls">';
str += '<input type="text" id="' + label + '_' + COUNTER + '" name="'+ label +'_' + COUNTER + '" />';
str += '</div>';
str += '</div>';
tbDiv.append(str);
};
$("#removeButton").click(function () {
if(COUNTER==3){
alert("No more textbox to remove");
return false;
}
COUNTER--;
$("#TextBoxesGroup" +COUNTER).remove();
});
});
</script>
here is my html for textboxes.
<div id="TextBoxesGroup">
<div class="control-group">
<label class="control-label">answer_1: </label>
<div class="controls">
<input type="text" name="answer_1" id="answer_1" required="true" >
</div>
</div>
<div class="control-group">
<label class="control-label" for="rank1">Rank 1</label>
<div class="controls">
<input type="text" name="rank_1" id="rank_1" required="true">
</div>
</div>
<div class="control-group">
<label class="control-label">answer_2: </label>
<div class="controls">
<input type="text" name="answer_2" id="answer_2" required="true" >
<button class="btn btn-mini btn-danger" data-toggle="button" type="button" id="removeButton">
-
</button>
<button class="btn btn-mini btn-success" data-toggle="button" type="button" id="addButton">
+
</button>
</div>
</div>
<div class="control-group">
<label class="control-label" for="rank1" required="true">Rank 2</label>
<div class="controls">
<input type="text" name="rank_2" id="rank_2" required="true">
</div>
</div>
</div>
can anyone what's wrong in it so that I am unable to remove textboxes on clicking the button ? Thanks
you need to modify 2 things here:
1- when appending the new elements, mark their holding div with the current COUNTER value at the end, so it's easy to target them later (like on step 2 below).
so adding new elements should be like this:
function createNewInput(label){
var tbDiv = $('#TextBoxesGroup');
var str = '<div class="control-group'+COUNTER+'">';
str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
...
...
instead of this:
function createNewInput(label){
var tbDiv = $('#TextBoxesGroup');
var str = '<div class="control-group">';
str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
2- when removing elements, we will target those with the current COUNTER value at the end of their class name,this way you will remove the last group, and still check if the groups are 3 or lower, no removal should happen.
$("#removeButton").click(function () {
if(COUNTER==3){
alert("No more textbox to remove");
return false;
}
COUNTER--;
$(".control-group"+COUNTER).remove();
});
});
Update: check my updated fiddle http://jsfiddle.net/qqqyC/1/
note: considering that we are appending the COUNTER value at the end of the class name. if class is giving you any styles it will not work. in this case you should not use class name as the target property and consider marking the new group using another attribute/property, and target this attribute/property when removing your elements.
Use .on as you want to bind $("#removeButton").click(function () { to dynamically added elements. It should be
$("#removeButton").on("click", function () {
//.....
});
$(document).ready(function(){
var COUNTER = 3;
var labelArray = ["answer", "rank"];
$("#addButton").click(function () {
for(var i = 0; i < labelArray.length; i++){
createNewInput(labelArray[i]);
}
COUNTER++;
});
function createNewInput(label){
var tbDiv = $('#TextBoxesGroup');
var str = '<div class="control-group">';
str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
str += '<div class="controls">';
str += '<input type="text" id="' + label + '_' + COUNTER + '" name="'+ label +'_' + COUNTER + '" />';
str += '</div>';
str += '</div>';
tbDiv.append(str);
};
$("#removeButton").click(function () {
if(COUNTER==3){
alert("No more textbox to remove");
return false;
}
COUNTER--;
$("#answer_" +COUNTER).parent('div').parent('div').remove();
$("#rank_" +COUNTER).parent('div').parent('div').remove();
});
});
Please update script or check this fiddle http://jsfiddle.net/Cne2Q/
$("#removeButton").click(function () {
if(COUNTER==3){
alert("No more textbox to remove");
return false;
}
COUNTER--;
$("#TextBoxesGroup" +COUNTER).remove();
});
What you're doing here, - you're trying to remove an element like $("#TextBoxesGroup1") which obviously doesn't exist. So what you need to do is modify your create new input like this:
function createNewInput(label){
var tbDiv = $('#TextBoxesGroup');
var str = '<div id="textBoxContainer'+COUNTER+'" class="control-group">';
str += '<label class="control-label">' + label + " " + COUNTER + '</label>';
str += '<div class="controls">';
str += '<input type="text" id="' + label + '_' + COUNTER + '" name="'+ label +'_' + COUNTER + '" />';
str += '</div>';
str += '</div>';
tbDiv.append(str);
};
and your remove button
$("#removeButton").click(function () {
if(COUNTER==3){
alert("No more textbox to remove");
return false;
}
COUNTER--;
$("#textBoxContainer" +COUNTER).remove();
});