We Keep Coding

How can I get input elements using inputmask to not revert changes to the previous value when using them within a table sorted with tablesorter?

I have been spending a fair amount of time working on an issue with input elements, which are using inputmask, within a table sorted using tablesorter.
When the user enters an input in the masked field after the updateRows event has been triggered and then changes focus, the masked field will revert the content to the previously entered value.
I have poured through the documentation of both plugins to figure a workaround, but I have not found a suitable solution. I realize that there are other ways to work around this issue, however I have ajax code (for autosaving each row separately) that would require a rewrite that I do not wish to do if it could be avoided.
Any help would be appreciated.
Example: https://jsfiddle.net/5bqyod6j/1/
Code:
<table id='table'>
<thead>
<tr>
<th class='sorter-inputs'>Col 1</th>
<th class='sorter-inputs'>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="control"><input type="text" class='money' value='25' form='f-1'></div>
</td>
<td>
<div class="control"><input type="text" value='test2' form='f-1'></div>
</td>
</tr>
<tr>
<td>
<div class="control"><input type="text" class='money' value='12' form='f-2'></div>
</td>
<td>
<div class="control"><input type="text" value='another 2' form='f-2'></div>
</td>
</tr>
<tr>
<td>
<div class="control"><input type="text" class='money' value='89' form='f-3'></div>
</td>
<td>
<div class="control"><input type="text" value='val-2' form='f-3'></div>
</td>
</tr>
</tbody>
<!-- These are part of the ajax functionality -->
<form action="" id="f-1"></form>
<form action="" id="f-2"></form>
<form action="" id="f-3"></form>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tablesorter#2.31.3/dist/js/jquery.tablesorter.min.js" integrity="sha256-dtGH1XcAyKopMui5x20KnPxuGuSx9Rs6piJB/4Oqu6I=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tablesorter#2.31.3/dist/js/parsers/parser-input-select.min.js" integrity="sha256-ugEATjydQqCNpuca1CGyiLVdN9N6uuouP2CkIL7Dr1k=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/jquery.inputmask#5.0.6/dist/jquery.inputmask.js" integrity="sha256-E9pFDiHlfB3afd46AyTqvmjcSv7VREgs5Y5e8TBECU0=" crossorigin="anonymous"></script>
<script>
$('#table').tablesorter()
$('.money').inputmask('currency', {
autoUnmask: true,
groupSeparator: ',',
allowMinus: true,
digits: 2,
placeholder: '_',
inputMode: 'decimal'
})
$('input[type=text]').on('change', function() {
$('#table').trigger('updateRows')
})
</script>

Found the issue. It lies within js/parsers/parser-input-select.js. It appears to attach some handlers at inopportune times to play nice with inputmask. Writing a custom parser or text extractor and updating the table at a better time seems to work well enough.
I have also discovered that even loading said file and not even using the parsers at all will trigger the bug.

Clone full table and submit as form value

How to correctly copy/clone a html table with javascript and submit it to php, where it will be converted to PDF and XLS documents?
So far I have a html something like this:
<table class="planning-table">
<thead>
<tr>
<td>blah blah</td>
</tr>
</thead>
<tbody>
<tr>
<td>blah blah</td>
</tr>
</tbody>
</table>
<form id="exportPDFform" method="post">
Eksport
<input id="table_data" type="hidden" name="table" value="" />
</form>
and jquery:
$("#exportPDF").on("click", function (){
var value = $('.planning-table').clone();
$("#table_data").val( escape( value ) );
$("#exportPDFform").submit();
return false;
});
Now, the cloning works, but, when put inside input field, it gives me:
[object-Object]
How do I correctly do this?
PS: the form gets changed/created dinamically when selecting different filters, so it would be much easier to use the final product then to recreate it on PHP side.

Presumably escape() takes a string whereas you are providing a jQuery object. When you try and cast an object to a string javascript gives you "[object Object]". Instead, you need to retrieve the HTML value of the table, like this:
var value = $('.planning-table').clone().wrap('<div />').parent().html();

I do not think you want to use the Clone() function, instead I think you want to get the HTML content of an element, but using the .html() function on an element above the table.
<div id="table-container">
<table class="planning-table">
<thead>
<tr>
<td>blah blah</td>
</tr>
</thead>
<tbody>
<tr>
<td>blah blah</td>
</tr>
</tbody>
</table>
</div>
<form id="exportPDFform" method="post">
Eksport
<input id="table_data" type="hidden" name="table" value="" />
</form>
and
$("#exportPDF").on("click", function (){
var value = $('#table-container').html();
$("#table_data").val( escape( value ) );
$("#exportPDFform").submit();
return false;
});

locally add javascript to xampp to do math/formula

