SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    form calculations before submiting

    Hi

    I just wanted to perform a few simple calculations. for example working out the the difference between two vaues entered into a form.

    The way i wanted to do this is have a cell which is automatically populated with the difference of the two values a user enters.

    i.e before the form is submitted. How can i access the two values in the cells.

    can anyone help

    thanks

  2. #2
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yass2006, you need to give us some more details on what you're trying to do, so we can help you out.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi

    basicly i have a form which i use to enter values into a database table.

    The purpose of the form is to store mobile phone tariff data.

    I have three inputs which are. 1. Contract term in months (eg.12 months) 2. a monthly cost and 3. any discount available.

    I enter the values into the form manually

    The field which i want worked out before submitting is the [min term cost]

    this is monthly cost * contract period - Discount. I want this field to be filled in automatically so that i do not have to do the calculation manually everytime.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yass2006, here is something quick for you, this doesn't validate what the user entered or anything... so if they put in characters instead of numbers, it will not handle any errors..
    Code:
    <html>
    <head>
    <title>Cell Phone</title>
    <script language="javascript">
    function GetTermCost()
    {
    	var oTerm = document.getElementById('Term');
    	var oCost = document.getElementById('Cost');
    	var oDiscount = document.getElementById('Discount');
    	var oTotal =  document.getElementById('Total');
    	
    	oTotal.value = oCost.value * oTerm.value - oDiscount.value;
    }
    
    </script>
    </head>
    
    <body>
    <label>Contract Term <input id="Term" type="text" value="" /></label> <br />
    <label>Monthly Cost <input id="Cost" type="text" value="" /></label> <br />
    <label>Discounts <input id="Discount" type="text" value="" /></label> <br />
    <button id="btn1" onClick="GetTermCost();">Get Cost</button>
    <br /><br />
    <label>Total <input id="Total" type="text" value="" /></label>
    </body>
    </html>

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    My input fields are labelled via the name=" " attribute

    I have changed the code to the following - however it does not work. It works fine with document.getElementById

    where am i going wrong

    <html>
    <head>
    <title>Cell Phone</title>
    <script language="javascript">
    function GetTermCost()
    {
    var aTerm = document.getElementsByName('Term');
    var aCost = document.getElementsByName('Cost');
    var aDiscount = document.getElementsByName('Discount');
    var aTotal = document.getElementsByName('Total');

    aTotal.value = aCost.value * aTerm.value - aDiscount.value;
    }

    </script>
    </head>

    <body>
    <label>Contract Term <input name="Term" type="text" value="" /></label>
    <br />
    <label>Monthly Cost <input name="Cost" type="text" value="" /></label> <br />
    <label>Discounts <input name="Discount" type="text" value="" /></label> <br />
    <button id="btn1" onClick="GetTermCost();">Get Cost</button>
    <br /><br />
    <label>Total <input name="Total" type="text" value="" /></label>
    </body>
    </html>


    thanks

  6. #6
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yass2006, It's highly recommended that you assign an ID to your elements and use the getElementById to access them. assigning an ID to each element will ensure that you have a unique element (because you can't assign the same id to 2 elements) as opposed to the name attribute. you can assign the same name to as many elements as you want.
    getElementById returns just one object.
    getElementsByName returns an array of all the objects with the name you pass in.

    again, in your case, you want to assign and id to your inputs and use getElementById to access them. you can still leave the name attributes if you really want to

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi thats fine Ill do that

    However i got the above to work with [0] at the end.

    ive actually rewritten the script to the following. it seems to work but the answer to the calculation is totally incorrect. Is there something wrong with my formula. Ive used brackets as youwould in maths

    <script language="javascript">
    function GetTermCost()
    {
    var aHandset_Cost = document.getElementsByName('Handset_Cost')[0];
    var aMonthly_Cost = document.getElementsByName('Monthly_Cost')[0];
    var aContract_Period = document.getElementsByName('Contract_Period')[0];
    var aDiscount = document.getElementsByName('Discount')[0];
    var aMonths_Free = document.getElementsByName('Months_Free')[0];
    var aMonths_Half_Price = document.getElementsByName('Months_Half_Price')[0];
    var aMin_term_cost = document.getElementsByName('Min_term_cost')[0];

    aMin_term_cost.value = ((aMonthly_Cost.value * aContract_Period.value) + aHandset_Cost.value ) - ((aMonthly_Cost.value * aMonths_Free.value) + ( aMonthly_Cost.value * (aMonths_Half_Price.value/2)) + aDiscount.value);
    }

    </script>


Bookmarks

Posting Permissions

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