Javascript Floor calculator

[mehul12345]

 i need help creating an pplication to calculate flooring costs.  The application should allow the user to enter the room length and width in metres, and select a type of flooring from a set of radio buttons (see Figure 1).
    The program should include the costs for the different types of flooring available.   The flooring comes in packs which each cover 2m2.  The price per pack is as follows:
    Beech           £25
    Maple           £30
    Tile            £20
    Laminate        £10



When the user clicks on the “Calculate cost” button the program should validate the input (see below) and display a quotation, suitably formatted, which includes
•   the type of flooring required
•   the width and length required, and the floor area (length x width)  in m2
•          the number of 2m2 packs required to cover this area
•   the total cost of the packs required 
Note: each pack covers 2m2 and the user will need to purchase sufficient packs to cover the specified floor space.


Before performing the calculation, the application should validate the data entered, ensuring that:
•   The length or width fields are not blank
•   The length and width entered are valid numbers (do not contain letters or other characters)
•   The length and width entered are within the range 1m - 50m inclusive
•   A flooring type is selected

If any of these conditions are not met, the application should display an appropriate message (see below for examples), and not go on to perform the calculation.



i also need it to that keep a record of all quotations made.  Bargain Flooring plans to use this information to identify which flooring types are most popular.
For each quotation the flooring type, length and width, needs to be stored in appropriate variables or a data structure. The storage of several quotations will require the use of either an array or a collection.
An example of the data that needs to be stored for a quotation:
Flooring Type: Beech        Length: 5.5       Width: 6
Note: There is no need to store the total size or number of packs as this can be calculated from the data.
At any time, the user can click a button to view a summary report containing the following:
•   A table containing a summary of each quotation made (flooring type, length, width, number  of packs and total cost)
•   
•   The number of quotations and their total cost
•   
•   The total amount of flooring (in packs) quoted by flooring type

Is this homework?

Codeigniter has a handy validation class. In addition to this I would use a libray such as jsparsely to parse the data with ajax.

Although the php would guarantee bad input is avoided as you can't be certain with javascript alone, user could disable it.

http://ellislab.com/codeigniter/user-guide/libraries/form_validation.html#validationrules

[mehul12345]

Thank you for your reply, it's coursework, i had the application working but something has gone wrong and i can't figure it out, here is the code:
Javascript code:

<script type="text/javascript">
var Form = document.getElementById('Form');
var output = document.getElementById('output');
var lengthbox = document.getElementById('length');
var widthbox = document.getElementById('width');
var floorRadio = document.getElementByClassName('radio');
var choice = -1;
var flooring = " ";

var prices = [25, 30, 20, 10];
var items = ['Beech', 'Maple', 'Tile', 'Laminate'];
var widtharray = [];
var lengtharray = [];
var floorarray = [];
var packsarray = [];
var pricearray = [];


var handleSubmit = function(e){
    e.preventDefault();
    if(validateForm() == false){
        return;
    }

var width = parseFloat(document.getElementById('width').value);
var length = parseFloat(document.getElementById('length').value);
var roomtotal = length * width;
var pricetotal = packstotal * roomtotal;
var packstotal = Math.ceil(roomtotal /2);
var price = prices[choice];
var floortotal = packstotal * price;
var flooring = items[choice];



document.write('You chose: ' + flooring +'\n The room length is: ' + length + ' Metres' + ', the width is: ' + width + ' Metres' + '\n' +
'The room size is: ' + roomtotal + 'm' + '\n The number of packs you need is: ' + packstotal + ' costing \u00A3' + price +' Per pack' + '\ so the total cost is \u00A3' + floortotal)

};


var validateForm = function(){
    var valid = true;



    if(width.value == ''){
        valid = false;
        alert("enter number in box.");
        return valid;
    }

    else if(isNaN(widthbox.value)){
        valid = false;
        alert("Please enter numbers only!");
        return valid;
    }

    else if(widthbox.value < 1 || widthbox.value > 50){
        valid = false;
        alert("number has to be between 1 & 50");
        return valid;
    }   


for (var i = 0; i < floorRadio.length; i++) {
if(floorRadio[i].checked) {
choice = floorRadio[i].value;
}


    if(lengthbox.value == ''){
        valid = false;
        alert("box is empty.");
        return valid;
    }

    else if(isNaN(lengthbox.value)){
        valid = false;
        alert("enter numbers only!");
        return valid;
    }
    else if(lengthbox.value < 1 || lengthbox.value > 50){
        valid = false;
        alert("enter number between 1 & 50");
        return valid;
    }


for(var i = 0; i < floorRadio.length; i++){
    if(floorRadio[i].checked){
        choice = floorRadio[i].value;
    }

    if (floorRadio == " " ) {
    valid = false;
    alert("no floor chosen")
    return valid;
}
</script>

html code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Flooring Calculator</title> 
<style>
body { background-color:grey; }
</style>

</head> 
<body> 
<h1> Flooring Calculator </h1>

    <form id='Calc' name="calc">
    Length (in m): <input type='text' id='length'><br>
    Width (in m):  <input type='text' id='width'><br>
    <br>
    All Packs sold to cover 2 M Squared<br>
    Beech - &#163;25 <input type='radio' name='floor' value='0' class='radio'><br>
    Maple - &#163;30 <input type='radio' name='floor' value='1' class='radio'><br>
    Tile - &#163;20 <input type='radio' name='floor' value='2' class='radio'><br>
    Laminate - &#163;10 <input type='radio' name='floor' value='3' class='radio'><br>
    <input type='submit' value='Calculate'>
    </form>

    <div id='output'><script src='javascript.js'></script></div>    
</body> 
</html>

'something has gone wrong' is unhelpful. Please can you be a little more specific.

[mehul12345]

well the application doesn't run anymore, and doesn't output anything

In google chrome rightclick ->inspect element ->console

this will flag up any js issues. At a glance line 100 is missing a semicolon.