...

View Full Version : document.object.woes



meth
04-15-2005, 01:07 AM
I have an alteration to do on a multi-page form which was previous in use for single item selection and calculations only.

Now the form has to be altered to process multiple items. My difficulties lie in tackling the javascript calulations for a form that populates dynamically with the number of items that the user previously selects.

Item recordID's are POSTed to this form as an array. The array determines which item records are pulled from the database. The form has, for each record, a textfield for item quantity and subtotal, and a hidden input that holds the item cost price.

Previously, this was calculated by targeting hard coded form field names, however the dynamic nature of this form requires dynamic field naming which I've tackled in php.

Javascript seems to be a bit touchy about which values you use to target a document object. I have a problem with the form calculation function in that I cant seem to get and write values to the form when I frick with the document object names.

Here's the function so far:-



function calcForm(fNum){
fNum =+ ''
cTotal = parseFloat(document.confirmTicketPurchase.total.value)
tCost = "ticketCost"+fNum
cSubTotal = parseFloat(document.confirmTicketPurchase.tCost.value)
tQty = "ticketQty"+fNum
qty = parseFloat(document.confirmTicketPurchase.tQty.value)
if (isNaN(qty)){
alert("You must enter a valid number into the Enter Quantity field")
return false
}
if(qty <=0 || qty % 1 != 0 ){
alert("You must enter a quantity of tickets between 1 and 999 only")
return false
}
costPer = parseFloat(document.confirmTicketPurchase.perticketCost.value)
newSubtotal = costPer*qty
newTotal = newSubtotal - cSubTotal + cTotal
document.confirmTicketPurchase.tCost.value = subtotal
document.confirmTicketPurchase.total.value = newTotal
return true
}


And the form:-



<form action="test_vars.php" name="confirmTicketPurchase" id="confirmTicketPurchase" method="POST">
<table width="100%" border="0" cellpadding="2" cellspacing="1" class="dataTable">
<tr class="trTopRow">
<td colspan="2">You Have Selected The Following Tickets</td>
</tr>
<?php
$fNum = 0;
$sTotal = 0;
do {
$fNum++;
?>
<tr class="trOdd">
<td colspan="2"><strong><?php echo $row_rsTickPurchase['ticketName']; ?></strong></td>
</tr>
<tr class="trEven">
<td width="36%">Enter Quantity:</td>
<td width="64%" class="algn_R"><input name="ticketQty<?php echo $fNum; ?>" type="text" id="ticketQty<?php echo $fNum; ?>" value="1" size="4" maxlength="4" onchange="calcForm(<?php echo $fNum; ?>)" /></td>
</tr>
<tr class="trEven">
<td>SubTotal:</td>
<td class="algn_R">
<?php
$itemNum = $totalRows_rsTickPurchase;
$sTotal = $row_rsTickPurchase['ticketCost1'];
if($fNum == 1){
$loadTotal = $sTotal;
}else{
$loadTotal = $loadTotal + $sTotal;
}
?>
<input name="perticketCost<?php echo $fNum; ?>" type="hidden" id="perticketCost<?php echo $fNum; ?>" value="<?php echo $row_rsTickPurchase['ticketCost1']; ?>" />
<input name="ticketName" type="hidden" id="ticketName" value="<?php echo $row_rsTickPurchase['ticketName']; ?>" />
<input name="ticketID" type="hidden" id="ticketID" value="<?php echo $row_rsTickPurchase['ticketID']; ?>" />
$ <input name="ticketCost<?php echo $fNum; ?>" type="text" id="ticketCost<?php echo $fNum; ?>" value="<?php echo $row_rsTickPurchase['ticketCost1']; ?>" size="12" readonly="true" /></td>
</tr>
<?php
// give form initial total
} while ($row_rsTickPurchase = mysql_fetch_assoc($rsTickPurchase));?>
<tr class="trOdd">
<td>TOTAL:</td>
<td class="algn_R">$
<input name="total" type="text" id="total" value="<?php if($fNum == $itemNum){echo $loadTotal;} ?>" size="12" /></td>
</tr>
<tr>
<td colspan="2">Confirm your selection and proceed to Step 6</td>
</tr>
<tr class="trbtn">
<td colspan="2"><input name="userEmail" type="hidden" id="userEmail" value="<?php echo $_SESSION['email']; ?>" />
<input name="step" type="hidden" id="step" value="6" />
<input name="Submit" type="submit" class="loginBtn" value="Confirm" /></td></tr>
</table>
</form>


As you can see, I'm concatenating the loop iteration number to the form field names that I wish to target with javascript and passing that number to the calcForm() function when it's called (onchange).

In the JS function, I thought it would simply be a matter of converting the loop number to a string and forming a new variable out of the form field name and loop number; then replacing document.form.field.value with document.form.newfield.value.

This approach is returning the error "document.form.newfield" has no properties. So I'm oviously way off the track here; anyone got some pointers?

meth
04-15-2005, 02:38 AM
Sometimes it's the simplest solutions that I never see.

Working function:-



function calcForm(fNum){
fNum += ''
cTotal = parseFloat(document.confirmTicketPurchase.total.value)
cSubTotal = document.getElementById("ticketCost" + fNum).value
cSubTotal = parseFloat(cSubTotal)
qty = document.getElementById("ticketQty" + fNum).value
qty = parseFloat(qty)
if (isNaN(qty)){
alert("You must enter a valid number into the Enter Quantity field")
return false
}
if(qty <=0 || qty % 1 != 0 ){
alert("You must enter a quantity of tickets between 1 and 999 only")
return false
}
costPer = document.getElementById("perticketCost" + fNum).value
costPer = parseFloat(costPer)
newSubtotal = costPer*qty
newTotal = newSubtotal - cSubTotal + cTotal
document.getElementById("ticketCost" + fNum).value = newSubtotal
document.confirmTicketPurchase.total.value = newTotal
return true
}

glenngv
04-15-2005, 05:23 AM
You can also use these if you want to reference by name and not id.

document.confirmTicketPurchase.elements[tCost].value

or

document.confirmTicketPurchase[tCost].value

See my sig for more info on square bracket notation. Knowing how to use it will help you a lot.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum