Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder meth's Avatar
    Join Date
    Jan 2003
    Posts
    262
    Thanks
    0
    Thanked 9 Times in 9 Posts

    document.object.woes

    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:-

    Code:
    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:-

    Code:
    <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?

  • #2
    Regular Coder meth's Avatar
    Join Date
    Jan 2003
    Posts
    262
    Thanks
    0
    Thanked 9 Times in 9 Posts

    solved with getElementById

    Sometimes it's the simplest solutions that I never see.

    Working function:-

    Code:
    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
    }
    Last edited by meth; 04-15-2005 at 01:48 AM.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,048
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •