50 users online (0 members and 50 guests)  


  Results 1 to 3 of 3

Related

  1. how to stop javascript via another javascript    Forum: Javascript Forum
    Replies: 0
  2. Form Does Calculations Problem    Forum: HTML Forum
    Replies: 9
  3. Replies: 5
  4. Help required with number calculations    Forum: CGI Perl Forum
    Replies: 7
  1. #1
    country8960's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2008
    Posts
    2

    Question calculations using Javascript

    Im trying to create a Javascript program that calculates a customer�s order from your company based on the quantity of the item and the price entered by the customer and total the complete order. Display the results in an alert dialog box. Provide validation also. Here is my code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="en-us" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title></title>
    <style type="text/javascript">
    
    
    
    
    
    
    
    .style1 {
    	border-style: solid;
    	border-width: 2px;
    }
    function validate_required(field,alerttxt)
    {
    with (field)
    {
    if (value==null||value=="")
      {alert(alerttxt);return false;}
    else {return true}
    }
    }
    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_required(email,"Email must be filled out!")==false)
      {email.focus();return false;}
    }
    }
    </style>
    <style type="text/css">
    .style1 {
    	border-style: solid;
    	border-width: 2px;
    }
    
    function CalculateSum(Atext, Btext, form)
    {
    var A = parseFloat(Atext);
    var B = parseFloat(Btext);
    form.Answer.value = A*75.00 + B*30.00;
    }
    
    // end of JavaScript functions -->
    </SCRIPT>
    
    </style>
    </head>
    
    <body>
    
    <h1>&nbsp;Web Design Company Order Form</h1>
    <p>&nbsp;</p>
    <p>Please Place Your Order Here</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    Item&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    Qty&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    Price&nbsp;</p>
    
    <form name="calculator" method="post">
    
    <table class="style1" style="width: 100%">
    	<tr>
    		<td class="style1" style="height: 56px; width: 574px">&nbsp;Web Pages&nbsp;(Per 
    		Page)</td>
    		<td class="style1" style="height: 56px; width: 114px">
    		<form method="post">
    			<input name="Atext" style="width: 74px; height: 40px" type="text" /></form></td>
    		<td class="style1" style="height: 56px">
    		<form method="post">
    			<input name="priceText1" style="width: 83px; height: 34px" type="text" value="75.00" /></form></td>
    	</tr>
    	<tr>
    		<td class="style1" style="height: 66px; width: 574px">Web Hosting 
    		(Number of Years)</td>
    		<td class="style1" style="height: 66px; width: 114px">
    		<form method="post">
    			<input name="Btext" style="width: 75px; height: 46px" type="text" /></form></td>
    		<td class="style1" style="height: 66px">
    		<form method="post">
    			<input name="priceText2" style="width: 80px; height: 46px" type="text" value="30.00" /></form></td>
    	</tr>
    	<tr>
    		<td style="height: 78px; width: 574px">&nbsp;&nbsp;
    		<form method="post">
    			<input name="Button1" style="width: 102px; height: 21px" type="button" value="Calculate Total" />&nbsp;&nbsp;
    		</form>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
    		<td class="style1" style="height: 78px; width: 114px"></td>
    		<td class="style1" style="height: 78px">
    		<form method="post">
    			<input name="form" style="width: 81px; height: 49px" type="text" /></form></td>
    	</tr>
    </table>
    <p>&nbsp;</p>
    
    <p><input name="ClearButton" style="width: 100px" type="button" value="Clear Field" /></p>
    <form method="post">
    
    </form>
    
    </body>
    
    </html>
    Can someone please help!
    Last edited by vinyl-junkie; 06-28-2008 at 09:07 PM. Reason: Added code tags

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: calculations using Javascript

    One obvious mistake is that you jumbled them up.
    There is no <style type="text/javascript">.
    You could not have a <script> tag inside the <style> tag.

    JS is entirely different from CSS.

    Replace this part:
    Code:
    <style type="text/javascript">
    
    
    
    
    
    
    
    .style1 {
    	border-style: solid;
    	border-width: 2px;
    }
    function validate_required(field,alerttxt)
    {
    with (field)
    {
    if (value==null||value=="")
      {alert(alerttxt);return false;}
    else {return true}
    }
    }
    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_required(email,"Email must be filled out!")==false)
      {email.focus();return false;}
    }
    }
    </style>
    <style type="text/css">
    .style1 {
    	border-style: solid;
    	border-width: 2px;
    }
    
    function CalculateSum(Atext, Btext, form)
    {
    var A = parseFloat(Atext);
    var B = parseFloat(Btext);
    form.Answer.value = A*75.00 + B*30.00;
    }
    
    // end of JavaScript functions -->
    </SCRIPT>
    
    </style>
    to:
    Code:
    <style type="text/css">
    .style1 {
    	border-style: solid;
    	border-width: 2px;
    }
    </style>
    <script type="text/javascript">
    function validate_required(field,alerttxt)
    {
    with (field)
    {
    if (value==null||value=="")
      {alert(alerttxt);return false;}
    else {return true}
    }
    }
    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_required(email,"Email must be filled out!")==false)
      {email.focus();return false;}
    }
    }
    
    function CalculateSum(Atext, Btext, form)
    {
    var A = parseFloat(Atext);
    var B = parseFloat(Btext);
    form.Answer.value = A*75.00 + B*30.00;
    }
    
    // end of JavaScript functions -->
    </SCRIPT>
    This will fix your markup structure, on the other hand, for your validation. Difficult, indeed difficult. You have a lot of forms which I believe is'nt necessary.
    We could fix this one, but we also want our members to learn at the same time. Try to fix the structure of your form, and we'll be glad to whip the code in place for you.

    P.S. You haven't replied on your previous thread, what's the result BTW?
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  3. #3
    Smart Job Board's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    5

    Re: calculations using Javascript

    hm... why There is no <style type="text/javascript">. - no...



Tags for this Thread