I have looked at some examples on here on how to pass dropdown selection to the "item_name" for my paypal button but just cant get it to work. I don't get any errors. When it goes to the paypal checkout, it should "Application for: Option1" taken from the dropdown selection. Right now it is blank.
Below is the current script that works will for me except the issue above. Any help with this would be appreciated.
<script type="text/javascript">
function updateitemname(){
var dropdown = document.getElementById("membership");
var selection = dropdown.value;
console.log(selection);
var item_name = document.getElementById("item_name");
item_name.value = selection;
}
function func(){
var dropdown = document.getElementById("membership");
var selection = dropdown.value;
console.log(selection);
var amount = document.getElementById("amount");
amount.value = selection;
}
function UpdateForm (obj1) {
var themessage = "You are required to complete the following fields: ";
if (obj1.amount.value=="") {
themessage = themessage + " - Amount";
}
if (obj1.firstname.value=="") {
themessage = themessage + " - First Name";
}
if (obj1.lastname.value=="") {
themessage = themessage + " - Last Name";
}
if (obj1.address1.value=="") {
themessage = themessage + " - Address";
}
if (obj1.city.value=="") {
themessage = themessage + " - City";
}
if (obj1.state.value=="") {
themessage = themessage + " - state";
}
if (obj1.zip.value=="") {
themessage = themessage + " - Zip";
}
//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
obj1.submit();
}
else {
alert(themessage);
return false;
}
obj1.item_name.value = "Application for: " + obj1.item_name.value;
obj1.os0.value = obj1.firstname.value + " " + obj1.lastname.value + " Address: " + obj1.address1.value + " " + obj1.address2.value + ", " + obj1.city.value + ", " + obj1.state.value + " " + obj1.zip.value; // + obj1.myopt4.value + ...
obj1.os1.value = obj1.class_year.value;
}
</script>
<!-- content -->
<form method="post" name="donationform" id="donationform" action="https://www.sandbox.paypal.com/" onsubmit="this.target='paypal'; return UpdateForm(this);">
<input type="hidden" name="business" value="sb-fzhc018066100#business.example.com">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="cmd" value="_xclick">
<table width="550" border="1" cellspacing="1" cellpadding="1">
<tr>
<td width="122">Membership:</td>
<td width="268">
<select id="membership" onchange="func()"; "updateitemname()">
<option selected="selected"></option>
<option value="10.00">Option1 $10.00 USD</option>
<option value="100.00">Option2 $100.00 USD</option>
</select></td>
<td width="168"><input name="amount" type="text" id="amount" maxlength="6" /></td>
</tr>
<!--<tr>
<td>For:</td>
<td><input type="text" name="item_name" size="38" value=""></td>
</tr>
--><tr>
<td>First Name:</td>
<td><input name="firstname" type="text" id="firstname" size="38" value="" ></td>
<td> </td>
</tr>
<tr>
<td>Last Name :</td><td><input name="lastname" type="text" id="lastname" size="38" value="" ></td>
<td> </td>
</tr>
<tr>
<td>Address 1 :</td><td><input name="address1" type="text" id="address1" size="38" value="" ></td>
<td> </td>
</tr>
<tr>
<td>Address 2 :</td><td><input name="address2" type="text" id="address2" size="38"></td>
<td> </td>
</tr>
<tr>
<td>City:</td><td><input name="city" type="text" size="38" id="city" value="" ></td>
<td> </td>
</tr>
<tr>
<td>State:</td><td><input name="state" type="text" size="38" id="state" value="" ></td>
<td> </td>
</tr>
<tr>
<td>Zip:</td><td><input name="zip" type="text" size="38" id="zip" value="" ></td>
<td> </td>
</table>
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="item_name" id="item_name" value="" />
<input type="hidden" name="on0" value="Member">
<input type="hidden" name="os0" value="">
<input type="hidden" name="bn" value="PP-DonationsBF">
<input type="hidden" name="on1" value="Class Year">
<input type="hidden" name="os1" value="">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<br /><br />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="/pixel.gif" width="1" height="1">
</form>
Related
I have a 2 row staticly its a default. and i want to add more rows in below the default rows.. and i dont knwo how to delete child row without deleting parent row..
My parent row is that default two rows. i dont want to delete that two rows.. i want to delete child rows only..
var ctr = 1;
var FieldCount = 1;
$('#cashTable').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cashacc = 'cashacc' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">Choose an Items</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
// delete row
$(document).ready(function() {
$('.dlt-icon').click(DeleteRow);
});
function DeleteRow() {
$(this).parents('tr').first().remove();
}
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<thead>
<tr>
<th>A/c Code</th>
<th>Account Name*</th>
<th>Narration*</th>
<th>Debit*</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<!-- First row -->
<td>
<input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/>
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon button-add">
</td>
</tr>
<!-- Second Row -->
<tr id="sndRow">
<td>
<input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
<option value="#">Choose and items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" />
</td>
<td>
<input type="number" id="accCredit" class="form-control" name="accCredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon">
</td>
</tr>
</tbody>
</table>
If you arent understand please let me knw..
if you dont want to delete first two row that already created, then use .jsrow as below
Another thing that you need to understand is tha use of classes, you added class button-add in both button add and remove, so see my code and correct it.
var ctr = 1;
var FieldCount = 1;
$('#cashTable').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cashacc = 'cashacc' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">Choose an Items</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
// delete row
});
$(document).on( 'click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<thead>
<tr>
<th>A/c Code</th>
<th>Account Name*</th>
<th>Narration*</th>
<th>Debit*</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<!-- First row -->
<td>
<input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/>
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon ">
</td>
</tr>
<!-- Second Row -->
<tr id="sndRow">
<td>
<input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
<option value="#">Choose and items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" />
</td>
<td>
<input type="number" id="accCredit" class="form-control" name="accCredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon">
</td>
</tr>
</tbody>
</table>
I want to calculate the Total Price for the order. I got a formula::
TotalWithoutTax = (UnitPrice*Quantity)+Transportation+Premium-Discount
TotalAmtInclTax = TotalWithoutTax + TotalTax
But I cannot get the output. Please help me and give me some advise on this. Thank You.
Javascript:
function calcPrice(qty[], unit_price[], gp[], discount[], totalwithouttax, totaltax, totalamtincltax) {
var quantity = document.getElementById('qty[]').value;
var unitPrice = document.getElementById('unit_price[]').value;
var premium = document.getElementById('gp[]').value;
var discount = document.getElementById('discount[]').value;
var transportation = document.getElementById('transportation[]').value;
var totalwithouttax = (unitPrice * quantity) + premium + transportation - discount;
document.getElementById(totalwithouttax).value = Math.round(totalwithouttax);
return true;
var totalwithouttax = document.getElementById('totalwithouttax').value;
var totaltax = document.getElementById('totaltax').value;
var totalamtincltax = totalwithouttax + totaltax;
document.getElementById(totalamtincltax).value = Math.round(totalamtincltax);
return true;
}
View:
<!-- **************************** START OF ITEM LIST 1 ************************ -->
<tr class="item-details">
<td><span class="rowNumber">1</span></td>
<td class="">
<?php
$options = array(
'' => '~Choose An Item~'
);
foreach ($item as $rows){
$options[$rows->id] = $rows->item_name;
}
$select = array(
'id' => 'item_name',
'class' => 'form-control'
);
echo form_dropdown('item_name[]', $options,set_value('item_name'),$select);
?>
</td>
<td class=""><input type="number" class="item-qty" name="qty[]" /></td>
<td><input type="number" name="weight[]" class="weight" /></td>
<td><input type="number" name="transportation[]" class="transporation" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td><input type="text" id="gp[]" name="gp[]" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td><input type="text" id="discount[]" name="discount[]" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td><input type="text" id="unit_price[]" name="unit_price[]" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td align="right">
<input type="text" id="totalwithouttax" name="totalwithouttax" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" readonly>
</td>
<td align="right">
<input type="text" id="totaltax" name="totaltax" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" readonly>
</td>
<td align="right">
<input type="text" id="totalamtincltax" name="totalamtincltax" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" readonly>
</td>
</tr><br/>
document.getElementById("totalwithouttax").value=Math.round(totalwithouttax);
this can solve a lot of issues a think
I'm trying to make an invoice script with PHP+MySQL. I made my Invoice Entry Screen. Everything working perfectly. I also added "Add New Line" button.
Here is the problem, when I clicked the "Add New Line" all functions which used on first line are disabled. I do not have enough knowledge on JS.
Here are the Codes:
PHP:
<div class="table-striped" id="dataTable">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Product No</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="ekleaq">
<tr>
<td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td>
<td>
<div class="col-xs selectContainer">
<select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])">
<?php
while($row = $result1->fetch_assoc()){
unset($id, $name, $ax1, $ax2);
$id = $row['inv_products_id'];
$name = $row['inv_products_no'];
$ax1 = $row['inv_products_desc'];
$ax2 = $row['inv_products_price'];
echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>';
}
?>
</select>
</div>
</td>
<td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td>
<td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td>
<td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td>
<td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td>
<td><button type="button" class="btn btn-default addButton" id="ekle"><i class="fa fa-plus"></i></button></td>
</tr>
</tbody>
</table>
</div>
JS:
<script>
$("#ekle").click(function(){
$("#ekleaq")
.append('<tr><td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td><td> \
<div class="col-xs selectContainer"><select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])"> "<?php while($row = $result1->fetch_assoc()){ unset($id, $name, $ax1, $ax2);$id = $row['inv_products_id'];$name = $row['inv_products_no'];$ax1 = $row['inv_products_desc'];$ax2 = $row['inv_products_price'];echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>'; } ?>" </select> \
</div></td><td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td><td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td><td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td><td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td></tr>');
});
function ShowData(obj)
{
document.getElementById('decription1').value = obj.getAttribute('data-ax1');
document.getElementById('price1').value = obj.getAttribute('data-ax2');
}
function CalculateData(input)
{
price = document.getElementById('price1');
quantity = document.getElementById('quantity1');
amount1.value = price.value * quantity.value;
}
</script>
I have a form, echo'd from a php page, and I need to error handle multiple text fields
the 'phone' field is not meant to have more than 10 NUMBERS
the 'fname', 'oname' and 'sname' are meant to have only letters
and the 'date' is meant to have only date format.
How do i achieve this using javascript?
echo '
<html>
<head>
<title>Member Registration</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<!-- USE JAVASCRIPT FOR ERROR HANDLING -->
<body>
<h1>Member Registration</h1>
<form method="POST" enctype="multipart/form-data" action="register.php" name="regform" onsubmit="return validateForm();return allnumeric()">
<table>
<tr>
<td><label for="fname">First name: </label> <input class="fields" type="text" name="fname" value="" required></td>
<td><label for="sname">Surname: </label> <input class="fields" type="text" name="sname" value="" required></td>
<td><label for="oname">Other names: </label> <input class="fields" type="text" name="oname" value="" required></td>
</tr>
<tr>
<td>Choose Profile Picture:</td><td> <input type="file" name="image" id="file" class="fields"></td>
</tr>
<tr>
<td><label for="nationalid" >National ID: </label> <input class="fields" type="text" name="nationalid" value="" required></td>
<td><label for="dob">Date: </label><input class="fields" type="text" name="dob" required></td>
</tr>
<tr>
<td><label for="email">Email: </label> <input class="fields" type="text" name="email" value="" required></td>
</tr>
<tr>
<td><label for="phone">Phone Number: </label> <input class="fields" type="text" name="phone" value="" required></td>
</tr>
<tr>
<td><label for="gender">Male</label><input type="radio" value="M" name="gender" required></td>
<td><label for="gender">Female</label><input type="radio" value="F" name="gender" required></td>
</tr>
<tr>
<td><input type="submit" value="Submit" name="submit" onclick="return matchcheck"></td>
</tr>
</table>
</form>
</body>
</html>';
here is the script i have written so far
function validateForm()
{
var x=document.forms["regform"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
function isNumeric(){
var a = document.getElementById('phone').value;
var b = /^\d+$/;
if(a.search(b) == -1)
{
alert(Must be Interger);
return false;
}
}
</script>
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>