I'm trying to make a table, in which user can fill some cells with values and then click submit to show the calculation result. I have jquery-2.0.3.min.js and script.js in my directory. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Inteligence Decision Support System</title>
<script src='localhost/idss/jquery-2.0.3.min.js'></script>
<script type="text/javascript" src='localhost/idss/script.js' charset="utf-8"></script>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>
<tr>
<td>someName</td>
<td><input name="Cost" type="text" value="0"></td>
<td><input name="a20" type="text" value=""></td>
<td><input name="a25" type="text" value=""></td>
</tr>
</table>
<input type="button" onclick="Zcount()" value="Submit" >
</body>
</html>
and here is the script.js file
<script type="text/javascript">
function Zcount(){
var cost, a20, a25;
a20 = document.getElementById("a20").value;
a25 = document.getElementById("a25").value;
cost = (2*parseInt(a20))+(3*parseInt(a25));
document.getElementById("Cost").value=cost;
}
</script>
but when I filled a20 and a25 and click the submit button, nothing happened. The result stayed zero. Where did I go wrong?

You have to check if the external javascripts are actually loaded. You can do this by right-clicking in he browser ind click "inspect element" in chrome or firefox. If you click "console" in these inspectors you can check if they are loaded. If they aren't, you have to adjust your src attribute in the HTML script element.
Also, you have to use the id attribute on the input's because you're using getElementById, and officially inputs have to be surrounded by a form element. So, in the body tag, your HTML will be like this:
<form id="form" action="#" method="post">
<table border="1">
<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>
<tr>
<td>someName</td>
<td><input name="Cost" id="Cost" type="text" value="0"></td>
<td><input name="a20" id="a20" type="text" value=""></td>
<td><input name="a25" id="a25" type="text" value=""></td>
</tr>
</table>
<input type="submit" value="Submit" >
</form>
Inside the script.js, you don't have to use the HTML script tags.
Why are u including jquery if you don't use it?
But because you do, you can use this script:
$('form').submit(function(){
var cost, a20, a25;
a20 = $("#a20").val();
a25 = $("#a25").val();
cost = (2*parseInt(a20))+(3*parseInt(a25));
$("#Cost").val(cost);
return false;
});
Working jsFiddle: http://jsfiddle.net/jwvanveelen/ch2wR/

Sending HTML table data to a form

I have the table in the below format.
FirstName Last Name
Jill Smith
Eve Jackson
Also i have Form for updating the firstname & lastname. This is the form code.
<!DOCTYPE html>
<html>
<body>
<form border="1">
<tr>
<td><label >FirtsName</label></td>
<td><input type="text" id="firstname" class="medium"></td>
</tr>
<tr>
<td><label >LastName</label></td>
<td><input type="text" id="lastname" class="medium"></td>
</tr>
</form>
</body>
</html>
How to send the table data to a form using jquery or javascript. Any help will be much appreciated!
Thanks & regards
Karthick

I'm not an expert in js, but you could submit the form each time the input looses the focus
Use <form name="myform" border="1">
and :
<input type="text" id="firstname" class="medium" onBlur="document.forms["myform"].submit()">
there's probably better ways to do this but here's just an idea...
-- Edit : --
sorry i forgot something important : you have to name your form like this :
<form name="myform" action="file.php">

