Navigating around html table

Navigating around html table - javascript

I have a html table 40 x 20. each cell is filled with a selector. each selector has 4 options.
At the moment i have to select by using the mouse each value. is there a way to set it so that i can click and drag the mouse over a group of cells at a timed then press the value on the key board to choose that option for all those cells.
Also it would be really handy if there was a way to set it so I could change the selected cell using the keyboard arrows.
does anyone know a way for both or either of these above?
a little sample of how my table is set up:
<tr id="row_1">
<td> row 1</td>
<td id="row_1_col_1">
<center>
<select style="background-color: #ceedd0;" id="row_1_select_1" onchange="changeSelect('row_1','_col_1','_select_1')" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>
<td id="row_1_col_2">
<center>
<select style="background-color: #ceedd0;" id="row_1_select_2" onchange="changeSelect('row_1','_col_2','_select_2')" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>
<td id="row_1_col_3">
<center>
<select style="background-color: #ceedd0;" id="row_1_select_3" onchange="changeSelect('row_1','_col_3','_select_3')" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>

a small trick you can go with, using a hidden checkbox, and bind event on it,,
just try the snippet.
(click on "Select" of each and try to change one of them.)
var slct = document.querySelectorAll('.hidden');
var func = document.querySelectorAll('select');
var i, x, chng;
for (i = 0; i < func.length; i++) {
func[i].onchange = function() {
chng = this.selectedIndex;
for (x = 0; x < slct.length; x++) {
if (slct[x].checked) {
slct[x].nextSibling.nextSibling.selectedIndex = chng;
}
}
}
}
.hidden {
display: none;
}
label {
background: lightgray;
padding: 0.10rem 2rem;
}
.hidden:checked~label {
background: powderblue;
color: white;
}
<tr id="row_1">
<td> row 1</td>
<td id="row_1_col_1">
<center><input type="checkbox" id="toggle" class="hidden"><label for="toggle">Select</label><select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>
<td id="row_1_col_2">
<center><input type="checkbox" id="toggle2" class="hidden"><label for="toggle2">Select</label><select style="background-color: #ceedd0;" id="row_1_select_2" onchange="changeSelect('row_1','_col_2','_select_2')" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>
<td id="row_1_col_3">
<center><input type="checkbox" id="toggle3" class="hidden"><label for="toggle3">Select</label><select style="background-color: #ceedd0;" id="row_1_select_3" onchange="changeSelect('row_1','_col_3','_select_3')" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</center>
</td>
EDIT: as per your request, i added another snippet to use the selectionbox using span without Checkbox. also added multi select when mouse-down over the spans just try
click and hold mousedown then move across the elements,
and try single clicks
I hope this meets what exactly you need.
var tgl = document.querySelectorAll('#selectbox');
var func = document.querySelectorAll('select');
var i, x, chng, actv;
var mouseDown = false;
for (i = 0; i < func.length; i++) {
func[i].addEventListener('change', function() {
var slct = document.querySelectorAll('.activated');
chng = this.selectedIndex;
for (x = 0; x < slct.length; x++) {
slct[x].firstElementChild.selectedIndex = chng;
}
});
}
tgl.forEach((span) => {
span.addEventListener('click', function() {
actv = this;
if (actv.classList.contains('activated')) {
actv.classList.remove('activated');
} else {
actv.classList.add('activated');
}
});
span.addEventListener('mouseover', function() {
this.onmousedown = function() {
mouseDown = true
};
document.onmouseup = function() {
mouseDown = false;
};
if (mouseDown) {
if (this.classList.contains('activated')) {
this.classList.remove('activated');
} else {
this.classList.add('activated');
};
};
});
});
#selectbox {
position: relative;
display: block;
width: 4rem;
border: 1px dashed green;
}
.activated {
background: rgba(0, 0, 10, 0.1);
}
#selectbox:hover {
background: powderblue;
}
<tr id="row_1">
<td> row 1</td>
<td id="row_1_col_1">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>
<td id="row_1_col_2">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>
<td id="row_1_col_3">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>
<td id="row_1_col_3">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>
<td id="row_1_col_3">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>
<td id="row_1_col_3">
<center>
<span id="selectbox">
<select style="background-color: #ceedd0;" id="row_1_select_1" name="filter_for">
<option value="1">1</option>
<option value="P">P</option>
<option value="0">-</option>
<option selected="selected" value="0">0</option>
</select>
</span>
</center>
</td>

Related

How to select only one row in table with checkbox

