We Keep Coding

An invalid form control with name='AdjustmentBuyerPrice' is not focusable

Below is the HTML and the JavaScript being used to display the dropdown only if one of the options from the preceding dropdown is selected. When I select the one that is linked the following dropdown it works while when I select the second option not linked to the following dropdown and click submit, it throws the error "An invalid form control with name='AdjustmentBuyerPrice' is not focusable". Please point out the mistake that I did in my code.
`{include file="header.tpl" page_name='Amazon Order Adjustment' extra_javascript='<script language="JavaScript" src="includes/update_shipping_info.js"></script>'}
{literal}
<style type="text/css">
#loading-icon {
position: absolute;
top: 75px;
right: 250px; width:
32px; height: 32px;
display: none;
background: url('/images/lightbox/loading.gif');
}
</style>
{/literal}
{if isset($tpl_error_msg) }
<div id="message">{$tpl_error_msg}</div>
{/if}
{include file='view_order_snippet.tpl'}
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
{if !($update_shipping_info_flag)}
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
{else}
{section name=lineitems loop=$tpl_order_list}
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="{$tpl_order_list[lineitems].id}">
<input type="hidden" name="vendor_id_array[]" value="{$tpl_order_list[lineitems].vendor_fk}">
</td>
<td>{$tpl_order_list[lineitems].sku}
<td>{$tpl_order_list[lineitems].item_description}</td>
<td>{$tpl_order_list[lineitems].quantity}</td>
<td>{$tpl_order_list[lineitems].item_status}</td>
<td>{$tpl_order_list[lineitems].shipping_mode}</td>
{if $tpl_order_list[lineitems].shipping_tracking_no == ""}
<td>N/A</td>
{else}
<td>{$tpl_order_list[lineitems].shipping_tracking_no}</td>
{/if}
</tr>
{/section}
{/if}
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
{html_options options=$tpl_action_type}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
{html_options options=$tpl_adjustment_reason}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
{html_options options=$tpl_adjustment_type}
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice" required>
<option value="">Select Adjustment Buyer Price Type</option>
{html_options options=$tpl_adjustment_buyer_price}
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div class="row">
<input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="{$tpl_grand_total}">
<input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="{$tpl_tax}">
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
<input type="submit" id="cancel_button" name="cancel_action" value="Cancel" class="button">
</div>
</div>
</form>
{literal}
<script type="text/javascript">
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function () {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove required.
}
});
});
</script>
{/literal}
{include file="footer.tpl"}

This is happening because you have AdjustmentBuyerPrice as required so when you have not selected value ItemPriceAdjustments its hidden and when you click on submit button that error shows .Instead you can remove required attribute when that select box is hidden else add required attribute .
Demo Code :
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function() {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="1">
<input type="hidden" name="vendor_id_array[]" value="2">
</td>
<td>A
<td>B</td>
<td>5</td>
<td>ok</td>
<td>htm</td>
<td>N/A</td>
</tr>
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
<option value="ItemPriceAdjustments">ItemPriceAdjustments</option>
<option value="ItemPriceAdjustments1">5</option>
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<!--remove required from here-->
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
<option value="">Select Adjustment Buyer Price Type</option>
<option value="">A</option>
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
</form>

how hide and show <tr> table using jQuery

I have a table that I want to show and hide some use jquery, but it's not working.
$(document).ready(function() {
$("#a").hide();
$("#b").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table class="table ">
<tbody>
<div id="a">
<tr>
<th scope="row"> name </th>
<td>
<input id="name" type="text" class="form-control #error('name') is-invalid #enderror" name="name" required autocomplete="name" autofocus>
</td>
</tr>
<tr>
<th scope="row"> email </th>
<td>
<input id="email" type="text" class="form-control #error('email') is-invalid #enderror" name="email" required autocomplete="email" autofocus>
</td>
</tr>
</div>
<div id="b">
<tr>
<th scope="row"> Adress </th>
<td>
<input id="adressem" type="text" class="form-control #error('adressem') is-invalid #enderror" name="adressem" required autocomplete="adressem" autofocus>
</td>
</tr>
</div>
<tr>
<td>
<div class="pull-right">
<button type="submit" class="btn btn-warning btn-sm" value="modifier">modifier</button>
</div>
</td>
</tr>
</tbody>
</table>

How to manage naming models in the following table

I have the following table:
Lot Table View
I am using three ng-repeat to show the following response.
Response from backend overview
Detailed response from backend
The first ng-repeat is in <tbody> . The second ng-repeat is in <tr>. And the third one is for repeating the Lot Details, Trx Qty and Balance which is <span>.
Following is my html code:
<table id="lotTable" class="table table-striped table-bordered table-vmiddle">
<thead>
<tr>
<th>S No.</th>
<th>Lot No.</th>
<th>Lot Qty</th>
<th>Unit Cost</th>
<th>Lot Details</th>
<th>Trx Qty</th>
<th>Balance</th>
</tr>
</thead>
<tbody ng-if="isDataLot=='yes'" ng-repeat-start="l in lotData track by $index"
ng-init="parentIndex = $index" id=parentRow{{$index}}
data-id="{{l.lotNo}}">{{$index}}
<tr ng-repeat="k in l track by $index">
<td class="indextrack" >{{$index+1}}
</td>
<td class="lotNo">
<input type="hidden" class="hiddenLotNo" value="{{l.lotNo}}"/>
{{ k.lotNo }} <br>
{{k.grnNo}} ({{k.grnDate}}) <br>
{{k.inPermit}} {{k.physicalLocationName}}
</td>
<td class="lotQty">{{k.lotQty}}
</td>
<td class="cost">{{ k.unitPrice | number:4}}
</td>
<!-- Lot Details -->
<td class="lotDetails" style=" line-height: 28px; ">
<span ng-repeat="c in k.lotDetails">
<input type="hidden" class="hiddenLotDetails m-b-5"
id="lotDetails{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
ng-model="xxx[$index]" value="{{c}}"/>
{{c | ctnchange : c}}<br>
{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}
</span>
</td>
<!-- Transaction Quantity -->
<td class="trxQty" style="padding-top: 10px; padding-bottom: 10px;">
<span ng-repeat="c in k.lotDetails track by $index" >
<input class="trxQuantity m-b-5 text-right"
id="trx{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
autocomplete="off"
ng-model="trx[$parent.$index][$index]"
ng-keyup="calculateBal($parent.$index,$index); checkParentCheckbox($event);addTrxQty();"
style="width: 60px;" integers-only/><br>
</span>
</td>
<!-- Balance -->
<td class="balanceNew" style="padding-top: 10px; padding-bottom: 10px;">
<span ng-repeat="c in k.lotDetails track by $index">
<input ng-disabled="true" class="balanceNew m-b-5 text-right"
id="balNew{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
type="text" style="width: 60px;"/>
<br>
</span>
</td>
</tr>
</tr>
</tbody>
<tbody ng-repeat-end></tbody>
I want to dynamically name the models of Lot Details, Trx Qty and Balance . I have named there ids using id="trx{{$parent.$parent.$index}}{{$parent.$index}}{{$index}} for transaction quantity. I want to achieve the same for ng-model.
I have used ng-model="trx[$parent.$index][$index]. But I have three nested ng-repeat. This is good for two nested ng-repeat. How can it be done for three ng-repeat?
Also I have to set the $scope.trx[i][j] values in controller.
What is the right way to name the model so that we can also set its value in controller?

I changed my HTML code to this :
<table id="lotTable" ng-table="tableSorting" class="table table-striped table-bordered table-vmiddle">
<thead>
<tr>
<th ng-hide="true"></th>
<th>S No.</th>
<th>Lot No.</th>
<th>Lot Qty</th>
<th>Unit Cost</th>
<th>Lot Details</th>
<th>Trx Qty</th>
<th ng-hide="true">Balance</th>
<th>Balance</th>
</tr>
</thead>
<tbody ng-if="isDataLot=='yes'" ng-repeat-start="l in lotData track by $index" ng-init="parentIndex = $index" id=parentRow{{$index}} data-id="{{l.lotNo}}">
<tr ng-repeat="k in l track by $index" ng-init="lotDataChildIndex = $index">
<td header-class="'text-center'" ng-hide="true">
<div class="checkbox">
<label>
<input type="checkbox" class="checkhead" id="lotHiddenCheckbox{{parentIndex}}{{lotDataChildIndex}}">
<em class="input-helper"></em>
</label>
</div>
</td>
<td class="indextrack" >{{$index+1}}
<input type="hidden" class="hiddenalcoholPer" value="{{k.alcoholPer}}" />
<input type="hidden" class="hiddencascCode" value="{{k.cascCode}}" />
<input type="hidden" class="hiddencreditorCode" value="{{k.creditorCode}}" />
<input type="hidden" class="hiddencreditorName" value="{{k.creditorName}}" />
<input type="hidden" class="hiddencustomAmnt" value="{{k.customAmnt}}" />
<input type="hidden" class="hiddenduty" value="{{k.duty}}" />
<input type="hidden" class="hiddendutyPaid" value="{{k.dutyPaid}}" />
<input type="hidden" class="hiddenhsCode" value="{{k.hsCode}}" />
<input type="hidden" class="hiddenidUom" value="{{k.idUom}}" />
<input type="hidden" class="hiddenunitPrice" value="{{k.unitPrice}}" />
<input type="hidden" class="hiddenuomCode" value="{{k.uomCode}}" />
<input type="hidden" class="hiddenidGrnforLot" value="{{k.idGrn}}" />
<input type="hidden" class="hiddenidPhysicalLocation" value="{{k.idPhysicalLocation}}" />
</td>
<td class="lotNo">
<input type="hidden" class="hiddenLotNo" value="{{k.lotNo}}"/>
{{ k.lotNo }} <br>
{{k.grnNo}} ({{k.grnDate}}) <br>
{{k.inPermit}} {{k.physicalLocationName}}
</td>
<td class="lotQty">
<input type="hidden" class="hiddenLotQty" value="{{k.lotQty}}" />{{k.lotQty}}
</td>
<td class="cost"><input type="hidden" class="hiddencost" value="{{k.unitPrice}}" />{{ k.unitPrice | number:4}}
</td>
<td class="lotDetails" style=" line-height: 28px; ">
<span ng-repeat="c in k.lotDetails" ng-init="lotDetailsIndex = $index;">
<input type="hidden" class="hiddenLotDetails m-b-5" id="lotDetails{{parentIndex}}{{lotDataChildIndex}}{{lotDetailsIndex}}" value="{{c}}"/>{{c | ctnchange : c}}<br>
</span>
</td>
<td class="trxQty p-t-10 p-b-10">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="trxQtyIndex = $index;">
<!-- lotDetailsValues Hidden field -->
<input type="hidden" class="lotDetailsValues"
id="lotDetailsValues{{parentIndex}}{{lotDataChildIndex}}{{trxQtyIndex}}"
ng-model="lotDetailsValues[parentIndex + '' + lotDataChildIndex + '' + $index]" ng-init="(lotDetailsValues[parentIndex + '' + lotDataChildIndex + '' + $index]) = k.lotDetailsValues[$index];"
value="{{k.lotDetailsValues[$index]}}" />
<!-- Transaction Quantity -->
<input class="trxQuantity m-b-5 text-right"
id="trx{{parentIndex}}{{lotDataChildIndex}}{{trxQtyIndex}}"
autocomplete="off"
ng-model="trx[parentIndex + '' + lotDataChildIndex + '' + trxQtyIndex]"
ng-keyup="calculateBalanceTxtQty(parentIndex,lotDataChildIndex,trxQtyIndex);
checkParentCheckbox($event,parentIndex,lotDataChildIndex);addTrxQty();"
style="width: 60px;" integers-only/><br>
</span>
</td>
<!-- BALANCE AMOUNT HIDDEN -->
<td class="balance p-t-10 p-b-10" ng-hide="true">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="balanceIndex = $index;">
<input ng-disabled="true"
class="balanceAmt m-b-5"
id="balAmt{{parentIndex}}{{lotDataChildIndex}}{{balanceIndex}}"
type="text"
ng-model="balAmt[parentIndex + '' + lotDataChildIndex + '' + balanceNewIndex]"/><br>
</span>
</td>
<!-- BALANCE NEW AFTER CALCULATION -->
<td class="balanceNew p-t-10 p-b-10">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="balanceNewIndex = $index;">
<input type="text" style="width: 60px;"
ng-model="balNew[parentIndex + '' + lotDataChildIndex + '' + balanceNewIndex]"
ng-disabled="true"
class="balanceNew m-b-5 text-right"
id="balNew{{parentIndex}}{{lotDataChildIndex}}{{balanceNewIndex}}"/>
<br>
</span>
</td>
</tr>
</tbody>
<tbody ng-repeat-end></tbody>
<tbody>
<tr ng-if="isDataLot=='no'" class="no_records"><td colspan="8">No Record(s) found.</td></tr>
<tr ng-if="isDataLot=='yes'" >
<td></td>
<td></td>
<td></td>
<td></td>
<td class="text-right">
<strong>Total:</strong>
</td>
<td class="text-right p-r-12">{{(addedTrxQty > 0) ? addedTrxQty : ''}}</td>
<td class="text-right p-r-12">{{(totalTrxValBal > 0) ? totalTrxValBal : ''}}</td>
</tr>
</tbody>
</table>
In order to get it in controller I used the following code:
var quantity = $scope.lotDetailsValues[parentIndex+ '' +childIndex+ '' +index];

If you are looking for Angular 7 version:
<div class="row" [ngClass]="index != 0 ? 'backgroundColor' : ''"
*ngFor="let t of edu.test_scores;trackBy: trackByItems;let si = index">
<!-- Test Score Value -->
<div class="col-md-3">
<div class="form-group">
<label class="alumni-label">Test Score</label>
<ng-select class="custom" name="test_scores_{{index}}_{{si}}" #test_scores[si]="ngModel" [(ngModel)]="t.id"
[items]="test_list" bindValue="id" placeholder="Select Score" bindLabel="name" notFoundText="No results found."
(change)="checkTest(index,$event)" (clear)="t.marks= null;t.marks_out_of=null;"></ng-select>
</div>
</div>
</div>

Do SUM of Dynamic row added by innerHTML method through javascript

I am trying to do Sum on oninput method. Means as the button press the function will be called and show sum of two input in a paragraph <p> tag.
I have my javascript function like this:
quote:function(){
var button = document.getElementById('insert');
var table = document.getElementById('table');
$("#insert").click(function(){
var position=Math.round(table.rows.length - 3);
var row = table.insertRow(position);
var i=1;
row.innerHTML = '<td><input type="integer" name="qty[]" class="form-control" id="qty_' +position +'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discription[]" class="form-control"></td><td><input type="text" name="price[]" class="form-control" placeholder="0.00" id="price_'+ position+'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discount[]" class="form-control" placeholder="0.00"><td><input type="text" name="discountper[]" class="form-control" placeholder="0.00%"></td></td><td><p id="demo'+position+'"></p></td><td><input type="checkbox" name="taxed[]" class="form-control"></td> <td><a class="btn btn-circle red-haze btn-sm" href="javascript:void(0);" id="remCF"><i class="fa fa-times"></i></a></td>';
$("#remCF").live('click',function(){
$(this).parent().parent().remove();
});
});
},
After append it looks like this.
I would like to calculate Total Amount using quantity * price.
But i am not able to do that. It seems like Rows are appending fine. But when i try to call the function i am unable to specify the text are in the myFunction.
here is how myFuntion looks like:
function myFunction(place, event) {
var x =parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what QTY is clicked and which input is clicked -->
var y= parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what PRICE is clicked and which input is clicked -->
var z=x*y;
document.getElementById(place).innerHTML = z;
}
I would like to perform calculation row wise.
And if for reference if you want to know how my HTML looks then here is how it looks like.
<table class="table table-striped table-bordered table-hover" id="sample_3">
<thead>
<tr>
<th style="width:7%;">
Qty
</th>
<th style="width:50%;">
Description
</th>
<th style="width:10%;">
Unit Price
</th>
<th style="width:10%;">
Discount(Rs/$)
</th>
<th style="width:10%;">
Discount%
</th>
<th style="width:7%;">
Total
</th>
<th style="width:2%;">
Taxed
</th>
<th style="width:2%;">
Action
</th>
</tr>
</thead>
<tbody id="table">
<tr class="odd gradeX" id="p_scents" name="p_scnt">
<td>
<input type="integer" name="qty[]" class="form-control" value="1" id="myInput1" oninput="myFunction('demo', event)" >
</td>
<td>
<input type="text" name="discription[]" class="form-control">
</td>
<td>
<input type="text" name="price[]" class="form-control" placeholder="0.00" id="myInput2" oninput="myFunction('demo', event)">
</td>
<td>
<input type="text" name="discount[]" class="form-control" placeholder="0.00">
</td>
<td>
<input type="text" name="discountper[]" class="form-control" placeholder="0.00%">
</td>
<td>
<p id="demo"></p>
</td>
<td>
<div align="center"><input type="checkbox" name="taxed[]" class="form-control"></div>
</td>
<td></td>
</tr><!-- to add new column -->
<tr>
<td colspan="4" >
<div align="right">
<b>Sub Total:</b>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6" >
<a id="insert">Add a New Service</a><br>
<a id="ajax-demo" data-toggle="modal">
Predifined Services </a><td>
</tr>
</tbody>
</table>
here is the Jsfiddle link:
https://jsfiddle.net/5xaaneor/2/
Thank you!

Add input from a form to a table in the same page without reloading

Im trying to make the input from the user in a html form be added to a table that adds up the total price of all the products in the same page all of this without reloading.
here is my html form and table code
Thank you in advance
<h1>Instructions</h1>
<section>
<p>Please enter the desired product/services in the following table to create an order.</p>
<section style="width:300px; margin-left:20px">
<form action="" name="order" method="POST" autocomplete="off">
<table width="300" border="0" cellspacing="5" cellpadding="2">
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input name="product" id="product" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" placeholder="Product name" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input name="quantity" id="quantity" required type="number" title="Enter item quantity" placeholder="Product quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input name="price" id="price" required pattern="[0-9]" title="Please enter only numeric characters" placeholder="Product price" size="28" />
</td>
</tr>
</table>
<br>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!" onclick="">
<br style="clear:both;">
</div>
</form>
</section>
</section>
<table width="416" border="0" cellspacing="5" cellpadding="2">
<tr>
<th width="115" scope="col">Products</th>
<th width="112" scope="col">Quantity</th>
<th width="92" scope="col">Price</th>
<th width="56"></th>
</tr>
<tr>
<td scope="col"> </th>
<td scope="col">
</th>
<td scope="col"> </th>
<th>Total</th>
</tr>
</table>

This is a simple update to what you have that works. Part of your question was to avoid page reloading, so you will notice the FORM no longer does a POST action and your SUBMIT BUTTON is no longer an input but a standard button with an onClick action. This will allow everything to execute without navigating away from the page. For the sake of time I put the results addition in a separate table, feel free to style how you wish.
<html>
<head>
<title>Order</title>
<script type="text/javascript">
var qtyTotal = 0;
var priceTotal = 0;
function updateForm() {
var product = document.getElementById("product").value;
var qty = document.getElementById("quantity").value;
qtyTotal = qtyTotal + parseInt(qty);
document.getElementById("qtyTotals").innerHTML=qtyTotal;
var price = document.getElementById("price").value;
priceTotal = priceTotal + parseInt(price);
document.getElementById("priceTotals").innerHTML=priceTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=product;
cell2.innerHTML=qty;
cell3.innerHTML=price;
}
</script>
</head>
<body>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input id="product" name="product" title="Please enter only alphabetic characters" type="text" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" title="Enter item quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" title="Please enter only numeric characters" size="28" />
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<button type="button" onClick="updateForm();"/>Add To Table</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Products</th>
<th scope="col" width="120">Quantity</th>
<th scope="col" width="120">Price</th>
</tr>
</thead>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="qtyTotals"></div></td>
<td scope="col" width="120"><div id="priceTotals"></div></td>
</tr>
</table>
</body></html>
Here is JS Fiddle Example of above code.

<section>
<p>Please enter the desired product/services in the following table to create an order.</p>
<section style="width:300px; margin-left:20px">
<form action="" name="order" method="POST" autocomplete="off">
<table id="cart" width="300" border="0" cellspacing="5" cellpadding="2">
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input name="product" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" placeholder="Product name" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input name="quantity" required type="number" title="Enter item quantity" placeholder="Product quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input name="price" required pattern="[0-9]" title="Please enter only numeric characters" placeholder="Product price" size="28" />
</td>
</tr>
</table>
<br>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!" onclick="">
<br style="clear:both;">
</div>
</form>
</section>
</section>
<table width="416" border="0" cellspacing="5" cellpadding="2" id="cart">
<tr>
<th width="115" scope="col">Products</th>
<th width="112" scope="col">Quantity</th>
<th width="92" scope="col">Price</th>
<th width="56"></th>
</tr>
<tr>
<td id="items">
</td>
</tr>
<tr>
<td scope="col"> </th>
<td scope="col">
</th>
<td scope="col"> </th>
<th>Total</th>
<td id="total">0</td>
</tr>
</table>
<script>
$(document).ready(function(){
var form = document.order;
var $checkout = $('#cart');
// Listen for form submit
$(form).on('submit', function(e){
// Prevent browser from sending form
e.preventDefault();
// this is a row thats nt yet attached to the document
var $row = $('<tr class="item">');
/*
* Loop through fields and add 'product','quantity','price'
* to $row. we store the data on the node as well
*/
$.each(['product','quantity','price'],function(index, key){
var $td = $('<td>');
var value = form[key].value;
$td.addClass(key).text(value);
$row.data(key, value);
$row.append($td);
});
// Attach the $row to the document
$('#items').append($row);
// Update the totals
$checkout.trigger('change');
});
// Update totals when cart changes
$checkout.on('change',function(){
var total = 0;
$(this).find('.item').each(function(){
var quant = parseFloat($(this).data('quantity'));
var price = parseFloat($(this).data('price'));
total = total + (quant * price);
});
$('#total').text(total);
});
});
</script>