I do not know how to formulate this question but it is near close to my issue. I am trying to make a Point of sale system so when client clicks in each product it adds in the table. There are no issues in my code but I do not know how to set the product's price using a textbox when using .append.
This is my code:
$(".agregarListaF").click(function (e) {
e.preventDefault();
var padre = $(this);
var hijos = padre.children().children("span");
var i = 0;
var datos = new Array();
hijos.each(function () {
switch (i) {
case 0:
datos[0] = $(this).text();
break;
case 1:
padre;
datos[1] = $(this).text();
break;
case 2:
padre;
datos[2] = $(this).text();
break;
}
i++;
});
console.log(datos[0]);
console.log(datos[1]);
$(".detallefactura").append(
"<tr>" +
"<td>" +
datos[0] +
"</td>" +
"<td>" +
datos[1] +
"</td>" +
"<td>" +
"<input type='text' class='form-control text-center' value='1'>" +
"</td>" +
"<td>" +
"<input type='text' class='form-control text-center' value=''>" +
"</td>" +
"<td class='tota-sub-fila'>" +
parseFloat(Math.floor(datos[2]) * parseFloat(1)).toFixed(2) +
"</td>"
);
});
My issue is in the line:
+ "<td>" + "<input type='text' class='form-control text-center' value=''>" + "</td>"
I want to add javascript value variable inside * input value=''* but I know It wont work but I tried it:
+ "<td>" + "<input type='text' class='form-control text-center' value='datos[2]'>" + "</td>"
This is my point of sale view:
In the column precio is where I want to set the price inside that textbox.
How do I solve this?
Please try this code,To How to set Javascript's variable value inside
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript| Set the value of an input field.
</title>
</head>
<body style="text-align:center;" id="body">
<input type='text' id='id1' />
<br>
<br>
<button onclick="gfg_Run()">
click to set
</button>
<p id="GFG_DOWN" style="color:green; font-size: 20px;font-weight: bold;"></p>
<script>
var el_down = document.getElementById("GFG_DOWN");
var inputF = document.getElementById("id1");
function gfg_Run() {
inputF.setAttribute('value', 'defaultValue');
el_down.innerHTML = "Value = " + "'" + inputF.value + "'";
}
</script>
</body>
</html>
I hope this information will be useful.
Thank you.
Follow this using template literals
const html = `<tr>
<td>${datos[0]}</td>
<td>${datos[1]}</td>
<td><input type="text" class="form-control text-center" value="${datos[3]}"></td>
<td><input type="text" class="form-control text-center" value="${datos[4]}"</td>
<td class="tota-sub-fila">${parseFloat((Math.floor(datos[2])) * parseFloat(1)).toFixed(2)}</td>
</tr>`;
$(.detallefactura").append(html);
You can do:
var variable="x";
"<input type='text' class='form-control text-center' value='"+ variable +"'>";
Or,
`<input type='text' class='form-control text-center' value='${variable}'>`
you can use Template literals like this instead of having this concatenation:
$(.detallefactura").append(`<tr>
<td> ${datos[0]} </td>
<td> ${datos[1]} </td>
<td> <input type='text' class='form-control text-center' value='1'> </td>
<td> <input type='text' class='form-control text-center' value='${datos[2]}'> </td>
<td class='tota-sub-fila'> ${parseFloat((Math.floor(datos[2])) * parseFloat(1)).toFixed(2)} </td>
`);
Related
I write code of html and javascript in which when i click on button it add a new row.It is working fine now i have to find total by multiplying quantity and cost.It works for first row but if i add more rows it not work
<table class="table table-bordered table-striped">
<thead>
<th>#</th>
<th>Item Name</th>
<th>Batch No</th>
<th>Remarks</th>
<th>Quantity</th>
<th>Cost Per Piece</th>
<th>Total</th>
<th>Action</th>
</thead>
<tbody id="tbody">
</tbody>
<center><button type="button" name="" onclick="additem()" class="btn btn-success"> Add</button></center></td>
and javascript code is
function additem() {
x++;
var html="<tr";
html += "<td><center>"+x+"</center></td>";
html += "<td><input type='text' class='form-control' name='product_name'></td>";
html += "<td><input type='text' class='form-control' name='batch_no'></td>";
html += "<td><input type='text' class='form-control' name='remarks'></td>";
html += "<td><input type='number' class='form-control' oninput='calculate()' id='qty' name='total_qty'></td>";
html += "<td><input type='number' class='form-control' oninput='calculate()' id='cost' name='cost'></td>";
html += "<td><input type='number' class='form-control' id='total' name='total' readonly></td>";
html += "<td><button type='button' id='btn' class='btn btn-danger'><i class='fa fa-remove'></i></button></td>";
html += "</tr>";
document.getElementById("tbody").insertRow().innerHTML= html;
}
You can set a dynamic id on these inputs using x variable:
Check out this jsfiddle link
let x = 0;
function additem() {
x++;
var html=`<tr;
<td><center>${x}</center></td>
<td><input type='text' class='form-control' name='product_name'></td>
<td><input type='text' class='form-control' name='batch_no'></td>
<td><input type='text' class='form-control' name='remarks'></td>
<td><input id='qty${x}' type='number' class='form-control' oninput='calculate(${x})' id='qty' name='total_qty'></td>
<td><input id='cost${x}' type='number' class='form-control' oninput='calculate(${x})' id='cost' name='cost'></td>
<td><input type='number' class='form-control' id='total${x}' name='total' readonly></td>
<td><button type='button' id='btn' class='btn btn-danger'><i class='fa fa-remove'></i></button></td>
</tr>`;
document.getElementById("tbody").insertRow().innerHTML= html;
}
function calculate(x) {
const qty = document.getElementById(`qty${x}`).value;
const cost = document.getElementById(`cost${x}`).value;
const totalElem = document.getElementById(`total${x}`);
totalElem.value = qty * cost
}
You need to create a unique id for each row and get the element by unique Id. Something like this.
let x = 0;
function additem() {
x++;
var html = "<tr";
html += "<td><center>" + x + "</center></td>";
html += "<td><input type='text' class='form-control' name='product_name'></td>";
html += "<td><input type='text' class='form-control' name='batch_no'></td>";
html += "<td><input type='text' class='form-control' name='remarks'></td>";
html += "<td><input id='qty_" + x + "' type='number' class='form-control' oninput='calculate(" + x + ")' id='qty' name='total_qty'></td>";
html += "<td><input id='cost_" + x + "' type='number' class='form-control' oninput='calculate(" + x + ")' id='cost' name='cost'></td>";
html += "<td><input id='total_" + x + "' type='number' class='form-control' id='total' name='total' readonly></td>";
html += "<td><button type='button' id='btn' class='btn btn-danger'><i class='fa fa-remove'></i></button></td>";
html += "</tr>";
document.getElementById("tbody").insertRow().innerHTML = html;
}
function calculate(x) {
let qty;
let cost
if (document.getElementById('qty_' + x))
qty = document.getElementById('qty_' + x).value;
if (document.getElementById('cost_' + x))
cost = document.getElementById('cost_' + x).value;
let total = qty * cost;
if (document.getElementById('total_' + x))
document.getElementById('total_' + x).value = total;
}
I have a table with combo box in my jsp :
<form:form modelAttribute="mainCommodity" id="mainCommodityForm">
<table id="customPostTable" >
<td>
<form:select path="postId">
<form:option value="0" id="PleaseSelect2"/>
<form:options items="${posts}" itemValue="id" itemLabel="name"/>
</form:select>
<form:errors path="postId"/>
</td>
<td style="padding: 2px ;vertical-align:middle;border: 1px solid" id="addMoreElem">
<img id="addMoreImage" src="/images/Plus.png" onclick='addMore("${postsString}")' alt="<fmt:message key="button.addRow"></fmt:message>">
</td>
</table>
</form:form>
Now I want to append another rows to this table by clicking button in JavaScript. allPosts is an array which contains my combo box items in java script.
My jsp code for append to table is as follows:
function addMore(attr) {
var data = "";
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore("+attr+")' alt='<fmt:message key="button.addRow"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
How can I append options to the select element with value of allPosts in JavaScript?
Does this works for you:
function addMore(attr) {
allPosts = ["One", "Two", "Three"];
var data = "";
all_Posts_Options = "";
for(var i=0; i<allPosts.length; i++) {
all_Posts_Options = all_Posts_Options + "<option>" + allPosts[i] + "</options>";
}
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
all_Posts_Options +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore()' alt='<fmt:message key=\"button.addRow\"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="customPostTable">
</table>
<button onclick="addMore(null)">Add more</button>
Please note that inserting new elements via HTML is not recommended.
DOM manipulation tools shall be used instead. See MDN
Using JavaScript to dynamically add/dete/edit rows. The script works fine but the save and delete button appear one below the other when edit button is clicked. This only seems to happen in IE/Edge and works fine in Chrome. Not sure why...?
Javascript
function aedit_row(no)
{
document.getElementById("aedit_button"+no).style.display="none";
document.getElementById("asave_button"+no).style.display="table-cell";
var acode=document.getElementById("acode_row"+no);
var aname=document.getElementById("aname_row"+no);
var acode_data=acode.innerHTML;
var aname_data=aname.innerHTML;
acode.innerHTML="<input type='text' id='acode_text"+no+"' value='"+acode_data+"'>";
aname.innerHTML="<input type='text' id='aname_text"+no+"' value='"+aname_data+"'>";
}
function asave_row(no)
{
var acode_val=document.getElementById("acode_text"+no).value;
var aname_val=document.getElementById("aname_text"+no).value;
document.getElementById("acode_row"+no).innerHTML=acode_val;
document.getElementById("aname_row"+no).innerHTML=aname_val;
document.getElementById("aedit_button"+no).style.display="table-cell";
document.getElementById("asave_button"+no).style.display="none";
}
function adelete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function aadd_row()
{
var new_acode=document.getElementById("new_acode").value;
var new_aname=document.getElementById("new_aname").value;
var table=document.getElementById("data_table1");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='acode_row"+table_len+"'>"+new_acode+"</td><td id='aname_row"+table_len+"'>"+new_aname+"</td><td><input type='button' id='aedit_button"+table_len+"' value='Edit' class='edit' onclick='aedit_row("+table_len+")'> <input type='button' id='asave_button"+table_len+"' value='Save' class='save' onclick='asave_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='adelete_row("+table_len+")'></td></tr>";
document.getElementById("new_acode").value="";
document.getElementById("new_aname").value="";
}
HTML code
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>acad_code</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" type="text/css" href="css/pages.css">
<script type="text/javascript" src="js/acad_code.js"></script>
</head>
<body>
<br>
<div id="wrapper1">
<table id="data_table1" style="margin-left:100px ;border-radius:10px"; border="1" cellspacing= "2" cellpadding="0">
<tbody>
<tr>
<th>Academic Code</th>
<th>Description</th>
</tr>
<tr>
<td><input type="text" id="new_acode"></td>
<td><input type="text" id="new_aname"></td>
<td><input type="button" class="add" onclick="aadd_row();" value="Add Row"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Try setting a specific width for the button td.
function aedit_row(no) {
document.getElementById("aedit_button" + no).style.display = "none";
document.getElementById("asave_button" + no).style.display = "table-cell";
var acode = document.getElementById("acode_row" + no);
var aname = document.getElementById("aname_row" + no);
var acode_data = acode.innerHTML;
var aname_data = aname.innerHTML;
acode.innerHTML = "<input type='text' id='acode_text" + no + "' value='" + acode_data + "'>";
aname.innerHTML = "<input type='text' id='aname_text" + no + "' value='" + aname_data + "'>";
}
function asave_row(no) {
var acode_val = document.getElementById("acode_text" + no).value;
var aname_val = document.getElementById("aname_text" + no).value;
document.getElementById("acode_row" + no).innerHTML = acode_val;
document.getElementById("aname_row" + no).innerHTML = aname_val;
document.getElementById("aedit_button" + no).style.display = "table-cell";
document.getElementById("asave_button" + no).style.display = "none";
}
function adelete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function aadd_row() {
var new_acode = document.getElementById("new_acode").value;
var new_aname = document.getElementById("new_aname").value;
var table = document.getElementById("data_table1");
var table_len = (table.rows.length) - 1;
var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='acode_row" + table_len + "'>" + new_acode + "</td><td id='aname_row" + table_len + "'>" + new_aname + "</td><td><input type='button' id='aedit_button" + table_len + "' value='Edit' class='edit' onclick='aedit_row(" + table_len + ")'> <input type='button' id='asave_button" + table_len + "' value='Save' class='save' onclick='asave_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='adelete_row(" + table_len + ")'></td></tr>";
document.getElementById("new_acode").value = "";
document.getElementById("new_aname").value = "";
}
<div id="wrapper1">
<table id="data_table1" style="margin-left:100px ;border-radius:10px" ; border="1" cellspacing="2" cellpadding="0">
<tbody>
<tr>
<th>Academic Code</th>
<th>Description</th>
</tr>
<tr>
<td><input type="text" id="new_acode"></td>
<td><input type="text" id="new_aname"></td>
<td style="width: 200px;"><input type="button" class="add" onclick="aadd_row();" value="Add Row"></td>
</tr>
</tbody>
</table>
</div>
I don't know what is an error in this code. I have correctly detect parent. But doesn't work.
This is HTML code
<table>
<tbody class="tbody">
<tr id="row_1">
<td>
<input type="text" id="row_1_jumlah_1" name="row_1_jumlah_1" value="1" readonly="readonly" class="form-control" />
</td>
<td></td>
</tr>
<input type="button" class="btn green" value="Tambah Satuan" id="add_row" style="margin-bottom: 10px; margin-left:10px;" />
</tbody>
</table>
This is js code
$("#add_row").click(function () {
var last_index_tr = $(".tbody tr").length;
var new_index_tr = $(".tbody tr").length + 1;
var row = $("<tr id='row_" + new_index_tr + "'>");
var input = $("<td> <input class='form-control' type='text' id='row_" + new_index_tr + "_jumlah_1' name='row_" + new_index_tr + "_jumlah_1' value='1' readonly='readonly' /> </td>");
var action_delete = $("<td> <input class='btn btn-danger' type='button' id='row_" + new_index_tr + "_delete' class='delete' value='delete' /> </td>");
action_delete.click(function () {
var parent_1 = action_delete.parent();
var get_tr_parent_id = $(parent_1).attr('id');
//document.write(get_tr_parent_id);
$("#".get_tr_parent_id).remove();
});
row.append(input);
row.append(action_delete);
row.append("</tr>");
$(".tbody").append(row);
});
I want to remove tr inside table with delete button or action_delete(see js code). I have get parent perfectly. But I can't still delete tr.
Try this, You can use .on to hook the click handler for that delete button which is being created at runtime. Though your hooking is working, Using .on is a good practice while dealing with elements which are created dynamically. And by the way you have to concatenate the # with + Not with . That was the problem with your code, See your code working over here.
var action_delete = $("<td> <input class='btn btn-danger' type='button' id='row_" + new_index_tr +"_delete' class='delete' value='delete' /> </td>");
$(document).on('click',"#row_" + new_index_tr +"_delete",function(){
$(this).closest('tr').remove();
});
DEMO
Edit:
Try the following code, This will register to the click event commonly only once for your entire delete buttons.
$("#add_row").click(function () {
var last_index_tr = $(".tbody tr").length;
var new_index_tr = $(".tbody tr").length + 1;
var row = $("<tr id='row_" + new_index_tr + "'>");
var input = $("<td> <input class='form-control' type='text' id='row_" + new_index_tr + "_jumlah_1' name='row_" + new_index_tr + "_jumlah_1' value='1' readonly='readonly' /> </td>");
var action_delete = $("<td> <input class='btn btn-danger' type='button' id='row_" + new_index_tr + "_delete' class='delete' value='delete' /> </td>");
row.append(input);
row.append(action_delete);
row.append("</tr>");
$(".tbody").append(row);
});
$(document).on('click', "input[type='button'][id$='delete']",function(){
$(this).closest('tr').remove();
});
DEMO - I
Your remove method is incorrect. It should be:
$("#" + get_tr_parent_id).remove();
It was currently returning undefined instead of concatenating the two strings.
I would like to add a new div from javascript to my existing html page. Normally I do this with the instruction document.createElement("div") and I fill this div with the methode div.innerHTML = "" (for example). This works fine in most cases, but now I would like to add a selectionlist to my div and fill this lists with some data. This method doesn't work:
function initEdit(){
addPanel = document.createElement("div");
addPanel.innerHTML = "<form id='addProperty' method='get'> <table>" +
"<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'> </td>" +
"<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
"<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
"<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'> </td>" +
"<td> </td> </tr>" +
"<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
"</table> </form>";
$('body').jAlert(contents, 'info', offset);
list1.forEach(function(element, id){
var option = document.createElement("OPTION");
option.text = option.value = property;
form.data_property_selection.options.add(element);
})
}
Does anybody know how to solve this? (BTW: I can't set this html code in the page at the beginning, because this is the contents of a jAlert div)
update: solution
properties1.concat(properties2).forEach(function(property, id){
if (id < object_properties.length) propertyList1 += "<option value='" + property + "'>" + property + "</option>";
else propertyList2 += "<option value='" + property + "'>" + property + "</option>";
})
objects.forEach(function(feature, id) {
objectList += "<option value='" + feature._id + "'>" + feature.name + "</option>";
})
propertyList = "<form id='addProperty' method='get'> <table>" +
"<tr> <td> <select size='4' style='width:140px; height:200px' id='object_property_selection' onClick='unSelect(\"data_property_selection\")'>" +
propertyList1 + "</select> </td>" +
"<td> <select size='4' style='width:140px; height:200px' id='object_selection'>" +
objectList + "</select> </td>" +
"<textarea style='width:140px; height:200px; display:none' id='data_selection' /> </td> </tr>" +
"<tr> <td> <select size='4' style='width:140px; height:100px' id='data_property_selection' onClick='unSelect(\"object_property_selection\")'>" +
propertyList2 + "</select> </td>" +
"<td> </td> </tr>" +
"<tr> <td colspan=2> <input type='button' name='Submit' style='width:100%' onClick='submitProperty()' /> </td> </tr>" +
"</table> </form>";
As far as I know, achieving what you want with this method is impossible. Instead of using innerHTML, you should do the long way, creating all the inner tags with createElement as well, and appending them as children. Using jQuery can make this job a lot easier.
Here is an example of how to do it with jQuery: link, and the official API.
Alternatively, if you can first create the inner list, then just create it and concatenate it as a string as a part of innerHTML (first make the list, only then edit innerHTML).