I have a table with x numbers of rows and 4 columns, one column is checkbox and other three are readonly selectboxs. I want the user to select just 1 row to be editable by checking checkbox in first column then if he check another checkbox in another row, the checkbox he previously checked get unchecked and row get readonly again.
So I want the user to select 1 row only to edit and others be readonly.
here is my code but it is not working.
$(document).ready(function(){
$('.col1, .col2, .col3').attr('disabled', true)
selectRow();
$('.tbl').on('change', '.selectRow', selectRow);
function selectRow() {
$('.tbl tbody tr').each(function () {
$(this).find('.selectRow').each(function () {
var checkedRow = $(this).closest('tr').find('input:checkbox:checked'),
col1 = $(this).closest('tr').find('.col1'),
col2 = $(this).closest('tr').find('.col2'),
col3 = $(this).closest('tr').find('col3');
if (checkedRow){
$('.col1, .col2, .col3').removeAttr('disabled')
checkedRow.siblings().prop('checked', false);
}else{
$('.col1, .col2, .col3').attr('disabled', true)
checkedRow.siblings().prop('checked', false);
}
});
});
}
});
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class = "selectRow" /> </td>
<td>
<select class="col1">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
this is my code:

Without jQuery and using event delegation things may be somewhat simpler:
document.addEventListener(`click`, handle);
// disable all selectors initially
document.querySelectorAll(`td select`)
.forEach(s => s.setAttribute(`disabled`, true));
function handle(evt) {
// only do something if a checkbox was clicked
if (evt.target.type === `checkbox`) {
const isChecked = evt.target.checked;
const selectedRow = evt.target.closest(`tr`);
// reset checkboxes, row coloring and disabled state
document.querySelectorAll(`input[type='checkbox']`)
.forEach(cb => {
cb.checked = cb !== evt.target ? false : isChecked;
const row = cb.closest(`tr`);
row.classList[isChecked && row === selectedRow ?
`add` : `remove`](`selected`);
[...row.querySelectorAll(`select`)].filter(r => r !== selectedRow)
.forEach(s => s.setAttribute(`disabled`, true));
selectedRow.querySelectorAll(`select`)
.forEach(s => s[isChecked ?
`removeAttribute` : `setAttribute`](`disabled`, true));
});
}
}
body {
margin: 2rem;
}
tr.selected {
background-color: lightgreen;
}
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="col1">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>
Here's an even more simplified version, acting on the table rows
document.addEventListener(`click`, handle);
// create the table dynamically to keep demo lean
createTable();
function handle(evt) {
if (evt.target.type === `checkbox`) {
const selectedRow = evt.target.closest(`tr`);
document.querySelectorAll(`tr`)
.forEach( row => {
// not selected
if (row !== selectedRow) {
row.querySelector(`[type=checkbox]`).checked = false;
row.classList.remove(`selected`);
return row.querySelectorAll(`select`)
.forEach(s => s.setAttribute(`disabled`, true));
}
// selected
row.classList[[`remove`, `add`][+evt.target.checked]](`selected`);
row.querySelectorAll(`select`).forEach(s =>
s[`${[`set`,`remove`][+evt.target.checked]}Attribute`](`disabled`, true));
});
}
}
function createTable() {
const table = document.createElement(`table`);
const repeat = (str, n) => Array(n + 1).join(str);
const select = `<td><select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>E</option></select></td>`;
const row = `<tr>
<td><input type="checkbox" /></td>
${repeat(select, 3)}</tr>`;
table.insertAdjacentHTML(`beforeend`, repeat(row, 3));
document.body.appendChild(table);
// disable all selectors initially
document.querySelectorAll(`td select`)
.forEach(s => s.setAttribute(`disabled`, true));
}
body {
margin: 2rem;
}
tr.selected {
background-color: lightgreen;
}
tr td:nth-child(1) {
padding-right: 6px;
}

