Okay so I already know I can get the entire HTML document's markup (minus the DOCTYPE) using:
document.documentElement.outerHTML
however that will only get me the original source markup, and not the current state of the DOM, which is really what I am looking for. For my immediate needs I really just want to preserve the state of a form within the document (think of it in terms of an an auto-save).
Please note this is not being used in a standard website/webapp format, so posting, submitting, etc. really isn't an option. I need a pure JavaScript way to acquire an HTML string representation of the current DOM tree, so an external caller can save it to disk for later use.
Now I know I can manually iterate through all the form elements, grabbing each and every value, and doing a string replacement on the result of the above outerHTML (via regular expressions), to build an HTML string that mirrors the current DOM, but I was hoping there was an easier way to do this (maybe something built in). Like a DOM to HTML parser/writer.
However so far I have not found a built in way to do this. Just wanted to reach out and see if anyone else has needed to do this. And ask if my above proposed method the best way to approach this particular problem, before I begin implementing it.
Here is a sample HTML page in which I tried the supplied function:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function getFormState() {
// this could be set outside this function if calling multiple times
var theForm = document.forms[0];
console.log(theForm);
var theData = new FormData(theForm);
console.log(theData);
// get the state of the form as an iterator of key/value pairs
var state = theData.entries();
console.log(state);
// convert the iterator into an array of key/value pairs
var stateArray = Array.from(state);
console.log(stateArray);
// Use JSON.stringify to change the key/value pair array state into a string
var stateString = JSON.stringify(stateArray);
console.log(stateString);
return stateString;
}
</script>
<style>
#header {
background: #ffffff;
position: fixed;
width: 100%;
height: 30px;
padding: 5px 0px 0px 0px;
top: 0;
z-index: 1;
}
#content{
margin-top: 40px;
}
body, input, select, textarea {
font-family: monospace;
font-size: 10pt;
font-weight: bold;
}
td {
padding: 8px 8px 8px 8px;
}
input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]), select, textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]):focus, select:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
</style>
<title>HTML5 FormData Test</title>
</head>
<body>
<form id="frmForm">
<div id="header">
<button type="button" onclick="getFormState()">getFormState</button>
<hr>
</div>
<div id="content">
<table border="1">
<tr>
<td>Button</td>
<td><input id="btnButton" type="button" value="Button"></td>
</tr>
<tr>
<td>Checkbox</td>
<td><input id="chkCheckbox" type="checkbox"></td>
</tr>
<tr>
<td>Color</td>
<td><input id="clrColor" type="color" value="#000000"></td>
</tr>
<tr>
<td>Datalist</td>
<td>
<input id="txtDatalist" type="text" list="choices" value="">
<datalist id="choices">
<option value="One"></option>
<option value="Two"></option>
<option value="Three"></option>
</datalist>
</td>
</tr>
<tr>
<td>Date</td>
<td><input id="calDate" type="date" value=""></td>
</tr>
<tr>
<td>Datetime (Deprecated)</td>
<td><input id="calDateTime" type="datetime" value=""></td>
</tr>
<tr>
<td>Datetime (Local)</td>
<td><input id="calDateTimeLocal" type="datetime-local" value=""></td>
</tr>
<tr>
<td>Disabled</td>
<td><input id="txtDisabled" type="text" value="Disabled" disabled=""></td>
</tr>
<tr>
<td>E-Mail</td>
<td><input id="txtEMail" type="email" value=""></td>
</tr>
<tr>
<td>File</td>
<td><input id="binFile" type="file" value=""></td>
</tr>
<tr>
<td>Hidden</td>
<td><input id="txtHidden" type="hidden" value="HIDDEN"></td>
</tr>
<tr>
<td>Image (Submit)</td>
<td><input id="btnImage" type="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAVCAIAAABpKDERAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAJcSURBVEhLzZVNTxpBGMcHvkEjbZFkT3BoUmNSsSc/QXdBLL23IRyQmkhjzNbGO4nUbUwQ15geeiC9QDct3V3itSdE7YuSniBRGynQ8BXcPs/s4HLYAk2q3d+Bed7zn5md4KpUKo1GgzgSv9/vyufz0WiUBRyGoihuw9mgvgunwvQ5GTdcMzOdB2hzs6N0KgPOr7p+o5/HhXOWuDbw/Jhpw/RSt9vdXYWi1V2w3jwaZ4nrZOj7xU1YFVVpLCZJsTFAeinhEiu0MLFHHcaTIo0BUN8PK24V6ASKtEcLbWH6BkGovstPAMxS2kh29Ock/Z2rfZWF0ukpJqafdRi1bUFNiEX8GPZfPUgL2zUzSMgL/XX0JkTX784TGaOdmjyb5uPFNk6w5y/PD92VmXt0vcN58BM5OjnHROtd7BZlYl7DFtpjNVtW9dMaIaXkBK1NlnqldjB9A4G5OKJHz7uMmr8HG5NJbUX9CXzb4nsNwRmRaMlJr9dLs6kgjWKr+BFLTXYewqH+iaH66Mb7AA98vHa6IobRPjsihOfwAR28faqbQaOpyBk+d9g0WZyi/QbHhQnJyErTdIcw4H73N3w+Xxgug6yFwYorcI9UHybZikph9cwmRKIvBKFsi9sUUR0kb0cSy2bQhE648ETkL5shKx5X2jjQDtDmkmU5FArhjv85n7Nc5Dhb3ZkbB+cwy81llt//SAXN5CioqnqF/2+ds2NreLPfGRXocOVyOUGAx38V/PqwcD+Fr5mypJwsTjF7NDRNQ308Dy/Oiei6Pvz9/l9c5XK5Xq8zwQ4jEAj8BmbeP4OPzU0kAAAAAElFTkSuQmCC"></td>
</tr>
<tr>
<td>Month</td>
<td><input id="calMonth" type="month" value=""></td>
</tr>
<tr>
<td>Number</td>
<td><input id="numNumber" type="number" min="0" max="10" step="1" required="" value=""></td>
</tr>
<tr>
<td>Password</td>
<td><input id="txtPassword" type="password" value=""></td>
</tr>
<tr>
<td>Radio</td>
<td>
<input id="radRadio1" type="radio" name="radRadio" value="1">One<br>
<input id="radRadio2" type="radio" name="radRadio" value="2">Two<br>
<input id="radRadio3" type="radio" name="radRadio" value="3">Three
</td>
</tr>
<tr>
<td>Range</td>
<td><input id="numRange" type="range" min="0" max="10" value="5"></td>
</tr>
<tr>
<td>Readonly</td>
<td><input id="txtReadonly" type="text" value="Readonly" readonly=""></td>
</tr>
<tr>
<td>Reset</td>
<td><input id="btnReset" type="reset"></td>
</tr>
<tr>
<td>Search</td>
<td><input id="txtSearch" type="search" placeholder="search text" value=""></td>
</tr>
<tr>
<td>Select</td>
<td>
<select id="sltSelect">
<option value="" disabled="" selected=""><Select></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</td>
</tr>
<tr>
<td>Select (Multiple)</td>
<td>
<select id="sltMultiSelect" multiple="">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</td>
</tr>
<tr>
<td>Submit</td>
<td><input id="btnSubmit" type="submit"></td>
</tr>
<tr>
<td>Telephone</td>
<td><input id="txtTelephone" type="tel" value=""></td>
</tr>
<tr>
<td>Textbox</td>
<td><input id="txtTextbox" type="text" value=""></td>
</tr>
<tr>
<td>Textarea</td>
<td><textarea id="txtTextarea"></textarea></td>
</tr>
<tr>
<td>Time</td>
<td><input id="calTime" type="time" value=""></td>
</tr>
<tr>
<td>URL</td>
<td><input id="txtURL" type="url" value=""></td>
</tr>
<tr>
<td>Week</td>
<td><input id="calWeek" type="week" value=""></td>
</tr>
</table>
</div>
</form>
</body>
</html>
which returns the following:
I am able to manually iterate over all the inputs to get what I need, in fact that is my current solution, but the FormData solution seemed like a much cleaner approach, it's just not returning the expected data.
In fact the only input that ever seems to populate is the RadioButton.
Related
Once user insert a quantity of a good and click on submit, this calculator should print the sub total of that good(quantity * unit price) and the grand total(sum of sub total rows).
please someone help me to write this jquery in JS fucntion..
body{
font-family:Consolas;
}
table{
border:1px solid blue;
padding-left:3px;
}
#submit{
background-color:green;
padding-left:20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 style="font-size:30px;color:red;text-align:left;word-spacing:100px;">ABC Supermarket</h1>
<table border-collapse="collapse" >
<tr>
<th>Item</th>
<th>Unit Price</th>
<th class="q">Quantity</th>
<th>Subtotal</th>
</tr>
<tr>
<td>Bread</td>
<td><input type="text" id="u1" value="120.00" readonly="readonly" onclick="reSum();"></td>
<td><input type="text" id="q1" onclick="reSum();"></td>
<td><input type="text" id="s1" readonly="readonly"></td>
</tr>
<tr>
<td>Grandtotal</td>
<td></td>
<td></td>
<td><input type="text" id="tot" readonly="readonly"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" value="clear" id="clear"></td>
<td><input type="button" id="submit" value="Submit" ></td>
</tr>
</table>
The JavaScript functions I wrote to replace the jqueries are below.
<script>
function subTotal(u1,q1){
var u1=document.getElementById("u1").value;
var q1=document.getElementById("q1").value;
var subTotal=u1*q1;
var grandTotal= subTotal;
document.getElementById("s1").innerHTML=subTotal;
document.getElementById("tot").innerHTML=grandTotal;
}
</script>
<script>
function clear(){
document.getElementById("q1").value="";
document.getElementById("s1").value="";
document.getElementById("tot").value="";
}
</script>
HTML code
<td><input type="number" class="qty" value="" name="qty" id="qty" style="border: 1px solid lightgray;width: 100%; padding: 6px;
border-radius: 5px;"></td>
<td><input class="price" type="number" id="price" name="price" style="border: 1px solid lightgray;width: 100%; padding: 6px;
border-radius: 5px;" ></td>
<td><input class="total" type="number" name="total" id="total" style=";width: 100%; padding: 6px;
border-radius: 5px; border:none ;font-size: 27px " ></td>
script
$(document).on('keyup', '.qty', function (){
let Ele = $(this);
let qtyEle = Ele.parent().parent().find('.price');
let totalEle = Ele.parent().parent().find('.total');
totalEle.val(qtyEle.val() * Ele.val());
});
below is a table that contains text boxes. I want to reset each row individually, but right now it is resetting the whole table. What is the best known method to attack this problem? At the moment I am using jquery, but I am not sure if javascript would work any better. I also did try to iterate through each row, but somehow I got the same results and nothing changed.
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<html>
<body>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>reset</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11"""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9"""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5"""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="reset" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myForm').trigger("reset");
});
</script>
</body>
</html>
I changed your input type reset to type button.
On click such a button can set the value of each input to an empty string:
// save initial values in a data attribute for each input....
$('#myForm :input:not([type="button"])').each(function(idx, ele) {
ele.dataset.initvalue = ele.value;
});
$('#myForm [type="button"]').on('click', function(e) {
// reset current row............
$(this).closest('tr').find(':input:not([type="button"])').each(function(idx, ele) {
// restore the initial value
ele.value = ele.dataset.initvalue;
})
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>reset</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11"""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9"""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5"""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
You do not want to use type="reset" for your reset buttons, just stick with type="button". You do not want to reset the entire form.
You can add a click listener to these buttons to get the current row of the clicked button.
This can be achieved via: $(e.target).parent().parent() or $(e.target).closest('tr')
Once you have the row, you can locate your input fields and set their values to a default value or empty string.
Update: Using jQuery .data()
You can store the original values as data for the field. This is probably the most versatile method and it allows you to store the value of any input field.
(function($) {
$.fn.assignDefaultValues = function() {
$(this).find('input').each(function() {
$(this).data('defaultValue', $(this).val());
});
};
})(jQuery);
$('.zui-table').assignDefaultValues();
$('.zui-table td > input[type="button"]').on('click', function() {
const $tr = $(this).closest('tr');
$tr.find('td > input[type="text"]').each(function() {
$(this).val($(this).data('defaultValue') || '');
});
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td input {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11" ""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9" ""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5" ""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
Storing data the old-fashioned way
Alternatively, if you want to recall the previous values, you could store the values ahead of time. This can be helpful for building an export function.
(function($) {
$.fn.storeTableValues = function() {
return this.find('tbody tr').map(function() {
return [$(this).find('td > input[type="text"]').map(function() {
return $(this).val();
}).toArray()];
}).toArray();
};
})(jQuery);
const originalValues = $('.zui-table').storeTableValues();
$('.zui-table td > input[type="button"]').on('click', function(e) {
const $button = $(e.target);
const $tr = $button.closest('tr');
const index = $tr.closest('table').find('tbody tr').index($tr);
$tr.find('td > input[type="text"]').each(function(col) {
$(this).val(originalValues[index][col] || '');
});
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td input {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11" ""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9" ""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5" ""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
The <input type="reset"> defines a reset button which resets all form values to its initial values.
So, you should implement a button that trigger some function that do the trick for reseting each row.
From Here:
https://www.w3schools.com/tags/att_input_type_reset.asp
This question already has answers here:
How to set tbody height with overflow scroll
(16 answers)
Closed 2 years ago.
I am trying to enter entries in table inputs for my inventory website. I want to freeze the headers of each column and tried doing it with this -> Freeze the top row for an html table only (Fixed Table Header Scrolling)
window.onload = function(){
var to_show = '';
for(var i = 1 ; i < 50 ; i++){
to_show += '<tr><td><input type="text" autocomplete="off" id="product_name_'+ i +'" name="product_name_'+i+'" onkeyup="productSearch(this.value, '+i+')" tabindex="-1" style="font-size:larger;"></td>';
to_show += '<td><input type="text" autocomplete="off" id="location_'+ i +'" name="location_'+ i +'" onkeyup="productSearch(this.value, '+ i +')" tabindex="-1" style="font-size:larger;"></td></tr>';
}
document.getElementById('addInside_tr_20').innerHTML = to_show;
}
#import url("https://fonts.googleapis.com/css?family=Montserrat:300,400|Oswald:200,300,400&display=swap");
:root {
--purple-theme: #091428;
--lightpurple-theme: #0f3a41;
--gray-bg-heading: #b8b8b8;
--gray-bg-sidebar: #dee3e7;
--lightgreen-theme: #65ffce;
--green-theme: #46b692;
--red-theme: #f75b54;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px 0px 10px 10px;
background: var(--lightpurple-theme);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--green-theme);
border-radius: 0 0 10px 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--lightgreen-theme);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
::-moz-selection {
/* Code for Firefox */
color: var(--purple-theme);
background: var(--green-theme);
}
::selection {
color: var(--purple-theme);
background: var(--green-theme);
}
input:focus,
option:focus,
select:focus {
outline-color: var(--lightgreen-theme);
}
body {
height: 100%;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
table,
select,
input,
a {
color: whitesmoke;
}
input {
width: 100%;
line-height: 5px;
font-size: 10px;
}
input[type="text"],
input[type="url"],
input[type="number"] {
height: 30px;
border: 1px solid var(--green-theme);
background-color: transparent;
color: whitesmoke;
font-size: 15px;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid var(--green-theme);
background-color: var(--green-theme);
color: var(--purple-theme);
text-decoration-style: bold;
font-size: 15px;
border-radius: 0px 15px 15px 0px;
}
/* ------grid container------ */
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
}
input[type="date"] {
height: 100%;
}
.grid_container {
display: grid;
grid-template-columns: repeat(auto, 1fr);
grid-gap: 10px;
padding: 10px;
margin: 0 auto;
color: whitesmoke;
}
.grid {
background-color: var(--purple-theme);
border: 1px solid lightgrey;
padding: 20px;
}
.inside > span {
font-family: "Oswald", sans-serif;
font-weight: 400;
font-size: 18px;
}
.item1 {
grid-column: 1 / 3;
}
.item2 {
grid-column: 3 / 5;
}
.item3 {
grid-column: 5 / 7;
}
.item4 {
grid-column: 7 / 9;
}
.item5 {
grid-column: 1 / 9;
}
.inside {
padding: 0;
padding-bottom: 10px;
border: none;
}
.item2 {
grid-column: 1 / 9;
grid-row: 1 / 5;
}
.inside input[type="text"] {
width: 200px;
}
.item2 select,
.item2 option {
width: 100%;
height: 30px;
background-color: var(--purple-theme);
border: 1px solid var(--green-theme);
text-align: center;
}
.item2 select option {
background: var(--purple-theme);
}
.item2 table {
width: 100%;
text-align: center;
margin-top: 20px;
font-size: 20px;
}
.details table:nth-child(1) {
margin-top: -20px;
}
.details {
margin-top: -20px;
}
.item2 th {
background-color: var(--green-theme);
color: var(--purple-theme);
padding: 15px;
}
.item2 a {
text-decoration: underline;
}
/* main edit here start */
#text-area td:nth-child(1) {
width: 80%;
}
#text-area td:nth-child(2) {
width: 20%;
}
#text-area thead th:nth-child(1) {
width: 80%;
}
#text-area thead th:nth-child(2) {
width: 20%;
}
#text-area thead {
display: block;
}
#text-area tbody {
height: 440px;
display: block;
overflow: auto;
width: 100%;
}
#text-area input {
width: 100%;
}
#text-area input {
border: none;
}
#text-area {
border: 1px solid var(--green-theme);
}
#text-area tr:nth-child(2n + 1) {
background: var(--lightpurple-theme);
}
#text-area td:nth-child(4) {
border-right: none;
}
#text-area td {
border-right: 1px solid var(--green-theme);
}
/* main edit here ends */
.item2 .inside table * {
padding-bottom: 20px;
}
.suggestion {
position: absolute;
background-color: var(--purple-theme);
font-size: smaller;
cursor: pointer;
}
.suggestion_i:hover {
color: var(--purple-theme);
background-color: var(--green-theme);
}
.suggestion_i {
cursor: pointer;
text-align: center;
text-justify: center;
padding: 10px 10px -5px 10px;
}
#sorted_div {
background-color: var(--purple-theme);
/*position:absolute;*/
top: 123px;
}
#sorted_div tr:nth-child(2n + 1) {
background: var(--lightpurple-theme);
}
<div class="grid_container">
<div class="grid item2">
<div class="inside" id="topTableID">
<form action="php/invoiceFetch.php" method="post" enctype="multipart/form-data" id='myForm' onkeypress="return event.keyCode != 13;">
<table>
<tr>
<td><label for="">Location :</label></td>
<td><input type="text" autocomplete="off" name="invoice_name" id="invoice_name" onchange="invoiceSpliter()" onkeyup="customerSearch(this.value)" style="width: 500;"></td>
<td><label>Product Suggestion : </label></td>
<td>
<div id="product_suggestion" class="suggestion"></div>
</td>
</tr>
<tr>
<td>
<div id="suggestion" class="suggestion"></div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="details">
<table id="text-area">
<thead>
<tr>
<th><label>Product Name</label></th>
<th><label>Current Locations</label></th>
</tr>
</thead>
<tbody id="addInside_tr_20">
<!--there will be some rows added here -->
</tbody>
</table>
<table>
<tr>
<td><input type="reset" value="Reset" tabindex="-1"></td>
<td><input type="button" onclick="document.getElementById('myModal').style.display = 'block';" value="Submit"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
You can check the code on [codepen]{https://codepen.io/zaidi2293/pen/WNwmJrP} (Ignore most of the css as they are just to replicate what I had so that I don't miss something out)
(Sorry for the extensive code length) The Problem is the "thead" is not aligned with "tbody" as in column perspective because of overflow in vertical direction. I've asked this question before but that doesn't seem to work for me. Also, there will be some more columns added in the future. No custom size width answers please
You may reset the table-layout to fixed, turn tr into tables and apply the width to each cells, then add a 1.2em padding or margin right on thead (average width of a scrollbar).
answer inspired from How to set tbody height with overflow scroll and probably a duplicate.
table {
border: 1px solid;
}
tr {
display: table;
table-layout: fixed;
}
#text-area {
border: 1px solid;
}
#text-area tr :nth-child(1) {
width: 15%;
}
#text-area tr :nth-child(2) {
width: 60%;
}
#text-area tr :nth-child(3) {
width: 10%;
}
#text-area tr :nth-child(4) {
width: 15%;
}
#text-area thead {
display: block;
padding-right:1.2em;
}
#text-area tbody {
height: 200px;
display: block;
overflow: auto;
}
input {
box-sizing:border-box;
min-width: 100%;
}
<table id="text-area">
<thead>
<tr>
<th><label>Barcode</label></th>
<th><label>Product Name</label></th>
<th><label>Count</label></th>
<th><label>QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE"></td>
<td><input type="text" value="6"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS"></td>
<td><input type="text" value="4"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE"></td>
<td><input type="text" value="6"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER"></td>
<td><input type="text" value="2"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
</tbody>
</table>
You could set input box width 100% and add pixels width to th and td, instead of percentages.,
The input box width 100% will help to set it to its parent width and remove its default width. The pixels can help to have a fixed width and alignment problems.
table{
border: 1px solid;
}
#text-area{
border: 1px solid;
}
#text-area td:nth-child(1){
width: 100px;
}
#text-area td:nth-child(2){
width: 200px;
}
#text-area td:nth-child(3){
width: 100px;
}
#text-area td:nth-child(4){
width: 100px;
}
#text-area thead th:nth-child(1){
width: 100px;
}
#text-area thead th:nth-child(2){
width: 200px;
}
#text-area thead th:nth-child(3){
width: 100px;
}
#text-area thead th:nth-child(4){
width: 100px;
}
#text-area thead{
display:block;
}
#text-area tbody{
height:200px;
display:block;
overflow:auto;
}
#text-area input{
width:100%
}
<table id="text-area">
<thead>
<tr>
<th><label >Barcode</label></th>
<th><label >Product Name</label></th>
<th><label >Count</label></th>
<th><label >QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS" ></td>
<td><input type="text" value="4" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER" ></td>
<td><input type="text" value="2" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
</tbody>
</table>
th {
background-color: #fff;
}
th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}
<table id="text-area">
<thead>
<tr>
<th><label >Barcode</label></th>
<th><label >Product Name</label></th>
<th><label >Count</label></th>
<th><label >QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS" ></td>
<td><input type="text" value="4" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER" ></td>
<td><input type="text" value="2" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
</tbody>
</table>
I want to construct some input forms that can calculate automatically. Provide below is my input forms.
var form = document.forms.myform,
pv1 = form.pv1,
pv2 = form.pv2,
output = form.pvtotal;
window.calculate = function () {
var p1 = parseInt(pv1.value, 10) || 0,
p2 = parseFloat(pv2.value) || 0;
output.value = (p1 + p2).toFixed(2);
};
<style>
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number]{
width: 50px;
}
</style>
<form action="" name="myform" onkeyup="calculate()">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" name="pv1"></td>
<td><input type="number" name="pv2"></td>
<td><input type="number" name="pvtotal"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
</tbody>
</table>
</form>
As you can see and try, i just provide the sum for previous stock. The main problem is I want all the column be automatic calculated except for the CURRENT STOCK column which i want this column calculated by:
(PREVIOUS STOCK - CULL - MORTALITY = CURRENT STOCK
Then, the other problem whenever i add one row below, all the script did not function anymore. I don't know why. I hope you guys can help me through this.
Below is my expected output:
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number]{
width: 50px;
}
div.scrollmenu {
overflow: auto;
}
h4 {
text-decoration: underline;
text-align: center;
line-height: 1.6;
}
<form action="dailyprod_action.php" method="post" name="myform" onkeyup="calculate()">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" name="" value="1000"></td>
<td><input type="number" name="" value="1000"></td>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="200" ></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="600" readonly></td>
<td><input type="number" name="" value="600" readonly></td>
<td><input type="number" name="" value="1200" readonly></td>
</tr>
<tr>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="4000"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="400" ></td>
<td><input type="number" name="" value="800"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="800"></td>
<td><input type="number" name="" value="1700" readonly></td>
<td><input type="number" name="" value="1700" readonly></td>
<td><input type="number" name="" value="3400" readonly></td>
</tr>
</tbody>
</table>
</form>
You can develop my sample script and try
$("#pds_v1").keyup(function(){
var pds_v1 = $("#pds_v1").val();
var pds_v2 = $("#pds_v2").val();
var total= parseInt(pds_v2) + parseInt(pds_v1);
$("#pds_sum").val(total);
});
$("#pds_v2").keyup(function(){
var pds_v1 = $("#pds_v1").val();
var pds_v2 = $("#pds_v2").val();
var total= parseInt(pds_v2) + parseInt(pds_v1);
$("#pds_sum").val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" name="" id="pds_v1"></td>
<td><input type="number" name="" id="pds_v2"></td>
<td><input type="number" name="" id="pds_sum"></td>
</tr>
</table>
I suggest you use JQuery as that will make your life easier, also there's not much difference between Javascript and JQuery syntax, so it'll be easy for you to learn if you know Javascript.
I moved your onkeyup event listener to the tr tag so you'll be able to do calculate() on every row. I also added this parameter on the calculate() function to get the element that fired that function and get all child from that element to change the output field of that row (the one that fired calculate() function).
Try this code below (this is only inputs for Previous Stock):
function calculate(elem) {
pv1 = $(elem).children()[0].children;
pv2 = $(elem).children()[1].children;
out = $(elem).children()[2].children;
var p1 = parseInt($(pv1).val(), 10) || 0;
var p2 = parseFloat($(pv2).val()) || 0;
$(out).val((p1 * p2).toFixed(2));
}
$('#add_field').click(function() {
$('#table_body').append(`
<tr onkeyup="calculate(this)" onchange="calculate(this)">
<td><input type="number" name="pv1" id="pv1"></td>
<td><input type="number" name="pv2" id="pv2"></td>
<td><input type="number" name="pvtotal" id="output"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
`)
})
$('#remove_field').click(function() {
var len = ($('#table_body').children()).length - 1;
$('#table_body').children()[len].remove();
})
table,
th,
td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number] {
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" name="myform">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody id="table_body">
<!-- I'm moving your event listener to the <tr> tag -->
<tr onkeyup="calculate(this)" onchange="calculate(this)">
<td><input type="number" name="pv1" id="pv1"></td>
<td><input type="number" name="pv2" id="pv2"></td>
<td><input type="number" name="pvtotal" id="output"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
</tbody>
</table>
</form>
<button type="button" id="add_field">Add Field</button>
<button type="button" id="remove_field">Remove Field</button>
I need to create a web page as shown below
Below is my current code
function validate() {
var form = document.getElementsByTagName('form')[0];
if (form.tickets.value <= form.childrens.value) {
alert("No of tickets should be greater than the no of children");
return false;
} else if (new Date(form.showdate.value) < new Date()) {
alert("Show date and time should be either current date or future date");
return false;
}
var ticketFare = (form.tickets.value - form.childrens.value) * 200 + form.childrens.value * 100;
alert("Your approximate ticket amount is " + ticketFare + "INR");
return true;
}
.item img {
height: 200px;
width: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
}
.item img:hover {
width: 300px;
height: 300px;
}
<html>
<body>
<h1><b>Movie Ticket Booking</b></h1>
<form action="thankyou.html" onsubmit="alert(validate());">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name" placeholder="Enter the name" pattern="[A-za-z\s]+" required> </td>
</tr>
<tr>
<td>Movie Name</td>
<td><input type="text" name="moviename" autocomplete="on" list="movies" required>
<datalist id="movies">
<option value="Irada"></option>
<option value="Rangoon"></option>
<option value="Logan"></option>
<option value="Fist Fight"></option>
</datalist>
</td>
</tr>
<tr>
<td>Circle</td>
<td><input type="text" name="circle" autocomplete="on" list="circles" required>
<datalist id="circles">
<option value="Silver"></option>
<option value="Gold"></option>
<option value="Platinum"></option>
</datalist></td>
</tr>
<tr>
<td>Phone no</td>
<td><input type="text" name="phone" placeholder="Enter mobile # here" pattern="[\d]{10}" required> </td>
</tr>
<tr>
<td>Show date and time</td>
<td><input type="datetime-local" name="showdate" required></td>
</tr>
<tr>
<td>No of tickets</td>
<td><input type="number" name="tickets" min="1" max="10" required></td>
</tr>
<tr>
<td>No of children's</td>
<td><input type="number" name="childrens" min="1" max="5" required></td>
</tr>
<tr>
<td><input type="submit" value="Book My Show"></td>
<td><input type="reset" name="reset"></td>
</tr>
<tr>
<td>
<div class="item">
<img src="contactus.jpg" width="254" height="54">
</div>
</td>
</tr>
</table>
</form>
</body>
Error:
Have provided all the inputs correctly, but the ticket calculation is wrong or The javaScript method is not returning any boolean value
change form.tickets.value to form.getElementsByAttribute('name','tickets')[0].value
You should do the same to the rest of your form elements (showdate, childrens..)