JavaScript - Funky Forms (can You Do This?)

So I'm re-writing my procedural Back Jack program to be Object Oriented so that I can add a split option and some other features and I've run into this weird bug...

This is the beginning of the function that assembles the HTML for each card when it is added.


hand.prototype.createCardsHTML = function (cardNum) {
console.log(this.cards);
console.log(this.cards[cardNum]);
console.log(this.cards[cardNum].name);
if(this.player == "dealer" && cardNum == 0){
this.cards[cardNum].imgHTML = '<img src="images/cards/b2fv.png" alt="dealer pocket" />';
}
else{
this.cards[cardNum].imgHTML = '<img src="images/cards/' + this.cards[cardNum].image +'" alt="' + this.cards[cardNum].name + ' of ' + this.cards[cardNum].suit +'s" />';
}

attached is a screen shot of the console.log reports, as you can see the object get stored in the array but for whatever reason I can't access it's individual properties. This only occurs when the hit function is called, not when the initial hands are generated. I'm really confused so any help is appreciated. Also here is the entire script (note: it's very long, a bit disorganized and not yet complete)

// JavaScript Document

// JavaScript Document


window.onload = blackJackTable;

function blackJackTable () {

//set-ables
var insCost = 50;
var dlrHitsOn = 17;
var minBet = 10;
var bank = 500;

//Utilities
var usedCards = new Array(53);
var roundOver = true;
var allBetsPlaced = false;
var dealerWent = false;
//var dlrIncrement = 0;
//var plrIncrement = 0;

//Load Objects
loadJSON("data.json");
function loadJSON(url) {
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = url;
headID.appendChild(newScript);
newScript.onreadystatechange= function () {
if (this.readyState == 'complete' || this.readyState == 'loaded') startGame();
}
newScript.onload= startGame;
}

function startGame() {

//console.log(deck);

//construct players
function player(playerIdent){
this.lastBet = 0;
this.bet = 0;
this.playerName = playerIdent;
this.hands = new Array();
this.betPlaced = false;
this.bank = bank;
this.insured = false;
}

//Construct Hands
function hand(playerName, id, bet) {
this.total = 0;
this.locked = false;
this.over = true;
this.player = playerName;
this.id = id;
this.bet = bet;
this.aces = 0;
this.handDiv = new Array();
this.cards = this.newCard(2); // adds to cards at random to hand, updates aces and total
}

//function for adding cards to a hand
hand.prototype.newCard = function (howMany){
var cards = new Array();
for(i=0; i<howMany; i++){
var card;
do {
card = Math.floor(Math.random() * 52);
}
//Check to see if the card is in use
while (usedCards[card]);

//Add card to used array
usedCards[card] = true;

var nextCard = cards.length;
cards[nextCard] = deck[card];

//check for ace
if(cards[nextCard].value == 11){
this.aces += 1;
//check for dealer ace in second slot
if(this.player == "dealer" && cards.length == 2){
//call offer insurance if dealer has ace in second slot
this.offerIns();///!!! re-write to reference hand not player
}
}
this.total += cards[nextCard].value;
}
//update player total
return cards;
}

//DOM commands to generate dealer area HTML
player.prototype.generateDlrHTML = function () {
this.dlrRegion = document.getElementById('dealer-region');

//creates a div for dealer hand
this.plrHands = document.createElement('div');
//sets the class name for dealer hand div
this.plrHands.setAttribute('class', 'dealer-hands');
//adds dealerhand div to dlrRegion div
this.dlrRegion.appendChild(this.plrHands);


//creates a div for dealer total
this.dealerTotalRegion = document.createElement('div');
//sets the class name for dealer hand div
this.dealerTotalRegion.setAttribute('class', 'dealer-total');
//adds dealertotal div to dlrRegion div
this.plrHands.appendChild(this.dealerTotalRegion);
}

//DOM commands to generate each player area HTML
player.prototype.generatePlrHTML = function () {
this.plrRegion = document.getElementById('players-region');

//creates a div for player hands
this.plrHands = document.createElement('div');
//sets the class name for player hands div and adds it to region
this.plrHands.setAttribute('class', 'hands');
this.plrRegion.appendChild(this.plrHands);

//Create player bet and bank region
this.hud = document.createElement('div');
//sets the class name for player hud and adds to region
this.hud.setAttribute('class', 'hud');
this.plrRegion.appendChild(this.hud);

//Create bank display
this.bankDisplay = document.createElement('span');
//sets the class name for player hud and adds to region
this.bankDisplay.setAttribute('class', 'bank-display');
this.hud.appendChild(this.bankDisplay);

//Create bet display
this.betDisplay = document.createElement('span');
//sets the class name for player hud and adds to region
this.betDisplay.setAttribute('class', 'bet-display');
this.hud.appendChild(this.betDisplay);

//Create bet field
this.betField = document.createElement('input');
//sets the class name for player hud and adds to region
this.betField .setAttribute('class', 'bet-input');
this.betField .setAttribute('type', 'text');
this.betField .setAttribute('value', 'bet here');
this.betField .setAttribute('name', 'bet-input');
this.hud.appendChild(this.betField );

//Create bet Button
this.betBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.betBtn.setAttribute('class', 'bet-btn');
this.betBtn.setAttribute('type', 'button');
this.betBtn.setAttribute('value', 'Bet');
this.betBtn.setAttribute('name', 'Bet');
this.hud.appendChild(this.betBtn);
var subvertEvent = this;
this.betBtn.onclick = function () { subvertEvent.placeBet();};

//Create deal button
this.dealBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.dealBtn.setAttribute('class', 'deal-btn');
this.dealBtn.setAttribute('type', 'button');
this.dealBtn.setAttribute('value', 'Deal');
this.dealBtn.setAttribute('name', 'Deal');
this.hud.appendChild(this.dealBtn);
this.dealBtn.onclick = function () { subvertEvent.deal();};

}

//DOM commands to create hand HTML
player.prototype.createHandHTML = function (handNum){
//for(i=0; i<this.hands.length; i++){
//Create a hand div
this.hands[handNum].handDiv = document.createElement('div');
//sets the class name for player hud and adds to region
var handClass = 'hand-' +this.hands[handNum].id;
this.hands[handNum].handDiv.setAttribute('class', handClass);
this.plrHands.appendChild(this.hands[handNum].handDiv);
this.hands[handNum].createHandCtrlHTML(handNum);
//}
}


//Hit - adds and displays card to hand
hand.prototype.hit = function () {
this.cards.push(this.newCard(1));
var cardNum = this.cards.length -1;
this.createCardsHTML(cardNum);
}

//Stand - Locks hand - If all hands are locked triggers dealersTurn()
hand.prototype.stand = function () {
//lock this hand
this.locked = true;
if(checkAllLocked == true){
dealersTurn();
}
}

//Double Down - doubles bet on hand calls hit for a single card then forces a stand.
hand.prototype.doubleDown = function () {
if (this.total > 0 && this.cards.length == 2){
//double bet
this.bet = this.bet * 2;
//!!!update bet
//draw a card
this.hit();
//force player to stand
this.stand();
}
else{
var message = "Sir/Maddam you cannot double down at this time.";
dealerSays(message, "okay");
}
}

//Split - Creates a new player hand and assigns a new bet, moves cards as appropriate.
hand.prototype.splitHand = function () {

}

//Creates hand control HTML
hand.prototype.createHandCtrlHTML = function (handNum) {
if(this.player != "dealer"){

//hand Control Region
this.handControl = document.createElement('div');
//sets the class name for player hud and adds to region
this.handControl.setAttribute('class', 'hand-control');
this.handDiv.appendChild(this.handControl);

//Create hit button
this.hitBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.hitBtn.setAttribute('class', 'hit-btn');
var btnId = 'hit-btn-' + this.player + '-' + this.id;
this.hitBtn.setAttribute('id', 'btnId');
this.hitBtn.setAttribute('type', 'button');
this.hitBtn.setAttribute('value', 'Hit');
this.hitBtn.setAttribute('name', 'Hit');
this.handControl.appendChild(this.hitBtn);
var subvertEvent = this;
this.hitBtn.onclick = function () { subvertEvent.hit();};

//Create Stand button
this.standBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.standBtn.setAttribute('class', 'hit-btn');
var btnId = 'stand-btn-' + this.player + '-' + this.id;
this.standBtn.setAttribute('id', 'btnId');
this.standBtn.setAttribute('type', 'button');
this.standBtn.setAttribute('value', 'Stand');
this.standBtn.setAttribute('name', 'Stand');
this.handControl.appendChild(this.standBtn);
this.standBtn.onclick = function () { hands[handNum].stand();};

//Create Double Down button
this.dDBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.dDBtn.setAttribute('class', 'hit-btn');
var btnId = 'doubledown-btn-' + this.player + '-' + this.id;
this.dDBtn.setAttribute('id', 'btnId');
this.dDBtn.setAttribute('type', 'button');
this.dDBtn.setAttribute('value', 'Double Down');
this.dDBtn.setAttribute('name', 'Double Down');
this.handControl.appendChild(this.dDBtn);
this.dDBtn.onclick = function () { hands[handNum].doubleDown();};

//Create Split button
this.splitBtn = document.createElement('input');
//sets the class name for player hud and adds to region
this.splitBtn.setAttribute('class', 'hit-btn');
var btnId = 'split-btn-' + this.player + '-' + this.id;
this.splitBtn.setAttribute('id', 'btnId');
this.splitBtn.setAttribute('type', 'button');
this.splitBtn.setAttribute('value', 'Double Down');
this.splitBtn.setAttribute('name', 'Double Down');
this.handControl.appendChild(this.splitBtn);
this.splitBtn.onclick = function () { hands[handNum].splitHand();};
}

}


//Actived when used hits "deal" button - Adds a hand object to player object if appropriate //!!!Does not support multiplayer by design
player.prototype.deal = function () {
if(allBetsPlaced == true && roundOver == true){
//wipes old hands
clearHands();
//adds a new hand
players[0].newHand();
this.newHand();
//sets round over to false as this begins the new round
roundOver = false;
}
}

//New hand function creates a new hand called by deal and split
player.prototype.newHand = function () {
var handIdPass = this.hands.length + 1;
this.hands.push(new hand(this.playerName, handIdPass, this.bet));
var handNum = this.hands.length - 1;
//alert(this.hands.length);
this.createHandHTML(handNum);
for (i=0; i<this.hands[handNum].cards.length; i++){
this.hands[handNum].createCardsHTML(i);
}
}


//DOM commands to create cards
hand.prototype.createCardsHTML = function (cardNum) {
console.log(this.cards);
console.log(this.cards[cardNum]);
console.log(this.cards[cardNum].name);
if(this.player == "dealer" && cardNum == 0){
this.cards[cardNum].imgHTML = '<img src="images/cards/b2fv.png" alt="dealer pocket" />';
}
else{
this.cards[cardNum].imgHTML = '<img src="images/cards/' + this.cards[cardNum].image +'" alt="' + this.cards[cardNum].name + ' of ' + this.cards[cardNum].suit +'s" />';
}
this.cards[cardNum].cardDiv = document.createElement('div');
var cardId = 'card-' + this.cards[cardNum].id;
this.cards[cardNum].cardDiv.setAttribute('id', cardId);
$(this.cards[cardNum].cardDiv).hide();
this.cards[cardNum].cardDiv.innerHTML = this.cards[cardNum].imgHTML;
this.handDiv.appendChild(this.cards[cardNum].cardDiv);
$(this.cards[cardNum].cardDiv).fadeIn(1000);
}
.....

I'm using the autofill forms plugin for firefox which can be found he

https://addons.mozilla.org/en-US/firefox/addon/4775

I use it to automatically fill various web forms, duh. But I would like certain values to be chosend randomly from a list I create.

I contacted the developer and he said the add on probably does not need a new feature because there is a 'dynamic tags' function to fill certain forms with dynamic values (e.g. the current time or date). He has given over the project to another developer and told me I probably would find a solution in a good javascript programming forum.

So here I am! Can anyone help me with this? Basically, I just need a javascript code which chooses on item from an array randomly, I guess? I'm not a programmer myself, so any help would be greatly (!) appreciated.

Thanks a lot in advance for any further guidance!

Note: Here are sample dynamic tags from the plugin:

<datetime> new Date().toLocaleString()
<useragent> navigator.userAgent
<langcode> navigator.language
<resolution> screen.width+'x'+screen.height
<clipboard> this.getClipboardText()

Forgive me if this isn't in the right spot.

I'm new at php and java so bear with me.

I have small form I found and modified. This works as I wanted it to.
Code:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function solveALK(form) {
var alkalinity = eval(form.alkalinity.value);
var alkneeds = eval(form.alkneeds.value);

var change = (alkneeds) - (alkalinity);
var add1 = (change) / (10) * (0.075) * (1.5) * (16);
var add2 = (add1) / (16);


form.alkchange.value = change;
form.addoz.value = add1;
form.addlbs.value = add2;
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<center>

<table>
<tr><td>
</td>
</tr>
</table>

<form method=post name=alkform>
<table border=4>

<tr>
<td align=center>
Alkalinity
</td>
<td align=center>
<input type=text name=alkalinity size=3>
</td>
<td align=center>
Needs to be:
</td>
<td align=center>
<input type=text name=alkneeds size=3>
</td>
</tr>
<tr>
<td align=center>
Change required:
</td>
<td colspan=3 align=center>
<input type=text name=alkchange size=3>
</td>
</tr>
<tr>
<td align=center>
Add this amount
</td>
<td colspan=3 align=center>
<input type=text name=addoz size=3>oz
</td>
</tr>
<tr>
<td align=center>
Add this amount
</td>
<td colspan=3 align=center>
<input type=text name=addlbs size=3>lbs
</td>
</tr>
<tr>
<td colspan=4 align=center>
<input type=button name=alk value="Calculate" onClick="javascript:solveALK(this.form)">
</td>
</tr>
</table>

</form>
</center>

However when I put this into my php file, When I add my 2 figures to the input boxes. and click the calculate button, I get a NaN.
I'm thinking it might be because I have 2 forms on my php page.
One area of the page will update the database while this one would just calculate some figures.

Here's the php page that doesn't seem to work.
Code:

<html>
  <head>
  <link rel="stylesheet" type="text/css" href="../style1.css" />
  <title>Pool Log Report</title>
  
<SCRIPT LANGUAGE="JavaScript">
<!-- Chemical calulations -->

<!-- Begin
function solveALK(form) {
var alkalinity = eval(form.alkalinity.value);
var alkneeds = eval(form.alkneeds.value);

var change = (alkneeds) - (alkalinity);
var add1 = (change) / (10) * (0.075) * (1.5) * (16);
var add2 = (add1) / (16);


form.alkchange.value = change;
form.addoz.value = add1;
form.addlbs.value = add2;
}
//  End -->
</script> 
  </head>
  <body class="body">
  <center>
<table class="main1">
<?php
include("update_header.php");
?>

<form action="updated.php" method="post" name="FormName"> 
<tr>
    <td class="main2"><input id="Dayid" name="Dayid" type="text" size="1" value="<?php echo $Dayid ?>" maxlength="2" readonly></td>
    <td class="main3">&nbsp;</td>
    <td class="main3"><input id="patron_loading_max" name="patron_loading_max" type="text" size="1" value="<?php echo $patron_loading_max ?>" maxlength="2"></td>
    <td class="main3"><input id="patron_loading_24hr" name="patron_loading_24hr" type="text" size="1" value="<?php echo $patron_loading_24hr ?>" maxlength="2"></td>
    <td class="main3"><input id="water_clearity__clear" name="water_clearity__clear" type="checkbox" <?php if ($water_clearity__clear == "X") { echo "checked";} ?> value="X"></td>
    <td class="main3"><input id="water_clearity__turbid" name="water_clearity__turbid" type="checkbox" <?php if ($water_clearity__turbid == "X") { echo "checked";} ?> value="X"></td>
    <td class="main3"><input id="water_temp" name="water_temp" type="text" size="1" value="<?php echo $water_temp ?>" maxlength="3"></td>
    <td class="main3"><input id="psi" name="psi" type="text" size="1" value="<?php echo $psi ?>" maxlength="3"></td>
    <td class="main3"><input id="gpm" name="gpm" type="text" size="1" value="<?php echo $gpm ?>" maxlength="3"></td>
    <td class="main3"><input id="drain_back" name="drain_back" type="text" size="1" value="<?php echo $drain_back ?>" maxlength="5"></td>
    <td class="main3"><input id="chlorine_am1" name="chlorine_am1" type="text" size="1" value="<?php echo $chlorine_am1 ?>" maxlength="5"></td>
    <td class="main3"><input id="chlorine_am2" name="chlorine_am2" type="text" size="1" value="<?php echo $chlorine_am2 ?>" maxlength="5"></td>
    <td class="main3"><input id="ph_am1" name="ph_am1" type="text" size="1" value="<?php echo $ph_am1 ?>" maxlength="5"></td>
    <td class="main3"><input id="ph_am2" name="ph_am2" type="text" size="1" value="<?php echo $ph_am2 ?>" maxlength="5"></td>
    <td class="main3"><input id="chlorine_pm1" name="chlorine_pm1" type="text" size="1" value="<?php echo $chlorine_pm1 ?>" maxlength="5"></td>
    <td class="main3"><input id="chlorine_pm2" name="chlorine_pm2" type="text" size="1" value="<?php echo $chlorine_pm2 ?>" maxlength="5"></td>
    <td class="main3"><input id="ph_pm1" name="ph_pm1" type="text" size="1" value="<?php echo $ph_pm1 ?>" maxlength="5"></td>
    <td class="main3"><input id="ph_pm2" name="ph_pm2" type="text" size="1" value="<?php echo $ph_pm2 ?>" maxlength="5"></td>    
    <td class="main3"><input id="combined_chl" name="combined_chl" type="text" size="1" value="<?php echo $combined_chl ?>" maxlength="4"></td>
    <td class="main3"><input id="alkalinity" name="alkalinity" type="text" size="1" value="<?php echo $alkalinity ?>" maxlength="3"></td>
    <td class="main3"><input id="chemicals_add" name="chemicals_add" type="text" size="1" value="<?php echo $chemicals_add ?>" maxlength="55"></td>
    <td class="main3"><input id="chemicals_qty" name="chemicals_qty" type="text" size="1" value="<?php echo $chemicals_qty ?>" maxlength="55"></td>
    <td class="main3"><input id="super_oxidation" name="super_oxidation" type="text" size="1" value="<?php echo $super_oxidation ?>" maxlength="3"></td>
    <td class="main4" class="main3">&nbsp;</td>
</tr>
<tr>
    <td class="main4" colspan="24">&nbsp;</td>
</tr>    
<form method=post name=alkform>
<tr>
    <td class="main2" colspan="3">&nbsp;</td>
    <td class="main2" colspan="5"><b>Whirlpool Calculations</b></td>
    <td class="main2" colspan="5">&nbsp;</td>
    <td class="main2" colspan="5"><b>Chlorine Shocking</b></td>
    <td class="main2" colspan="2"><b>FAS-DPD</b></td>
    <td class="main2" colspan="3"><b>Chlorine No-Shock</b></td>
    <td class="main2">&nbsp;</td>
</tr>
<tr>
    <td class="main4" rowspan="3" colspan="3">&nbsp;</td>
    <td class="main2" colspan="2">Alkalinity</td>
    <td class="main2"><input type=text name=alkalinity size=3></td>
    <td class="main2" colspan="2">&nbsp;</td>
    <td class="main2" colspan="2">Calcium</td>
    <td class="main2"><input id="Calcium" name="Calcium" type="text" size="1" value="<?php echo $Calcium ?>" maxlength="3"></td>
    <td class="main2" colspan="2">&nbsp;</td>
    <td class="main2" colspan="3">Drops</td>
    <td class="main2"><input id="R0871_drops" name="R0871_drops" type="text" size="1" value="<?php echo $R0871_drops ?>" maxlength="3"></td>
    <td class="main2" colspan="2">Breakpoint</td>
    <td class="main2"><?php echo $Breakpoint ?></td>
    <td class="main2" colspan="2">Needs to be:</td>
    <td class="main2"><input id="Chl_Needs" name="Chl_Needs" type="text" size="1" value="<?php echo $Chl_Needs ?>" maxlength="3"></td>
    <td class="main4" rowspan="3">&nbsp;</td>
</tr>
<tr>
    <td class="main2" colspan="2">Needs to be:</td>
    <td class="main2"><input type=text name=alkneeds size=3></td>
    <td class="main2">Change:</td>
    <td class="main2"><input type=text name=alkchange size=3></td>
    <td class="main2" colspan="2">Needs to be:</td>
    <td class="main2"><input id="Cal_Needs" name="Cal_Needs" type="text" size="1" value="<?php echo $Cal_Needs ?>" maxlength="3"></td>
    <td class="main2"">Change:</td>
    <td class="main2"><?php echo $Cal_Change ?></td>
    <td class="main2" colspan="3">Free Chl</td>
    <td class="main2"><?php echo $Free_Chl ?></td>
    <td class="main2">ppm</td>
    <td class="main2" colspan="2">Amt to shock</td>
    <td class="main2" colspan="2">Change Required</td>
    <td class="main2"><input id="Chl_Change" name="Chl_Change" type="text" size="1" value="<?php echo $Chl_Change ?>" maxlength="3" readonly></td>

</tr>
<tr>
    <td class="main2" colspan="3">Add Sodium BiCarb</td>
    <td class="main2"><input type=text name=addoz size=3></td>
    <td class="main2">Oz</td>
    <td class="main2" colspan="3">Add Calcium</td>
    <td class="main2"><?php echo $Cal_Add_oz ?></td>
    <td class="main2">Oz</td>
    <td class="main2" colspan="3">Drops</td>
    <td class="main2"><input id="R0003_drops" name="R0003_drops" type="text" size="1" value="<?php echo $R0003_drops ?>" maxlength="3"></td>
    <td class="main2">&nbsp;</td>
    <td class="main2"><?php echo $AmtShk_oz ?></td>
    <td class="main2">oz</td>
    <td class="main2" colspan="2">Add this in oz</td>
    <td class="main2"><input id="Chl_Add" name="Chl_Add" type="text" size="1" value="<?php echo $Chl_Add ?>" maxlength="3"></td>
</tr>
<tr>
    <td class="main4" colspan="6">&nbsp;</td>
    <td class="main2"><input type=text name=addlbs size=3></td>        
    <td class="main2">Lbs</td>
    <td class="main2" colspan="3">&nbsp;</td>
    <td class="main2"><?php echo $Cal_Add_lbs ?></td>
    <td class="main2">Lbs</td>
    <td class="main2" colspan="3">Combined Chl</td>
    <td class="main2"><?php echo $Comb_Chl ?></td>
    <td class="main2">ppm</td>
    <td class="main2"><?php echo" ".number_format($AmtShk_gal,2); ?></td>
    <td class="main2">Gal</td>
    <td class="main4" colspan="6">&nbsp;</td>
</tr>
<tr>
    <td colspan="24" align="center" class="main2">Make your changes and click the update button below.</td>
</tr>
<tr>     
     <td colspan="24" align="center" class="main2"><input type=button name=alk value="Calculate" onClick="javascript:solveALK(this.form)"></form> <input type="button" value="Update" onclick="this.form.action='updated.php'; this.form.submit();"><input type="hidden" name="id" value="id">  <INPUT TYPE="button" VALUE="Back" onClick="history.go(-1);return true;"></td>
                                                       
</tr>
</table>
</form>
</center>

If I am correct that I need to separate the forms. How do I do so? Or am I going about this wrong?

Hello,

I have a tricky one here. What I have is a form where the user would enter in their food recipe. There is nothing clever in that until I need them to enter in the ingredients and the quantity into 2 seperate fields. The issue is that I don't know how many different ingredients there would be for the recipe so from within the form before the record is saved I need them to be able to fill out the 2 fields as many times as they need to (pressing a button each time) and I would have thought for the data to be held in a javascript array that i could then write away into the mysql table?

I probably haven't made much sense.

Can anyone help?

Hi , I want to make few forms but 1 submit button.
I want to do 1 page , 5 forms , 1 submit button so when i click on the submit button it will send the 5 forms as 1 form.
how I can so that?
thanks , Mor.