I'm not very good in english, so maybe I don't understand well enough, but to do what you want, I would do like this :
First things first, you should improve your HTML code, this will make the job a lot easier :
In your users table :
<table> </table>: add an id to handle it more easly with jQuery : $('#id') method
ex: <table id="users"></table>
<thead><tr><th> </th></tr></thead><tbody> </tbody>: use this markups allow you to distinguish table header from table content
<tr> </tr>: add an id on the server side to know who is who (i.e : if you have two John Smith)
ex: <tr id="name_01"><td>...</td></tr>
<td> </td>: add a class attribute to know where is the firstname and the last name
ex: <td class="firstname">...</td><td class="lastname"></td>
In your form :
<form> </form>: add an id to grab it more easly too
ex: <form id="usersform"></form>
<table> </table> : don't forget the <table> markup !
<label> </label>: add the for attribute matching the input id
ex: <label for="firstname" >FirtsName</label>
Now, your table should look like this :
<table id="users">
<thead>
<tr>
<th>Firstname</th><th>Last Name</th>
</tr>
</thead>
<tbody>
<tr id="name_01">
<td class="firstname">Jill</td><td class="lastname">Smith</td>
</tr>
<tr id="name_02">
<td class="firstname">Eve</td><td class="lastname">Jackson</td>
</tr>
</tbody>
</table>
There are several ways for make what you want, but, basically, there is two main ways :
Have only one of the table entry in the form at a time
Have all of the table entries
I - Only one table entry at a time
HTML
<form id="usersform" name="usersedit" >
<table id="users">
<tr>
<td><label for="firstname" >FirtsName</label></td>
<td><input type="text" id="firstname" class="medium"></td>
</tr>
<tr>
<td><label for="lastname" >LastName</label></td>
<td><input type="text" id="lastname" class="medium"></td>
</tr>
</table>
</form>
jQuery :
//When there is a click on a line of the table
$('#users tbody tr').click(function(e) {
//Get the <tr> id
userid = $(this).attr('id');
//Put the value of the firstname cell in the firstname input
$('#usersform input#firstname').val($(this).find('td.firstname').html());
//You can add a name attribute or an id for later works
$('#usersform input#firstname').attr('name','first'+userid);
//Now for the lastname input
$('#usersform input#lastname').val($(this).find('td.lastname').html()).attr('name','first'+userid);
}
II - All table entries
HTML
<form id="usersform" name="usersedit" >
<table id="users">
<thead>
<tr>
<th>Firstname</th><th>Last Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
jQuery :
//When there is a click on the table (#users) :
$.('#users').click(function(e){
//handle the part of the form where we want to add input field
myformtable = $('#userform table tbody');
//For each row in the table
$.('#users tbody tr').each(function(e) {
//Create and append a new line
userline = $(document.createElement('tr'));
userline.appendTo(myformtable);
//Create and append a firstname cell
tdfirstname = $(document.createElement('td')).addClass('firstname');
tdfirstname.appendTo(userline);
//Create and append a firstname input
firstname = $(document.createElement('input')).addClass('medium');
firstname.appendTo(tdfirstname);
//Add attribute
firstname.attr({type: 'text', name: 'first'+$(this).attr('id')});
//Set value
firstname.val($(this).find('.firstname').html());
//Same things with the lastname
tdlastname = $(document.createElement('td')).addClass('lastname');
tdfirstname.after(tdlastname);
lastname = $(document.createElement('input')).addClass('medium');
lastname.appendTo(tdlastname);
lastname.attr({type: 'text', name: 'last'+$(this).attr('id')});
lastname.val($(this).find('.lastname').html());
}
}
You can improve it with a loop, or use css pseudo-class to handle your table cells or form inputs, but I thought it was easier to understand this way.

Java script function not called

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<br><br><br><br>
<body style="background-color: cornflowerblue" >
<form action="Login" method="post" name="frmLogin">
<table style="background-color: darkgrey" align="center" border="1">
<thead>
<tr>
<th colspan="2" style="font-size: xx-large;color:darkmagenta" >Login Details</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-weight: bold" >Username</td>
<td><input type="text" name="txtUsername" value="" /></td>
</tr>
<tr>
<td style="font-weight: bold">Password</td>
<td><input type="password" name="txtPassword" value="" /></td>
</tr>
<tr>
<td align="center" colspan="2" >
<input type="button" onclick="return reset();" value="Reset" name="btnReset" />
<input type="submit" onclick="return submit();" value="Submit" name="btnSubmit" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" language="javascript">
function submit()
{
var username=frmlogin.document.txtUsername.vlaue;
var password=frmlogin.document.txtPassword.vlaue;
if(username=="")
{
alert("Username Must be filled");
return false;
}
if(password=="")
{
alert("Password Must be filled");
return false;
}
return true;
}
function reset()
{
frmlogin.document.txtUsername.vlaue="";
frmlogin.document.txtPassword.vlaue="";
return false;
}
</script>
</form>
</body>
</html>
I have html code above, and on successfully submit I call a servlet name Login.
But it directly call the servlet. It skips the java script function.
And if i remove the form then java script executes.

Your problem is that you gave the custom form validator function the same name as the form's default submit function form.submit(). The form's default submit function will have precedence in this context.
To fix this, you need to rename submit() to something else. E.g.
onclick="return validate();"
with
function validate() {
// ...
}
Unrelated to the concrete problem, you've several major bugs in your JS function, the following line for example is completely wrong:
var username=frmlogin.document.txtUsername.vlaue;
but that's subject for a different question if you can't figure it out.
Last but not least, I hope that you're aware that JS can be disabled/spoofed by the client? Ensure that you're also validating the form in the server side. See also our servlets wiki page for a concrete example.

add the onsubmit event handler for the form:
<form action="Login" method="post" name="frmLogin" onsubmit="return submit();">

devang you need to capture event for the submit button click if you want to execute that javascript code. i am having the same problem but i solved it using jquery click events, because the by default it submits directly without moving through the code . if any alternate solution is there , please letme know too
btw jquery code can be written as
$("input[name=btnSubmit]").click(function(e) {
..if fails conditions..
e.preventDefault();
});