The issue is because checkedRow holds a jQuery object. When you use that in an if condition it will always equate to true. You instead need to get the checked property from that element and use that in the condition instead.
Also note that the logic can be made much more succinct and extensible through the use of common selectors instead of incremental ones. In addition, you should look to add the disabled attribute to the HTML directly. Adding it via JS means that there will be a visible flash where the element is loaded as enabled, then when the DOM loads it will be disabled which is not good for your UX.
jQuery($ => {
selectRow();
$('.tbl').on('change', '.selectRow', selectRow);
function selectRow() {
$('.tbl tbody tr').each(function() {
let $row = $(this);
let $checkbox = $row.find('.selectRow');
$row.find('select').prop('disabled', !$checkbox.prop('checked'));
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="col1" disabled="disabled">
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2" disabled="disabled">
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3" disabled="disabled">
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" class="selectRow" /> </td>
<td>
<select class="s1">
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2">
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3">
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>

This works great! uncheck all checkboxes except the one having current focus '.tbl [type="checkbox"]:not(:focus)' then manipulate the select boxes
$(document).ready(function(){
$('.tbl [type="checkbox"]').on('click', function() {
$('.tbl [type="checkbox"]:not(:focus)').prop('checked', false);
$('.tbl select').attr('disabled', true);
$(this).parent().parent().find('select').attr('disabled', !$(this).prop('checked'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tbl">
<tr>
<td><input type="checkbox" name="check1" class = "selectRow" /> </td>
<td>
<select class="col1" disabled>
<option id="col1o1">A</option>
<option id="col1o2">B</option>
<option id="col1o3">C</option>
<option id="col1o4">E</option>
</select>
</td>
<td>
<select class="col2" disabled>
<option id="col2o1">A</option>
<option id="col2o2">B</option>
<option id="col2o3">C</option>
<option id="col2o4">E</option>
</select>
</td>
<td>
<select class="col3" disabled>
<option id="col3o1">A</option>
<option id="col3o2">B</option>
<option id="col3o3">C</option>
<option id="col3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1" disabled>
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2" disabled>
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3" disabled>
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
<br>
<tr>
<td><input type="checkbox" name="check1" /> </td>
<td>
<select class="s1" disabled>
<option id="s1o1">A</option>
<option id="o2">B</option>
<option id="o3">C</option>
<option id="o4">E</option>
</select>
</td>
<td>
<select class="s2" disabled>
<option id="s2o1">A</option>
<option id="s2o2">B</option>
<option id="s2o3">C</option>
<option id="s2o4">E</option>
</select>
</td>
<td>
<select class="s3" disabled>
<option id="s3o1">A</option>
<option id="s3o2">B</option>
<option id="s3o3">C</option>
<option id="s3o4">E</option>
</select>
</td>
</tr>
</table>

Is there a way I can call have the info on a table in a function or class that can be called multiple times in HTML?

If you look at the HTML code, you will see I have info to display on a table but I'm placing the code over and over to get what I want.
Is there a way to have the code for the table once and just call it again in a class or something to save loading time on the tool I'm working on?
html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-size: 0.8rem;
}
td,
th {
border: 1px solid rgb(190, 190, 190);
padding: 10px 20px;
}
th {
background-color: rgb(235, 235, 235);
}
td {
text-align: center;
}
tr:nth-child(even) td {
background-color: rgb(250, 250, 250);
}
tr:nth-child(odd) td {
background-color: rgb(245, 245, 245);
}
caption {
padding: 10px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
<html>
<head>
<title>
this is a test
</title>
<link href="minimal-table.css" rel="stylesheet" type="text/css">
<script src="//widget.time.is/?Las_Vegas_z14e&t=1630524814449"></script>
</head>
<body>
<center>
<h1>Tuesday Demo Setup</h1>
<img src="aries.png" alt="arieslogo" class="center">
Current Time:
<span id="Las_Vegas_z14e" style="font-size:16px"><span onclick="location='http://time.is/'" title="http://time.is/">12:35:48</span></span>
<script src="//widget.time.is/t.js"></script>
<script>
time_is_widget.init({
Las_Vegas_z14e: {}
});
</script>
<p></p>
Only <span id="time">02:24:12</span> until the meeting!
<h3>Important meeting is at 3:00pm in the lobby. Don't be late!</h3>
<script>
(function() {
var start = new Date;
start.setHours(15, 0, 0);
function pad(num) {
return ("0" + parseInt(num)).substr(-2);
}
function tick() {
var now = new Date;
if (now > start) { // too late, go to tomorrow
start.setDate(start.getDate() + 1);
}
var remain = ((start - now) / 1000);
var hh = pad((remain / 60 / 60) % 60);
var mm = pad((remain / 60) % 60);
var ss = pad(remain % 60);
document.getElementById('time').innerHTML =
hh + ":" + mm + ":" + ss;
setTimeout(tick, 1000);
}
document.addEventListener('DOMContentLoaded', tick);
})();
</script>
Please use this form to inform us what you want to see loaded on the cabinets.
</center>
<br><br>
<form>
<table align="center">
<tbody>
<tr>
<th>Cabinet</th>
<th>MainGame Title</th>
<th>SideGame Title</th>
<th>Serial#</th>
</tr>
</tbody>
<tbody>
<tr>
<td>LobbyHydra1</td>
<td align="center">
<select>
<option value="MGTITLE">MGTITLE</option>
<option value="ASM">ASM</option>
<option value="BBE">BBE</option>
<option value="BRC">BRC</option>
<option value="HPY">HPY</option>
<option value="RWC">RWC</option>
<option value="SOF">SOF</option>
<option value="SSP">SSP</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
<select>
<option value="SGTITLE">SGTITLE</option>
<option value="XSS">XSS</option>
<option value="XLR">XLR</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
22000
</td>
</tr>
<tr>
<td>LobbyHydra2</td>
<td align="center">
<select>
<option value="MGTITLE">MGTITLE</option>
<option value="ASM">ASM</option>
<option value="BBE">BBE</option>
<option value="BRC">BRC</option>
<option value="HPY">HPY</option>
<option value="RWC">RWC</option>
<option value="SOF">SOF</option>
<option value="SSP">SSP</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
<select>
<option value="SGTITLE">SGTITLE</option>
<option value="XSS">XSS</option>
<option value="XLR">XLR</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
12000
</td>
</tr>
<tr>
<td>LobbyOra1</td>
<td align="center">
<select>
<option value="MGTITLE">MGTITLE</option>
<option value="ASM">ASM</option>
<option value="BBE">BBE</option>
<option value="BRC">BRC</option>
<option value="HPY">HPY</option>
<option value="RWC">RWC</option>
<option value="SOF">SOF</option>
<option value="SSP">SSP</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
<select>
<option value="SGTITLE">SGTITLE</option>
<option value="XSS">XSS</option>
<option value="XLR">XLR</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
3100
</td>
</tr>
<tr>
<td>LobbyOra2</td>
<td align="center">
<select>
<option value="MGTITLE">MGTITLE</option>
<option value="ASM">ASM</option>
<option value="BBE">BBE</option>
<option value="BRC">BRC</option>
<option value="HPY">HPY</option>
<option value="RWC">RWC</option>
<option value="SOF">SOF</option>
<option value="SSP">SSP</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
<select>
<option value="SGTITLE">SGTITLE</option>
<option value="XSS">XSS</option>
<option value="XLR">XLR</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
3000
</td>
</tr>
<tr>
<td>LobbyPhx2</td>
<td align="center">
<select>
<option value="MGTITLE">MGTITLE</option>
<option value="ASM">ASM</option>
<option value="BBE">BBE</option>
<option value="BRC">BRC</option>
<option value="HPY">HPY</option>
<option value="RWC">RWC</option>
<option value="SOF">SOF</option>
<option value="SSP">SSP</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
<select>
<option value="SGTITLE">SGTITLE</option>
<option value="XSS">XSS</option>
<option value="XLR">XLR</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
1500
</td>
</tr>
<tr>
<td>LobbyLibra1</td>
<td align="center">
<select>
<option value="MGTITLE">MGTITLE</option>
<option value="ASM">ASM</option>
<option value="BBE">BBE</option>
<option value="BRC">BRC</option>
<option value="HPY">HPY</option>
<option value="RWC">RWC</option>
<option value="SOF">SOF</option>
<option value="SSP">SSP</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
<select>
<option value="SGTITLE">SGTITLE</option>
<option value="XSS">XSS</option>
<option value="XLR">XLR</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
7500
</td>
</tr>
<tr>
<td>LobbyLibra2</td>
<td align="center">
<select>
<option value="MGTITLE">MGTITLE</option>
<option value="ASM">ASM</option>
<option value="BBE">BBE</option>
<option value="BRC">BRC</option>
<option value="HPY">HPY</option>
<option value="RWC">RWC</option>
<option value="SOF">SOF</option>
<option value="SSP">SSP</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
<select>
<option value="SGTITLE">SGTITLE</option>
<option value="XSS">XSS</option>
<option value="XLR">XLR</option>
<option value="NOSHOW">NOSHOW</option>
<option value="OTHER">OTHER</option>
</select>
</td>
<td align="center">
6000
</td>
</tr>
<tr></tr>
</tbody>
</table>
<p></p>
<textarea id="notes" name="notes" placeholder="tell us something nice" cols="44" rows="10" class="center"></textarea>
<p></p>
<button class="center">Submit request</button>
<p></p>
<input class="center" type="reset" value="Reset">
</form>
</body>
</html>
So what I am trying to do is to have the table info list multiple times without having the raw code placed multiple times. I am a noob when it comes to HTML

Let's abstract your problem.Every row of your table, except the header, is made up of four columns:
A variable string in the column Cabinet
A list of options in the column MainGame Title (identical for every row!)
A list of options in the column SideGame Title (identical for every row!)
A variable string in the column Serial#
So, every row can be written by a function with the following interface:
function addRowToTable(tableID, cabinetName, serial);
I defined it in JavaScript, though the same could be done with PHP, because it is a language you already use in your page.This function will have to:
Access the table in your HTML code (using an ID that we will have to add to the table)
Add rows to it using insertRow() method (its parameter defines the row in which insert the new data; calling it with parameter -1 will add the new row at the end of the table)
Add cells with insertCell(col) method (the parameter represents the column number, starting from 0)
For each cell, properly populate the innerHTML
function addRowToTable(tableID, cabinetName, serial)
{
// Find the table by ID
console.log(tableID);
var tab = document.getElementById(tableID);
// Create an empty row in the LAST position of the table (-1 parameter)
var row = tab.insertRow(-1);
// Our row will have four columns:
// - the first and the last depending on cabinetName and serial parameters
// - the second and the third containing always the same "select" items
var col0 = row.insertCell(0);
var col1 = row.insertCell(1);
var col2 = row.insertCell(2);
var col3 = row.insertCell(3);
col0.innerHTML = cabinetName;
col1.innerHTML = '\
<select>\
<option value=\"MGTITLE\">MGTITLE</option> \
<option value=\"ASM\">ASM</option> \
<option value=\"BBE\">BBE</option> \
<option value=\"BRC\">BRC</option> \
<option value=\"HPY\">HPY</option> \
<option value=\"RWC\">RWC</option> \
<option value=\"SOF\">SOF</option> \
<option value=\"SSP\">SSP</option> \
<option value=\"NOSHOW\">NOSHOW</option> \
<option value=\"OTHER\">OTHER</option> \
</select>';
col2.innerHTML = '\
<select> \
<option value="SGTITLE">SGTITLE</option> \
<option value="XSS">XSS</option> \
<option value="XLR">XLR</option> \
<option value="NOSHOW">NOSHOW</option> \
<option value="OTHER">OTHER</option> \
</select>';
col3.innerHTML = serial;
}
As you can see, the first and the last column contents depend on cabinetName and serial parameters. The second and the third cells, instead, are always the same. The only difficulty is they are multiline strings containing HTML (the ES5 multiline string does the job; details here).
The table defined in your HTML will become really basic: only the header and no data inside. Important: don't forget to add the ID attribute:
<table id="dynTable" align="center">
<tbody>
<tr>
<th>Cabinet</th>
<th>MainGame Title</th>
<th>SideGame Title</th>
<th>Serial#</th>
</tr>
</tbody>
<tbody>
<tr></tr>
</tbody>
</table>
Finally, don't forget to add your rows dynamically by calling addRowToTable() once for every row you need. The simplier way: add a <script> tag just before the closure of <body> tag:
<!--- ... --->
<script>
addRowToTable("dynTable", "LobbyHydra1", 22000);
addRowToTable("dynTable", "LobbyHydra2", 12000);
addRowToTable("dynTable", "LobbyOra1", 3100);
addRowToTable("dynTable", "LobbyOra2", 3000);
addRowToTable("dynTable", "LobbyPhx2", 1500);
addRowToTable("dynTable", "LobbyLibra1", 7500);
addRowToTable("dynTable", "LobbyLibra2", 6000);
</script>
</body>

You could use PHP variables to store the data you wish to repeat and then echo them as often as you like. Change the page extension to be ending in .php (so for example index.html would become index.php)
Set the variables like so..
<?php
$myvar1 = "Hello";
$myvar2 = "World";
?>
Then you can echo them at any point in your html like so..
<span><?php echo $myvar1; ?><span>
<button><?php echo $myvar2; ?></button>

Save the input the user make even after reload/refresh

I wanted to to add a function that every time the user refresh, reload or even close the page, the user to able to see the data whatever the user had entered previously or choose in the <select>.
Also when the user make an update and refresh they show be able to see the change.
let doc, htm, bod, nav, M, I, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', () => {
doc = document;
htm = doc.documentElement;
bod = doc.body;
nav = navigator;
M = tag => doc.createElement(tag);
I = id => doc.getElementById(id);
mobile = /Mobi/i.test(nav.userAgent);
S = (selector, within) => {
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within) => {
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className) => {
return node.classList.contains(className);
}
aC = (node, ...classNames) => {
node.classList.add(...classNames);
return aC;
}
rC = (node, ...classNames) => {
node.classList.remove(...classNames);
return rC;
}
tC = (node, className) => {
node.classList.toggle(className);
return tC;
}
// small Library above - magic below can be put on another page using a load Event *(except // end load line)*
const trs = Q('tbody>tr'),
trsL = trs.length,
prs = Q('tfoot>tr>td+td'),
prsM = prs.length - 1,
ya = [];
function showAverages() {
let total = 0;
for (let p = 0, c, t, l = ya.length; p < prsM; p++) {
c = 0;
for (let i = 0; i < l; i++) {
c += ya[i][p];
}
t = (c / l * 100).toFixed(2);
prs[p].textContent = t;
total += (+t);
}
prs[prsM].textContent = (total / prsM).toFixed(2);
var element = document.getElementById(prs[prsM]);
$("#element").html((total / prsM).toFixed(2) + "%");
}
for (let i = 0, r, sels, y; i < trsL; i++) {
r = trs[i];
sels = Q('select', r);
ya.push([]);
for (let n = 0, s, q = sels.length; n < q; n++) {
s = sels[n];
s.value = 'Yes';
y = s.value === 'Yes' ? 1 : 0;
ya[i].push(y);
s.oninput = () => {
ya[i][n] = s.value === 'Yes' ? 1 : 0;
showAverages();
}
}
}
showAverages();
});
* {
/* set font-size separate to avoid white space issues */
box-sizing: border-box;
font-size: 0;
padding: 0;
margin: 0;
}
p {
font: italic 16px Georgia, Garamond, serif;
}
/* added ---------- */
p span {
color: black;
font: bold 16px Georgia, Garamond, serif;
}
/* ---------------- */
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
thead *,
tfoot * {
font: bold 16px Arial, san-serif;
}
tbody * {
font: 15px Arial, sans-serif;
}
td,
th {
width: 90px;
border: 1px solid #ccc;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background: #ddd;
}
tfoot>tr>td:not(:last-child):after {
content: '%';
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Finding Average</title>
</head>
<body>
<div>
<p>Finding and Display Average: <span id="element"></span><br><br><br></p>
</div>
<!--the total average goes here-->
<table>
<thead>
<tr>
<th>Month</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sept</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
<th>Total Average</th>
</tr>
</thead>
<tfoot>
<tr class="percent_row">
<td>Response Percent</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tfoot>
<tbody>
<tr class="select_row">
<td>Bought Office Supplies</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Saving's Over $25,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Savings</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Over Budget</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Over Budget $10,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
<tr class="select_row">
<td>Over Budget $20,000</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
</td>
</tr>
</tbody>
</table>

The localStorage and sessionStorage properties allow to save key/value pairs in a web browser.
The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.
The localStorage property is read-only.
Example:
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

If you want to store for example your data ya to local storage, you have to stringify the data, because localstorage accepts only string:
localStorage.setItem("savetab", JSON.stringify(ya));
to retrieve data, you do invers:
ya = JSON.parse(localStorage.getItem("savetab"));
after you rebuild your display yes or no for each row/column
ya is an array of 12 columns and 6 rows so 72 selects
so when you loop over ya, you'll do something like that to reload all selects with data saved:
for(var row = 0; row < 6; row++){
for(var col = 0; col < 12; col++){
$("select").eq(row * 12 + col).val(ya[row, col] == 1 ? "Yes" : "No");
}
}
following your sample:
you execute the localStorage.setItem inside showAverages()
and before the last line you load the data saved
//restore your data here before calling the function average
showAverages();
});

jQuery Select Swap Option on Change

I have a page that allows a user to select the order of how fields are displayed. The drop downs are dynamically created and you only have the number of options based on the number of fields there are.
For example, if there are 5 fields, you have options 1-5 to sort your fields by.
What I am trying to accomplish is when you select a number from the dropdown, it "Swaps" that number with whatever one previously held that spot.
If I changed Record 4 to 3, those two drop downs would now be swapped... if that makes sense.
In the example below, change one of the numeric dropdowns to another choice. The original choice that held that value is updated but the actual one you are changing doesn't get the new value.
JS Fiddle: https://jsfiddle.net/y7g155mh/4/
<table name="selectedFields" class="table table-condensed selectedFields">
<thead>
<tr>
<th class="small span1">
<input type="checkbox" id="checkAllSelected">
</th>
<th class="small">Field Name</th>
<th class="small">Sort Order</th>
<th class="small">Sort Type</th>
<th class="small">Display Order</th>
</tr>
</thead>
<tbody name="selectedRows">
<tr data-fid="5">
<td class="small"></td>
<td class="small">Request ID</td>
<td class="small">
<select data-current="1" data-type="sortOrder" class="span1" name="sortOrder">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="1" data-type="displayOrder" class="span1" name="displayOrder">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr data-fid="16">
<td class="small"></td>
<td class="small">Task ID</td>
<td class="small">
<select data-current="2" data-type="sortOrder" class="span1" name="sortOrder">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="2" data-type="displayOrder" class="span1" name="displayOrder">
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr data-fid="9">
<td class="small"></td>
<td class="small">Task Start Date</td>
<td class="small">
<select data-current="3" data-type="sortOrder" class="span1" name="sortOrder">
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="3" data-type="displayOrder" class="span1" name="displayOrder">
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr data-fid="17">
<td class="small"></td>
<td class="small">Task Completion Date</td>
<td class="small">
<select data-current="4" data-type="sortOrder" class="span1" name="sortOrder">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option selected="selected" value="4">4</option>
</select>
</td>
<td class="small">
<select class="span1" name="sortType">
<option value="-">-</option>
<option selected="selected" value="ASC">ASC</option>
<option value="DESC">DESC</option>
</select>
</td>
<td class="small">
<select data-current="4" data-type="displayOrder" class="span1" name="displayOrder">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option selected="selected" value="4">4</option>
</select>
</td>
</tr>
</tbody>
</table>
$('body').on('change', 'select', function() {
saveOrder($(this).val(), $(this).data('type'), $(this).data('current'));
});
// Update the field order numbers and save the data
function saveOrder(order, type, current) {
// First thing we need to do is swap the selected value with the one we are changing it for.
$('[name=' + type + ']').find('option[value="' + order + '"]:selected').parent().val(current);
return false;
// Do something here with storing data
}

It seems like this is what you want to achieve. There is room for improvement.
$('body').on('change', 'select', function() {
saveOrder($(this));
});
// Update the field order numbers and save the data
function saveOrder(select) {
var order = select.val(),
type = select.data('type'),
current = select.data('current');
$('select[name=sortOrder][data-current="'+current+'"]').val(order);
$('select[name=sortOrder][data-current="'+order+'"]').val(current);
return false;
// Do something here with storing data
}

Stop URL parameters being added on submit of form

Okay, so this may be a stupid question, but I'm attempting to write a simple JavaScript app-thing (please excuse my terminology, I'm new to this) which includes a form, except I'm doing it using only HTML and JS (and CSS), so I'm accessing the values in the form by using document.getElementById.
The thing is the Javascript function is supposed to display something, based on the form values (it's basically a GPA calculator), but the things to display simply flash on the screen, and then disappear when I run the HTML file as is, and don't show up at all when I run it through my actual domain. I feel like the reason for this is that after you submit the form, a bunch of URL parameters get tacked on, thus refreshing the HTML, and deleting the newly added innerHTML.
Here's the code for my form:
<form id="calculator" name="calculator">
<table>
<thead>
<tr>
<td>Class Number</td>
<td>Grade</td>
<td>AP/Non-AP</td>
<td>GPA</td>
</tr>
</thead>
<tbody>
<tr>
<td class="classnumber">Class 1</td>
<td>
<select id="class1GPA" name="class1GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class1AP" name="class1AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class1disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 2</td>
<td>
<select id="class2GPA" name="class2GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class2AP" name="class2AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class2disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 3</td>
<td>
<select id="class3GPA" name="class3GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class3AP" name="class3AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class3disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 4</td>
<td>
<select id="class4GPA" name="class4GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class4AP" name="class4AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class4disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 5</td>
<td>
<select id="class5GPA" name="class5GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class5AP" name="class5AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class5disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 6</td>
<td>
<select id="class6GPA" name="class6GPA">
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class6AP" name="class6AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class6disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 7</td>
<td>
<select id="class7GPA" name="class7GPA">
<option value="none">N/A</option>
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class7AP" name="class7AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class7disp">
</td>
</tr>
<tr>
<td class="classnumber">Class 8</td>
<td>
<select id="class8GPA" name="class8GPA">
<option value="none">N/A</option>
<option value=4.4 selected>A+</option>
<option value=4.0>A</option>
<option value=3.7>A-</option>
<option value=3.4>B+</option>
<option value=3.0>B</option>
<option value=2.7>B-</option>
<option value=2.4>C+</option>
<option value=2.0>C</option>
<option value=1.7>C-</option>
<option value=1.4>D+</option>
<option value=1.0>D</option>
<option value=0.7>D-</option>
<option value=0>F</option>
</select>
</td>
<td>
<select id="class8AP" name="class8AP">
<option value=False selected>Regular Class</option>
<option value=True>AP Class</option>
</select>
</td>
<td id="class8disp">
</td>
</tr>
</br>
</tbody>
</table>
<input onClick="showGPA()" id="submit" type="submit" value="Calculate!"/>
</form>
And the Javascript that is supposed to process it (it doesn't actually display an average yet, but that's less important than figuring out why it just flashes/doesn't display):
function showGPA() {
var grades = {};
grades.classesNumber = 6
if (document.getElementById('class1AP').value === "True") {
grades.class1 = parseFloat(document.getElementById('class1GPA').value) + 0.5;
} else {
grades.class1 = parseFloat(document.getElementById('class1GPA').value);
}
document.getElementById('class1disp').innerHTML = grades.class1.toFixed(1);
if (document.getElementById('class2AP').value === "True") {
grades.class2 = parseFloat(document.getElementById('class2GPA').value) + 0.5;
} else {
grades.class2 = parseFloat(document.getElementById('class2GPA').value);
}
document.getElementById('class2disp').innerHTML = grades.class2.toFixed(1);
if (document.getElementById('class3AP').value === "True") {
grades.class3 = parseFloat(document.getElementById('class3GPA').value) + 0.5;
} else {
grades.class3 = parseFloat(document.getElementById('class3GPA').value);
}
document.getElementById('class3disp').innerHTML = grades.class3.toFixed(1);
if (document.getElementById('class4AP').value === "True") {
grades.class4 = parseFloat(document.getElementById('class4GPA').value) + 0.5;
} else {
grades.class4 = parseFloat(document.getElementById('class4GPA').value);
}
document.getElementById('class4disp').innerHTML = grades.class4.toFixed(1);
if (document.getElementById('class5AP').value === "True") {
grades.class5 = parseFloat(document.getElementById('class5GPA').value) + 0.5;
} else {
grades.class5 = parseFloat(document.getElementById('class5GPA').value);
}
document.getElementById('class5disp').innerHTML = grades.class5.toFixed(1);
if (document.getElementById('class6AP').value === "True") {
grades.class6 = parseFloat(document.getElementById('class6GPA').value) + 0.5;
} else {
grades.class6 = parseFloat(document.getElementById('class6GPA').value);
}
document.getElementById('class6disp').innerHTML = grades.class6.toFixed(1);
if (document.getElementById('class7GPA').value !== "none") {
if (document.getElementById('class7AP').value === "True") {
grades.class7 = parseFloat(document.getElementById('class7GPA').value) + 0.5;
} else {
grades.class7 = parseFloat(document.getElementById('class7GPA').value);
}
document.getElementById('class7disp').innerHTML = grades.class7.toFixed(1);
grades.classesNumber++;
} else {
grades.class7 = 0;
}
if (document.getElementById('class8GPA').value !== "none") {
if (document.getElementById('class8AP').value === "True") {
grades.class8 = parseFloat(document.getElementById('class8GPA').value) + 0.5;
} else {
grades.class8 = parseFloat(document.getElementById('class8GPA').value);
}
document.getElementById('class8disp').innerHTML = grades.class8.toFixed(1);
grades.classesNumber++;
} else {
grades.class8 = 0;
}
}
How is it possible for me to stop 16 different URL parameters from being added on when the form submits?
Now my guess as to why it doesn't work may be completely wrong, as I said, I'm new to this. (While trying to make this work, I noticed that one of the problems was that I spelt .innerHTML as .innnerHTML)
But if someone could help me make this work, preferably without learning PHP or something, that would be great. Thanks!

When you submit a form, it will do an HTTP post to the action you specify. If you're looking to run some javascript on your form here, and stop it from posting, add 'return false' on your submit.
http://jsbin.com/icobam/2/edit
<form id="calculator" name="calculator" onsubmit="return false;">

<form id="calculator" name="calculator" onsubmit='showGPA();' method="post">
Inserting method="post" will stop the form from adding parameters in the URL.

Remove the onclick statement from the submit button:
<input onClick="showGPA()" id="submit"
to
<input id="submit"
Change the form to:
<form id="calculator" name="calculator" onsubmit='showGPA(); return false;'>
Note: if there are any javascript errors within the showGPA function then the form will be submitted and cause a page refresh. The only way to prevent this is to ensure that there are no javascript errors.

We Keep Coding

JavaScript is the programming language of the Web.

Navigating around html table - javascript

Related

How to select only one row in table with checkbox

Is there a way I can call have the info on a table in a function or class that can be called multiple times in HTML?

Save the input the user make even after reload/refresh

jQuery Select Swap Option on Change

Stop URL parameters being added on submit of form

Categories

Resources