SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    REVISED! can anyone help me with a js calculator??

    EDIT - i copied the wrong code on the last post, sorrry. here is the revised post...


    Hi i posted a week or so ago and got some great help here with my school project, now a friend needs help and im posting on behalf of her as i still am useless with Javascript. it is a calculator for a wallpaper site but when we enter the measurements, they disappear, do not display an answer, but do show an answer in the url?? Any help here would be greatfully appreciated

    here is the code....


    HTML Code:
    <body>
    		<div id="frame">
    		
    		<div id="header">
    		
    		<p class="title"><u>Amanda Davidson's Wallpaper World</u> - <u>Calculator In Meters</u></p>
    		
    		</div>
    	
    		<div id="interactiveheader">
    		
    		<table width="455" class="linkstable" align="center">
    		<tr>
    		<td width="54" class="nav"><a href="HomePage.html"><img src="home.gif" alt="Home" style="border:0;"/></a></td>
    		<td width="67" class="nav"><a href="LogInPage.html">Log In</a></td>
            <td width="110" class="nav"><a href="ColourSchemePage.html">Colour Scheme</a></td>
            <td width="114" class="nav"><a href="NewCollectionPage.html">New Collection</a></td>
            <td width="86" class="nav"><a href="CalculatorPage.html">Calculator</a></td>
    		</tr>
    		</table>
    				
    		</div>
    
    		<div id="leftcontent">
    		<!--Images or content will appear here.-->
    		</div>
    
    		<div id="rightcontent">
    
    		<div id="main">
    
    		<p>
    		<!--Information content will be added here, this either being text on now to use the website or a brief introduction to the website.-->
    		Welcome to the Wallpaper Calculator this is the calculator for Metric measurements, enter in your measurements and calulcate the amount of rolls needed to wallpaper your room.</p>
    		<p>Allow 10% extra for pattern matching, based on the average pattern repeat. Please note the quantity shown is an estimate calculated on a standard room layout.</p>
    		<p>You may need to round up your measurements.</p>
    		<h4>Metric Calculator</h4>
            
            <form name="metriccalculator">  
    		<p>Determine the area to cover for each wall:</p>	
            <p>Wall 1: Length
    			  <input type="text" size="10" height="15" name="number1a">
                Height 
                  <input type="text" size="10" height="15" name="number1b">
                  <br/>
    			Wall 2: Length
    			<input type="text" size="10" height="15" name="number2a">
                Height
                <input type="text" size="10" height="15" name="number2b">
    			<br/>
    			Wall 3: Length 
    			<input type="text" size="10" height="15" name="number3a">
                Height
                <input type="text" size="10" height="15" name="number3b">
    			<br/>
    			Wall 4: Length 
    			<input type="text" size="10" height="15" name="number4a">
                Height
                <input type="text" size="10" height="15" name="number4b">
    			<br/>  
    		</p>	
            <p>Determine the area not to cover:</p>    
            <p>Door: Length
    			<input type="text" size="10" height="15" name="number5a">
                Height 
                <input type="text" size="10" height="15" name="number5b">
                <br/>    
    		    Window: Length
    		    <input type="text" size="10" height="15" name="number6a">
                Height 
                <input type="text" size="10" height="15" name="number6b">
                <br />
                Other: Length
                <input type="text" size="10" height="15" name="number7a">
                Height
                <input type="text" size="10" height="15" name="number7b">
              <br />
            	<br />
           	  <input type="image" src="Images/CalculateButton.png" onclick="javascript:multiplymetric();" style="border:0;"/>
            </p>
                
            <p>Your Results:</p>
            <p>Rolls needed: 
    			<input type="text" size="15" height="15" name="total">
            </p>
            
            </form>
            
    		</div>
    		</div>

    and here is the .js file

    Code JavaScript:
    /* Here we have identified which input is being validated, via doment.forms 'myform', and called the element x and y using variables.
    Establishing if the @ position is less than the 2nd along then it would be an incorrect email, and if the . position is closer 
    than 2nd to the end of the string, and if so returning an alert that the information is not correct. Also if the password does not equal 
    exactly to 123 then the information is again incorrect.*/
     
    function validateForm(){
    var x=document.forms["myForm"]["email"].value
    var y= document.forms["myForm"]["password"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
     
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("Not a valid e-mail address");
    return false;
    }
     
    if (y == '') {
    alert('Please enter your password.');
    return false;
    }	
    }
     
    /*This function calculates the amount of rolls that the user will need to cover their room
    Naming each one with a name and a letter (a, b, c etc) allows the equation to be imported into the website.
    Adding a, c, e and g together to create the overall length and timesing it by (b+d+f+h) which is the height to then get to total of the room.
    Subtracting it by the door space and window space that wallpaper is not needed for and then dividing it by 6.6 to gain how much roll is needed
    per square metre.*/
     
    function multiplymetric(){
    a=Number(document.metriccalculator.number1a.value);
    b=Number(document.metriccalculator.number1b.value);
    c=Number(document.metriccalculator.number2a.value);
    d=Number(document.metriccalculator.number2b.value);
    e=Number(document.metriccalculator.number3a.value);
    f=Number(document.metriccalculator.number3b.value);
    g=Number(document.metriccalculator.number4a.value);
    h=Number(document.metriccalculator.number4b.value);
    i=Number(document.metriccalculator.number5a.value);
    j=Number(document.metriccalculator.number5b.value);
    k=Number(document.metriccalculator.number6a.value);
    l=Number(document.metriccalculator.number6b.value);
    m=Number(document.metriccalculator.number7a.value);
    n=Number(document.metriccalculator.number7b.value);
    o=(((a+c+e+g)*(b+d+f+h))-((i+k+m)*(j+l+n)))/6.6
    document.metriccalculator.total.value=o;
    }
     
    /*This function calculates the amount of rolls that the user will need to cover their room
    Naming each one with a name and a letter (a, b, c etc) allows the equation to be imported into the website.
    Adding a, c, e and g together to create the overall length and timesing it by (b+d+f+h) which is the height to then get to total of the room.
    Subtracting it by the door space and window space that wallpaper is not needed for and then dividing it by 74 to gain how much roll is needed
    per square metre.*/
     
    function multiplyimperial(){ 
    a=Number(document.imperialcalculator.number1a.value);
    b=Number(document.imperialcalculator.number1b.value);
    c=Number(document.imperialcalculator.number2a.value);
    d=Number(document.imperialcalculator.number2b.value);
    e=Number(document.imperialcalculator.number3a.value);
    f=Number(document.imperialcalculator.number3b.value);
    g=Number(document.imperialcalculator.number4a.value);
    h=Number(document.imperialcalculator.number4b.value);
    i=Number(document.imperialcalculator.number5a.value);
    j=Number(document.imperialcalculator.number5b.value);
    k=Number(document.imperialcalculator.number6a.value);
    l=Number(document.imperialcalculator.number6b.value);
    m=Number(document.imperialcalculator.number7a.value);
    n=Number(document.imperialcalculator.number7b.value);
    o=(((a+c+e+g)*(b+d+f+h))-((i+k+m)*(j+l+n)))/74
    document.imperialcalculator.total.value=o;
    }
     
    /*This function is for the colours of the website, arranged in an array and is called upon depending on what the user chooses. The array is numbered (0,1,2 etc) this will then be stated in the html pages as the user points the mouse over them. */
     
    function changeBG(whichColor)
    {
    var backColor = new Array(); 
     
    backColor[0] = '#8A8A8A';	
    backColor[1] = '#FF3333';
    backColor[2] = '#FFCC00';
    backColor[3] = '#0099FF';
    backColor[4] = '#009900';
    backColor[5] = '#FFFFFF';
     
    document.bgColor = backColor[whichColor];
    }



    Many thanks for taking time and looking at this

    Alan
    Last edited by Mittineague; May 1, 2011 at 11:31. Reason: reformatting bbcode tags

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The input image to calculate things actually submits the form, as if you used a submit button.

    If you don't want the image to submit the form (wiping out the previously calculated info), have you considered using an ordinary image instead of the input image?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2011
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for the response, ive forwarded my classmate your reply.


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
  •