Develop Reference

Monitor the changes in table using JavaScript or HTML

I want to change the total price when the count or unit price of the products are changed on the website. I know I should use the onChange function, but I have no idea about how to write the JavaScript code.
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true" >
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true" >
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true" >
<input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true" >
<input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price"
th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
<a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
</td>
</tr>
</tbody>
</table>
I hope that the totalPrice = count*price could refresh whenever the user changes one of those values.

You can easily monitor the pointed input fields (#productCount and #normalPrice) and change the value of #total according to it. In the code below, I use the input event and I'm not using inline event handlers, but rather the function addEventListener() (know why).
const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');
function updateTotalPrice() {
totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}
productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true">
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true">
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true">
<input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true">
<input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
Del
</td>
</tr>
</tbody>
</table>

Insert more fields onclick using jquery

I'm working on a web application that gives user the chance to input more names as user wishes. the form has a link that has to perform an addition of textboxes on click of that link.
i know there is a way to use jquery to do that but currently don't know why cos i just moved to jquery from angularjs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr>
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>

$(document).ready(function()
{
$('a').click(function(){
var id=$(':text').length;
$('#field').append('<td>Textbox'+id+'</td>');
$('#more').append('<td><input type="text" id='+id+' name="text'+id+'"></td>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr id="field">
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr id="more">
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>
or try this one
$(document).ready(function()
{
$('a').click(function(){
var id=$(':text').length;
$('#more td').append('<input type="text" id='+id+' name="text'+id+'">');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
input{
margin-bottom: 10px;
}
</style>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr id="field">
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr id="more">
<td><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>

First you have to identify better your elements. Let's put an id for table, an id for add more fields link and a class for tr model.
Then we have to copy all html you want to duplicate.
Then append it to table.
Remember that doing this, when you submit, all those duplicate parameters will become an array of values.
Let's refactor some bad code here too.
Since we are duplicating fields we need to remove Id attribute of them all.
I'm moving add link outside the table and removing those blank tds. Also write a good table with thead and tbody.
When we want to add field, we want to remove too. So let's create a link to remove.
function cloneTrModel() {
return $('.model').first().clone();
}
var trModel = cloneTrModel();
function setRemove() {
$(".remove" ).click(function() {
$(this).closest('tr').remove();
});
}
setRemove();
$( "#add" ).click(function() {
$("#contactTable tbody").append(trModel);
trModel = cloneTrModel();
setRemove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<strong style="float: right;">Add More Fields</strong>
<table id="contactTable" width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Age</th>
<th>Phone Number</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="model">
<td class="inner"><input type="text" name="name[]"></td>
<td><input type="text" name="address[]"></td>
<td><input type="text" name="age[]"></td>
<td><input type="text" name="phone_number[]"></td>
<td>Remove</td>
</tr>
</tbody>
</table>
</form>

Something like that
$( "#add" ).click(function() {
$( ".inner" ).append( "<input type='text' name='name' id='name'>" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1" method="post" action="">
<table width="50%" border="0" align="center" cellpadding="5" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><div align="right"><strong>Add More Fields</strong></div></td>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Age</td>
<td>Phone Number</td>
</tr>
<tr>
<td class="inner"><input type="text" name="name" id="name"></td>
<td><input type="text" name="address" id="address"></td>
<td><input type="text" name="age" id="age"></td>
<td><input type="text" name="phone_number" id="phone_number"></td>
</tr>
</table>
</form>

Convert existing input and table to Kendo Textbox and Kendo Grid

I have a login form and I would like to kendofy it i.e. basically convert it into a responsive form like this: http://demos.telerik.com/kendo-ui/validator/index
Is there a quick way that would allow me to convert my existing username and password fields to kendo textbox fields such that I am able to achieve the responsive design without actually creating the fields again myself? Looking forward to your suggestions.
My Form:
<form action="https://../Portal" method="post" name="loginForm">
<input name="act" value="portalLogin" type="hidden">
<input name="c" value="12912" type="hidden">
<input name="p" value="101074" type="hidden">
<input name="d" value="101076" type="hidden">
<input name="g" value="101097" type="hidden">
<input name="objDefId" value="13439" type="hidden">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div id="rbi_S_101098" name="Notification Message">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="k-content" id="rbi_S_101100" name="User Login">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<table>
<tbody>
<tr>
<td nowrap="" align="right"><strong>Login Name </strong>
</td>
<td nowrap="">
<input class="k-textbox" name="loginName" maxlength="50" size="40" type="text">
</td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td nowrap="" align="right"><strong>Password </strong>
</td>
<td nowrap="">
<input class="k-textbox" name="password" maxlength="50" size="40" type="password">
</td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td></td>
<td alignmant="right" nowrap="">
<strong><input class="btn btn-small" value=" Login " type="submit"></strong> </td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td></td>
<td alignment="right" nowrap="">
Forgot your password? </td>
</tr>
</tbody>
</table>
</td>
<script>
document.loginForm.loginName.focus();
</script>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div id="rbi_S_114558" name="Scripts Section">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="detailHTMLCol" colspan="2">
</td>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Cheers.

How to group table rows and filter the groups with jQuery or JavaScript?

I am using <tbody> to group table rows. My table looks like this:
<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<br /><br />
<table id="indberetningstable" style="text-align: center; border: solid; align: center">
<thead>
<tr>
<th>Valgsted</th>
<th>Parti</th>
<th>Stemmer</th>
<th>Gem</th>
</tr>
</thead>
<tbody>
<tr>
<td>Idrætshuset</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>A - Socialdemokraterne</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>B - Det Radikale Venstre</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>C - Det Konservative Folkeparti</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
</tbody>
<tbody>
<tr>
<td>Strandvejsskolen</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>A - Socialdemokraterne</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>B - Det Radikale Venstre</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
<tr>
<td></td>
<td>C - Det Konservative Folkeparti</td>
<td><input type="text" style="width: 175px"></td>
<td><input type="submit" value="Gem"></td>
</tr>
</tbody>
</table>​
You can see an example here:
http://jsfiddle.net/zDA7n/
How is it possible to filter the table, so that when i write a search string in the "kwd_search" input field, it will hide everything but the <tbody> group that contains the search-text in it's first column (Valgsted) ?

Use the :contains selector (note: this is case-sensitive):
$('#kwd_search').on('change',function() {
var val = $.trim($(this).val());
$('#indberetningstable tbody').show();
if (val) {
$('#indberetningstable tbody:not(:contains("'+val+'"))').hide();
};
});​
http://jsfiddle.net/mblase75/pEfSF/
For a case-insensitive version, you'll need to implement a custom version of the :contains selector.

Javascript TypeError: xxx is not a function

Friends I came to a bit of problem. Everything was working fine before. But I can't rectify why it starts giving me such error.
Here is my JavaScript Code:
function newSupplier() {
$('div#AddSupplier div.msg').html('').hide();
$('div#AddSupplier div.loader').show();
registerSupplier($('div#AddSupplier table.frm :input').serialize()).done(function (a) {
if (a.Msg) {
$('div#AddSupplier div.msg').html(a.Msg).removeClass('success').addClass('error').fadeIn();
}
else if (a.supid) {
$('div#AddSupplier div.msg').html('Supplier <span class="l2">' + a.supid + '</span> Registered').removeClass('error').addClass('success').fadeIn();
$('div#AddSupplier table.frm :input').val('');
}
}).always(function () {
$('div#AddSupplier div.loader').hide();
}).fail(function () {
$('div#AddSupplier div.msg').html(errMsgNet).removeClass('success').addClass('error').fadeIn();
});
}
And here is the code of registerSupplier() function:
function registerSupplier(dataToPost) {
return $.ajax({
type: "POST",
url: jsonpath + 'Json.ashx?method=RegisterSupplier',
data: dataToPost
});
}
And here is the complete JS file: http://preview.myignou.com/Docs/jScript.js
Related HTML
<div id="ViewOrder">
<h2>View Order Details</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Enter Order Number</label></td>
<td><input type="text" name="orderNumber" onkeyup="$('#ViewOrder>div>div').fadeOut();" /><input type="button" class="but1 m-side" value="OK" onclick="LoadMaterialOrder();"/></td>
<td>
<div class="process"> </div>
</td>
</tr>
</table>
<div>
<div class="border shadow m-tb">
<h2 class="header">Order Details</h2>
<div id="orderDetails" class="tab-content">
<table class="frm">
<tr>
<td><label>Supplier</label></td>
<td><select id="newSupplier" name="supplier"></select></td>
<td class="r-align"><input type="button" value="Load Suppliers" onclick="loadSuppliers('#newSupplier')" /></td>
</tr>
<tr>
<td><label>Order Date</label></td>
<td><input type="text" name="orderDate" /></td>
</tr>
<tr>
<td><label>Delivery Date</label></td>
<td><input type="text" name="deliveryDate" /></td>
</tr>
<tr>
<td><label>Cancel Date</label></td>
<td><input type="text" name="cancelDate" /></td>
</tr>
<tr>
<td><label>Payment Due Mark</label></td>
<td><input id="payDue2" type="checkbox" name="isPayDue" /><label for="payDue2">Yes</label></td>
</tr>
<tr>
<td><label>Remember Mark</label></td>
<td><input id="remark2" type="checkbox" name="isMarked" /><label for="remark2">Yes</label></td>
</tr>
</table>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1 sub-but" value="Save Changes" onclick=""/><input type="reset" value="Reset" /></td>
</tr>
</table>
</div>
<br />
<div class="border shadow m-tb">
<h2 class="header">Payment Records</h2>
<div id="paymentHistory" class="tab-content">
<table class="tab pay-his">
<tr class="th">
<td></td>
<td>Trans#</td>
<td>Date</td>
<td>Comment</td>
<td>Type</td>
<td>Credit</td>
<td>Debit</td>
<td>Balance</td>
<td>Associated Agent</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-1</td>
<td>12-12-12</td>
<td>Abclk lask aa</td>
<td>Credit</td>
<td>500</td>
<td></td>
<td>500.00</td>
<td>Shashwat Tripathi</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-2</td>
<td>12-12-12</td>
<td>Shashwat Tripathi</td>
<td>Debit</td>
<td></td>
<td>500</td>
<td>500.00</td>
<td>Sudhir</td>
</tr>
<tr>
<td><input type="radio" name="paySelect" /></td>
<td>101-3</td>
<td>12-12-12</td>
<td>Shashwat Tripathi</td>
<td>Credit</td>
<td>500</td>
<td></td>
<td>500.00</td>
<td>Sudhir Gaur</td>
</tr>
</table>
<br />
<input type="button" class="but2" value="Edit"
onclick="$('#ViewOrder #payEdit').slideDown(function () { $('html, body').animate({ scrollTop: $('#paymentHistory').offset().top-20 }, 500); });" /><input type="button" class="but2 m-side" value="Delete" />
<div id="payEdit" class="border m-tb shadow" style="display:none;">
<h2 class="header">Edit Payment</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Date</label></td>
<td><input type="text" name="date" placeholder="dd-mm-yy"/></td>
</tr>
<tr>
<td><label>Type</label></td>
<td>
<select name="type">
<option>Credit</option>
<option>Debit</option>
<option>Expense</option>
</select>
</td>
</tr>
<tr>
<td><label>Amount</label></td>
<td><input type="text" name="amount" placeholder="धनराशी..." /></td>
</tr>
<tr>
<td><label>Comment</label></td>
<td><textarea name="comment" rows="4" cols="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="button" class="but1" value="Save Changes" /><input type="button" class="but2 m-side" onclick="$('#payEdit').slideUp();" value="Cancel" /></td>
</tr>
</table>
</div>
</div>
<br />
<h2>Register New Payment</h2>
<hr />
<div id="newMatOrderPayment">
<table class="frm">
<tr>
<td><label>Date</label></td>
<td><input type="text" name="date" placeholder="dd-mm-yy" /></td>
</tr>
<tr>
<td><label>Type</label></td>
<td>
<select name="type">
<option>Credit</option>
<option>Debit</option>
<option>Expense</option>
</select>
</td>
</tr>
<tr>
<td><label>Amount</label></td>
<td><input type="text" name="amount" placeholder="धनराशी..." /></td>
</tr>
<tr>
<td><label>Comment</label></td>
<td><textarea name="comment" rows="4" cols="10"></textarea></td>
</tr>
</table>
</div>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1" value="Register Payment" onclick=""/><input type="button" class="but2" onclick="$('#NewMatOrderPayment :text').val('');" value="Reset" /></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="AddSupplier">
<h2>Register New Suppiler</h2>
<div class="tab-content">
<table class="frm">
<tr>
<td><label>Supplier ID</label></td>
<td><input type="text" name="supId" /></td>
</tr>
<tr>
<td><label>Contact Number</label></td>
<td><input type="text" name="contact" /></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea name="address" cols="10" rows="4"></textarea></td>
</tr>
<tr>
<td><label>Email address</label></td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input type="text" name="city" /></td>
</tr>
</table>
</div>
<table class="footer-buttons">
<tr>
<td>
<div class="msg"></div>
<div class="loader" style="display:none;"><img alt="loader" src="CSS/Images/loader.gif" /></div>
</td>
<td><input type="button" class="but1 sub-but" value="Register" onclick="newSupplier();"/><input type="reset" value="रीसेट" /></td>
</tr>
</table>
</div>
If I am calling this function directly from FF and Firebug console then It is getting called.
But on button click I am getting error TypeError: newSupplier is not a function
Please ask me If u need additional code.

the first select tag in your html code has ID newSupplier just like the name of the function. some browsers can access the node elements just by specifying the ID in the js code and then the function defined is overridden by the element in the DOM.
you need to rename the function name or the element ID.