I have input fields like this
<input name="unittotal[]" type="text" id="unittotal[]" onchange="sumofunittotal();" size="3" />
<input name="unittotal[]" type="text" id="unittotal[]" onchange="sumofunittotal();" size="3" />
<input name="unittotal[]" type="text" id="unittotal[]" onchange="sumofunittotal();" size="3" />
<input name="unittotal[]" type="text" id="unittotal[]" onchange="sumofunittotal();" size="3" />
.
.
.
<input name="total" type="text" id="total" value="">
if i enter value in unittotal field onchange the final text box value is should be sum of that unit total using javascript.
Here's the working demo for you.
You need not use duplicate id values for your HTML elements. Consider using class name instead. Refer the markup and the code that calculates the total. I hope its self-explanatory enough.
JavaScript:
function updateTotal() {
var total = 0;//
var list = document.getElementsByClassName("input");
var values = [];
for(var i = 0; i < list.length; ++i) {
values.push(parseFloat(list[i].value));
}
total = values.reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});
document.getElementById("total").value = total;
}
HTML:
<input type="text" class='input' value="0" onchange='updateTotal();'>
<input type="text" class='input' value="0" onchange='updateTotal();'>
<input type="text" class='input' value="0" onchange='updateTotal();'>
<input type="text" class='input' value="0" onchange='updateTotal();'>
<input name="total" type="text" id="total" value="">
Like this:
<input type="text" size="3" class="add" />
<input type="text" size="3" class="add" />
<input type="text" size="3" class="add" />
<input type="text" size="3" class="add" />
<hr>
<input type="text" size="3" id="sum" />
and the javascript:
(function () {
var elms = document.querySelectorAll('.add'),
arr = Array.prototype.slice.call(elms),
onChange = function () {
var result = 0;
arr.forEach(function (el) {
result = result + +el.value;
});
document.getElementById('sum').value = result;
};
arr.forEach(function (el) {
el.addEventListener('change', onChange);
});
}());
http://jsfiddle.net/65b6T/
try this , and see in detail in fiddle DEMO.
HTML
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<tr>
<td width="40px">1</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>3</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>4</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>5</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr>
<td>6</td>
<td>
<input class="txt" type="text" name="txt" />
</td>
</tr>
<tr id="summation">
<td align="left">Total :</td>
<td align="left"><span id="sum">0</span>
</td>
</tr>
</table>
Javascript:
$(document).ready(function () {
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function () {
$(this).keyup(function () {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
Here is a DEMO for this solution. http://jsfiddle.net/jxJg7/1/
NOTES:
It works only if your values are integers.
I created a function that will force the user to put numbers only on the inputs
Make sure you remove the duplicated IDs
<script type="text/javascript">
function sumofunittotal() {
var total = 0;
var cusid_ele = document.getElementsByClassName('inputtosum');
for (var i = 0; i < cusid_ele.length; ++i) {
if (!isNaN(parseInt(cusid_ele[i].value)) )
total += parseInt(cusid_ele[i].value);
}
document.getElementById('total').value=total;
}
function onlynumber(e) {
if (e.shiftKey === true ) {
if (e.which == 9) {
return true;
}
return false;
}
if (e.which > 57) {
return false;
}
if (e.which==32) {
return false;
}
return true;
}
</script>
<input name="unittotal[]" class="inputtosum" type="text" onchange="sumofunittotal();" onkeydown="return onlynumber(event);" size="3" />
<input name="unittotal[]" class="inputtosum" type="text" onchange="sumofunittotal();" onkeydown="return onlynumber(event);" size="3" />
<input name="unittotal[]" class="inputtosum" type="text" onchange="sumofunittotal();" onkeydown="return onlynumber(event);" size="3" />
<input name="unittotal[]" class="inputtosum" type="text" onchange="sumofunittotal();" onkeydown="return onlynumber(event);" size="3" />
<input name="total" type="text" id="total" value="">
Related
I would like to duplicate the last row in a HTML table when the user types in any input inside the last row.
My code only works the first time it is run.
Maybe the table above it is being interfering with it? I also replaced :
if ( $(this).parents("tr").is("tr:last")) {
With
if ($(this).closest("tr").is(":last-child")) {
but this just causes a new row to be made on any input.
Var "t" might be off. I shrunk the size of the table and eyeballed the digits.
Javascript & Jquery
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById("Items").deleteRow(i);
}
function duperow() {
document.getElementById("LastRow").value = (Number($("tr:last td:first").text()) + 1);
var x = document.getElementById('Items');
var new_row = x.rows[1].cloneNode(true);
var len = (Number($("tr:last td:first").text()) + 1);
new_row.cells[0].innerHTML = len;
var inp = [];
for (t = 1; t < 4; t += 1) {
inp[t] = new_row.cells[t].querySelectorAll("input,select")[0];
inp[t].id += len;
inp[t].value = "";
}
inp[3].value = "0.00";
x.appendChild(new_row);
}
$(document).ready(function () {
$("input").keydown(function () {
if ( $(this).parents("tr").is("tr:last")) {
duperow();
}
});
});
HTML
<form id="test" action="submit.php" method="post" accept-charset="ISO-8859-1" enctype="multipart/form-data">
<table width="40%" class="alpha" cellpadding="6px" cellspacing="0" border="0" >
<tr>
<td>
<p>Supplier Name:</p><input name="suplname" type="text" id="suplname" name="suplname" size="10" maxlength="30" required/>
</td>
<td>
<p>Contact:</p><input name="contact" type="text" id="contact" name="contact" size="10" maxlength="40" />
</td>
</tr>
<tr>
<td colspan="2">
<p>Address:</p><input name="address" type="text" id="address" name="address" size="10" maxlength="30" />
</td>
<td>
<input style="display: none;" name="LastRow" type="hidden" id="LastRow" name="LastRow" size="4" maxlength="4" />
</td>
</tr>
</table>
<table class="beta" id="Items" border="1" width="50%" cellpadding="6px" cellspacing="0" border="0" >
<tr>
<th style="display: none;">ID</th>
<th>Acct#</th>
<th>Qty.</th>
<th>Price</th>
<th> </th>
<th> </th>
</tr>
<tr>
<td style="display: none;">1</td>
<td><select name="acct" id="acct" >
<option value=" " > </option>
<option value="1" >Thing</option>
<option value="2" >Thing2</option>
</select></td>
<td><input name="qty" type="number" id="qty" size="2" min="1" maxlength="6" required/></td>
<td><input name="price" type="number" id="price" min="0.00" step="0.01" value="0.00" style="width: 150px;"required/ onchange="total()"></td>
<td><input type="button" id="deleterowbtn" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addrowbtn" value="Add Item" onclick="duperow()"/></td>
</tr>
</table>
</table>
</form>
The issue is that you're binding to the keydown event listener on document.ready, which means that dynamically created input elements don't have anything bound to their keydown event.
You could do this instead:
$(document).ready(function () {
$("table.beta").on("keydown", "input", function (e) {
if ( $(e.target).parents("tr").is("tr:last")) {
duperow();
}
});
});
If I had a list of inputs that were dynamically created, who's ID was appended to each input's name, what would be the best way of getting the value of each line item and then calculating a line by line total, as well as a grand total?
HTML:
<table>
<tr>
<td>
<input type="text" name="CompetencyList[0].Score">
<input type="text" name="SkillsList[0].Score">
<input type="text" name="LineTotal">
</td>
</tr>
<tr>
<td>
<input type="text" name="CompetencyList[1].Score">
<input type="text" name="SkillsList[1].Score">
<input type="text" name="LineTotal">
</td>
</tr>
<tr>
<td>
<input type="text" name="CompetencyList[2].Score">
<input type="text" name="SkillsList[2].Score">
<input type="text" name="LineTotal">
</td>
</tr>
<tr>
<td>
Grand Total: <input type="text" name="grandTotal"/>
</td>
</tr>
To calculate each line
$('[name="LineTotal"]').val(function() {
return $(this).closest('td').find('input').not(this).map(function() {
return +this.value || 0;
}).get().reduce(function(a, b) { return a + b });
});
once that's done, you'd calculate the total
$('[name="grandTotal"]').val(function() {
return $('[name="LineTotal"]').map(function() {
return +this.value;
}).get().reduce(function(a, b) { return a + b });
});
$('input').on('input', calculate);
function calculate() {
$('[name="LineTotal"]').val(function() {
return $(this).closest('td').find('input').not(this).map(function() {
return +this.value || 0;
}).get().reduce(function(a, b) { return a + b });
});
$('[name="grandTotal"]').val(function() {
return $('[name="LineTotal"]').map(function() {
return +this.value;
}).get().reduce(function(a, b) { return a + b });
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" name="CompetencyList[0].Score">
<input type="text" name="SkillsList[0].Score">
<input type="text" name="LineTotal">
</td>
</tr>
<tr>
<td>
<input type="text" name="CompetencyList[1].Score">
<input type="text" name="SkillsList[1].Score">
<input type="text" name="LineTotal">
</td>
</tr>
<tr>
<td>
<input type="text" name="CompetencyList[2].Score">
<input type="text" name="SkillsList[2].Score">
<input type="text" name="LineTotal">
</td>
</tr>
<tr>
<td>
Grand Total:
<input type="text" name="grandTotal" />
</td>
</tr>
</table>
When you create your inputs dynamically, you can add to every input a class. Then you can use jQuery to get list of items that has this class. For example:
<input type="text" class="myInput" name="CompetencyList[0].Score">
<input type="text" class="myInput" name="SkillsList[0].Score">
<input type="text" class="myInput" name="LineTotal">
And in Javascript
var myImputs = $(".myInput");
Here's a JS fiddle to how I'd do it... https://jsfiddle.net/cz6sgbyc/1/
I have added classes of lineTotal, competencyScore, and skillsScore to the associated inputs, and an id of "grandTotal" to the grand total input.
Javascript:
function updateScores() {
var grandTotal = 0;
$('.lineTotal').each( function( index, input ) {
var $parent = $(input).parent();
var thisScore = parseFloat( $('.competencyScore',$parent).val() || 0 ) + parseFloat( $('.skillsScore',$parent).val() || 0 );
grandTotal += thisScore;
$(input).val( thisScore );
});
$('#grandTotal').val( grandTotal );
}
$(function() {
$('input').change( updateScores );
});
HTML:
<table>
<tr>
<td>
<input type="text" class="competencyScore" name="CompetencyList[0].Score">
<input type="text" class="skillsScore" name="SkillsList[0].Score">
<input type="text" class="lineTotal" name="LineTotal">
</td>
<td>
<input type="text" class="competencyScore" name="CompetencyList[1].Score">
<input type="text" class="skillsScore" name="SkillsList[1].Score">
<input type="text" class="lineTotal" name="LineTotal">
</td>
<td>
<input type="text" class="competencyScore" name="CompetencyList[2].Score">
<input type="text" class="skillsScore" name="SkillsList[2].Score">
<input type="text" class="lineTotal" name="LineTotal">
</td>
<td>
Grand Total: <input type="text" id="grandTotal" name="grandTotal"/>
</td>
</tr>
</table>
I have some database results, I populate them in form, I have this code:
<input type='button' name='add' onclick='javascript: addQty();' value='+'/>
<span><?php echo $records['ct_qty']; ?></span>
<input type="text" class="gridder_input" name="quant[]" class="quant" id="quant[]" />
<input type='button' name='subtract' onclick='javascript: subtractQty();' value='-'/>
So I want to update specific row when the user presses the "quant" button:
function addQty() {
document.getElementById("quant").value++;
}
function subtractQty() {
if (document.getElementById("quant").value - 1 < 0) {
return;
} else {
document.getElementById("quant").value--;
}
updateQuantity();
}
This code works when I have one row, when I have 2 or more rows nothing works, so I probably have to use this word or something?
You can target the neare input using the sibling selectors.
function addQty(elm) {
elm.nextElementSibling.nextElementSibling.value++;
}
function subtractQty(elm) {
if (elm.previousElementSibling.value - 1 < 0) {
return;
} else {
elm.previousElementSibling.value--;
}
updateQuantity();
}
<input type='button' name='add' onclick='javascript: addQty(this);' value='+' />
<span><?php echo $records['ct_qty']; ?></span>
<input type="text" class="gridder_input" name="quant[]" class="quant" id="quant[]" />
<input type='button' name='subtract' onclick='javascript: subtractQty(this);' value='-' />
Ok i dont have a good enough example of your code, but this should be enough to get you in the right direction...
function getTotals() {
var table = document.getElementById('mytable');
for (i = 0; i < table.rows.length; i++) {
var quant = table.rows[i].querySelector('input[name="quant"]').value;
var priceoriginal = table.rows[i].querySelector('input[name="priceoriginal"]').value;
table.rows[i].querySelector('input[name="total"]').value = quant * priceoriginal;
}
}
<table id="mytable">
<tr>
<td>
<input name="quant" type="text" value="2">
</td>
<td>
<input name="priceoriginal" type="text" value="6">
</td>
<td>Total:
<input name="total" type="text">
</td>
</tr>
<tr>
<td>
<input name="quant" type="text" value="8">
</td>
<td>
<input name="priceoriginal" type="text" value="4">
</td>
<td>Total:
<input name="total" type="text">
</td>
</tr>
<tr>
<td>
<input name="quant" type="text" value="5">
</td>
<td>
<input name="priceoriginal" type="text" value="3">
</td>
<td>Total:
<input name="total" type="text">
</td>
</tr>
</table>
<button onclick="getTotals()">Calculate Totals</button>
I am trying to create an array from the content of a table. The content of the tables looks something like this:
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
And the script that I have written is like this
$(document).on('click', '#guardarBtn', function (event) {
var content=[];
$('.rowUpdate').each(function (i) {
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
alert(value);
content[name] = value;
alert(JSON.stringify(content));
}
});
//alert(content);
rows.push(content);
});
});
But when I click on the button to get the content of the columns of the table and save it in an array it shows blank
UPDATED Js Fiddle link is here
Thanks in advance
Check this one. I changed var content= []; to var content= {};
$(document).on('click', '#guardarBtn', function (event) {
var content= {};
$('.rowUpdate').each(function (i) {
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
content[name] = value;
// alert(JSON.stringify(content));
}
});
alert(JSON.stringify(content));
// rows.push(content);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
Try this (keep the HTML the same):
$(document).on('click', '#guardarBtn', function (event) {
var rows = [];
$('.rowUpdate').each(function (i) {
var row = {};
$(this).find('td').each(function (j, v) {
if (j != 0) {
var input = $("input", this),
name = input.attr("name").substring(0, input.attr("name").length),
value = input.val();
row[name] = value;
}
rows.push(row);
});
});
Shorter way to access :
$(document).on('click', '#guardarBtn', function (event) {
var content = {};
$('.rowUpdate').each(function (i) {
$(this).find('input[type=text]').each(function(){
content[$(this).attr("name")] = $(this).val();
});
});
alert(JSON.stringify(content));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
Try This :
<form name="form_name" id='form_name'>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
</form>
js Here :
$(document).on('click', '#guardarBtn', function (event) {
var row=[];
$('.rowUpdate').each(function (i) {
var content=[];
$(this).find('input').each(function(key,value){
var field_name=$(this).attr('name');
var field_value=$(this).val();
content[field_name]=field_value;
});
row.push(content);
});
console.log(row);
});
If I well understand the question, you just need for something like this (I'm not sure however why you used nested each loops - is there any reason of this? Do you have more code in between these loops?)
$(document).on('click', '#guardarBtn', function(e){
var content={};
$('.rowUpdate td').find('input').each(function(){
content[this.name] = this.value;
});
alert(JSON.stringify(content));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="rowUpdate">
<td>Corredor Feed</td>
<td>Id Corrdor
<input type="text" value="" class="validate" name="idcorreo">
</td>
<td>Nombre
<input type="text" value="" class="validate" name="nombre">
</td>
<td>Email
<input type="text" value="foo#bar.com" class="validate" name="email">
</td>
<td>Empressa
<input type="text" value="" class="validate" name="Empressa">
</td>
<td>Pagina Web
<input type="text" value="" class="validate" name="paginaWeb">
</td>
<td>Telefono
<input type="text" value="" class="validate" name="telephon">
</td>
<td>Cellular
<input type="text" value="" class="validate" name="cellular" />
</td>
<td>
<input type="submit" id="guardarBtn" value="Save" name="submitme">
</td>
</tr>
</table>
Working on a blackjack game for a class and having some trouble with the display function. It does change the value of the field but then it reverts back after the function is done. How do I make the change last?
<html>
<head>
<script type="text/javascript">
function stack()
{
this.cards = new Array();
this.makeDeck = buildDeck;
this.deal = dealCard;
this.add = addCard;
}
function dealCard()
{
return this.cards.shift();
}
function addCard(card)
{
this.cards.push(card);
}
function buildDeck()
{
var ranks = new Array("Ace", "2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King");
var suits = new Array("Clubs", "Diamonds", "Hearts", "Spades");
this.cards = new Array(52);
for (s = 0; s < suits.length; s++)
{
for (r = 0; r < ranks.length; r++)
{
this.cards[(s * ranks.length) + r] = new card(ranks[r], suits[s]);
}
}
}
function card(r, s)
{
this.rank = r;
this.suit = s;
}
function display()
{
document.getElementById("player_card_1").value = "anything";
alert("here");
}
function newGame()
{
var Player = new stack();
var Dealer = new stack();
var Deck = new stack();
Deck.makeDeck();
Player.add(Deck.deal());
display();
}
</script>
<style type="text/css">
input {
background:transparent
}
</style>
</head>
<body>
<table bgcolor="#33CC33">
<tr>
<td style="font:14pt bold">Your cards</td>
<td></td>
<td style="font:14pt bold">Dealer's cards</td>
<td></td>
</tr>
<tr>
<td><input type="text" readonly="readonly" value="" id="player_card_1"></td>
<td><input type="text" readonly="readonly" value="" id="p_card_1_val"></td>
<td><input type="password" readonly="readonly" value="" id="dealer_card_1"></td>
<td><input type="password" readonly="readonly" value="" id="d_card_1_val"></td>
</tr>
<tr>
<td><input type="text" readonly="readonly" value="" id="player_card_2"></td>
<td><input type="text" readonly="readonly" value="" id="p_card_2_val"></td>
<td><input type="text" readonly="readonly" value="" id="dealer_card_2"></td>
<td><input type="text" readonly="readonly" value="" id="d_card_2_val"></td>
</tr>
<tr>
<td><input type="text" readonly="readonly" value="" id="player_card_3"></td>
<td><input type="text" readonly="readonly" value="" id="p_card_3_val"></td>
<td><input type="text" readonly="readonly" value="" id="dealer_card_3"></td>
<td><input type="text" readonly="readonly" value="" id="d_card_3_val"></td>
</tr>
<tr>
<td><input type="text" readonly="readonly" value="" id="player_card_4"></td>
<td><input type="text" readonly="readonly" value="" id="p_card_4_val"></td>
<td><input type="text" readonly="readonly" value="" id="dealer_card_4"></td>
<td><input type="text" readonly="readonly" value="" id="d_card_4_val"></td>
</tr>
<tr>
<td><input type="text" readonly="readonly" value="" id="player_card_5"></td>
<td><input type="text" readonly="readonly" value="" id="p_card_5_val"></td>
<td><input type="text" readonly="readonly" value="" id="dealer_card_5"></td>
<td><input type="text" readonly="readonly" value="" id="d_card_5_val"></td>
</tr>
<tr>
<td><input type="text" readonly="readonly" value="Total"></td>
<td><input type="text" readonly="readonly" value=""></td>
<td><input type="text" readonly="readonly" value="Total"></td>
<td><input type="text" readonly="readonly" value=""></td>
</tr>
</table>
<br>
<form name="buttons" action="">
<button name="deal" onclick="newGame()">Deal</button>
<button name="hit">Hit</button>
<button name="stand">Stand</button>
</form>
</body>
</html>
Try this code. Replace your form code with
<form name="buttons" action="">
<input type="button" name="deal" onclick="newGame()"/>Deal
<input type="button" name="hit">Hit</button>
<input type="button" name="stand">Stand</button>
</form>