We Keep Coding

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>

Table with unique drop down combination for each row

I am having a table where there is two drop down drop-1 and drop-2. So I want to have drop-1 and drop-2 combination as unique.
I tried to create a new object and store that value in that but did not work.
<!DOCTYPE html>
<html>
<body>
<h2>Table</h2>
<table>
<tr>
<th>DD 1</th>
<th>DD 2</th>
</tr>
<tr>
<td><select name="D1">
<option value="fan">Fan</option>
<option value="car">Car</option>
<option value="cycle">Cycle</option>
<option value="truck">Truck</option>
</select></td>
<td><select name="D2">
<option value="electricity">Electricity</option>
<option value="petrol">Petrol</option>
<option value="tube">Tube</option>
<option value="load">Load</option>
</select>
</td>
</tr>
<tr>
<td><select name="D1">
<option value="fan">Fan</option>
<option value="car">Car</option>
<option value="cycle">Cycle</option>
<option value="truck">Truck</option>
</select></td>
<td><select name="D2">
<option value="electricity">Electricity</option>
<option value="petrol">Petrol</option>
<option value="tube">Tube</option>
<option value="load">Load</option>
</select>
</td>
</tr>
<tr>
<td><select name="D1">
<option value="fan">Fan</option>
<option value="car">Car</option>
<option value="cycle">Cycle</option>
<option value="truck">Truck</option>
</select></td>
<td><select name="D2">
<option value="electricity">Electricity</option>
<option value="petrol">Petrol</option>
<option value="tube">Tube</option>
<option value="load">Load</option>
</select>
</td>
</tr>
</table>
</body>
</html>
Need some clarity of thoughts how to achieve that need some suggestion the best possible way to do it if possible with an example

Create drop down on clickable table row

I want to create a drop down after user clicks on a table row.How can i do this using bootstrap and JavaScript?
Here is My table

jQuery(document).ready(function($) {
$(".clickable-row").click(function(e) {
if(e.target.id != "listItems"){
$(this).find("#listItems").toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
<table>
<tr class='clickable-row' data-href='url://'>
<td>1</td>
<td>ABC</td>
<td>123456789</td>
<td>
<select id="listItems">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr class='clickable-row' data-href='url://'>
<td>2</td>
<td>BCD</td>
<td>123456789</td>
<td>
<select id="listItems">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>

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.

Dynamic HTML value calculation using JQuery/Javascript

I wanted to create a table where dynamic values are displayed in a column depending on values selected by users. Below is my code for it. So basically, depending on the number of adults and number of children that are selected, the Price will be calculated. So if someone chooses 1 adult and 0 children, then the Amount for 2 Day ticket should be $235, for 3 day it will be $301 and so on. I want this done on selection change method of selectboxes. I am also not very familiar with JQuery. How do I accompalish this using JQuery?
Ages 10+:
<select id="Adult" name="Adult">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
Ages 3-9:
<select id="Child" name="Child">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<table width="800" border="1" align="center">
<tr>
<td width="224">Product</td>
<td width="246">Ages 10+</td>
<td width="192">Ages 3-9</td>
<td width="110">Price</td>
</tr>
<tr>
<td>2 Day Ticket</td>
<td>$235.00</td>
<td>$223.00</td>
<td>$<span class="amount"></span> </td>
</tr>
<tr>
<td>3 Day Ticket</td>
<td>$301.00</td>
<td>$285.00</td>
<td>$<span class="amount"></span></td>
</tr>
<tr>
<td>4 Day Ticket</td>
<td>$315.00</td>
<td>$298.00</td>
<td>$<span class="amount"></span></td>
</tr>
<tr>
<td>5 Day Ticket</td>
<td>$328.00</td>
<td>$309.00</td>
<td>$<span class="amount"></span></td>
</tr>
</table>

Here is complete code to accomplish what you're trying to do. I added some id's to the totals. See the fiddle for a working example. It would be better to not hard code the values, but this works as a starting point.
var numAdult = 0;
var numChild = 0;
$("#Adult").change( function(){
numAdult = $("#Adult").val();
calcTotals();
});
$("#Child").change( function() {
numChild = $("#Child").val();
calcTotals();
});
function calcTotals(){
$("#2DayTotal").text(235*numAdult + 223*numChild);
$("#3DayTotal").text(301*numAdult + 285*numChild);
$("#4DayTotal").text(315*numAdult + 298*numChild);
$("#5DayTotal").text(328*numAdult + 309*numChild);
}