Thursday, 1 June 2017

javascript css forms

chen assignment 4

Dodgy Brakes Car Rental

Regisration form

Reservation form



small
mid-size
full-size
van
navigation system $10
child seat $5
roof rack $15
bicycle rack $15



<html>
<head>
    <title>chen assignment 4</title>
    <script type="text/javascript">

var client_data = [];
var total = parseInt(0);
var vehicle_size = "";
var addtional_options = "";

function storeClientData() {
    var title = document.getElementById("select_title").value;
    var first_name = document.getElementById("first_name").value;
    var last_name = document.getElementById("last_name").value;
    var street = document.getElementById("street").value;
    var city = document.getElementById("city").value;
    var province = document.getElementById("province").value;
    var postal_code = document.getElementById("postal_code").value;
    var phone = document.getElementById("phone").value;
    var email = document.getElementById("email").value;

    if (title == "" || first_name == "" || last_name == "" || street == "" || city == ""
        || province == "" || postal_code == "" || phone == "" || email == "") {
        alert("data is missing");
    }
    else {
        client_data[0] = title;
        client_data[1] = first_name;
        client_data[2] = last_name;
        client_data[3] = street;
        client_data[4] = city;
        client_data[5] = province;
        client_data[6] = postal_code;
        client_data[7] = phone;
        client_data[8] = email;

        document.getElementById("reservation_form").style.visibility = "visible";
    }
}

function slider_value() {
    document.getElementById("slider_value").innerHTML = document.getElementById("duration").value;
}

function vehicle_select() {
    for (var i = parseInt(0); i < document.reservation.vehicle_type.length; i++) {
        if (document.reservation.vehicle_type[i].checked) {
            document.getElementById("vehicle_cost").innerHTML = "$" + document.reservation.vehicle_type[i].value.split(" ")[0];
            vehicle_size = document.reservation.vehicle_type[i].value.split(" ")[1];
        }
    }
}

function calculate_rental() {
    total = 0;
    addtional_options = "";

    var vehicle_cost = document.getElementById("vehicle_cost").innerHTML;

    if (vehicle_cost != undefined && vehicle_cost != "") {
        total += parseInt(vehicle_cost.substring(1));
    }

    if (document.reservation.navigation.checked)
    {
        total += 10;
        addtional_options += "navigation $10 per day <br/>";
    }

    if (document.reservation.child_seat.checked) {
        total += 5;
        addtional_options += "child seat $5 per day <br/>";
    }

    if (document.reservation.roof_rack.checked) {
        total += 15;
        addtional_options += "roof rack $15 per day <br/>";
    }

    if (document.reservation.bicycle_rack.checked) {
        total += 15;
        addtional_options += "bicycle $15 per day <br/>";
    }

    total *= document.getElementById("duration").value;

    var receipt ="";

    receipt = client_data[0] + " " + client_data[1] + " " + client_data[2] + "<br/>";
    receipt = receipt + client_data[3] + " " + client_data[4] + " " + client_data[5] + "<br/>";
    receipt = receipt + "Contact: " + client_data[7] + "<br/><br/>";

    receipt = receipt + "Rental information: <br/>";
    receipt = receipt + "car: " + vehicle_size + " " + document.getElementById("vehicle_cost").innerHTML + " per day<br/>";
    receipt = receipt + "Options: " +addtional_options;
    receipt = receipt + "Duration: " + document.getElementById("duration").value +" days<br/>";
    receipt = receipt + "Cost of Rental: $" + total;

    document.getElementById("receipt").innerHTML = receipt;
}
</script>
   
    <style>
#title{
    text-align:center;
}

#banner {
    height: 100px;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKl0MAHu2D9P_FXxFV8blnLZ0dtcSypRgRKKWtn6O0IZe4Uq0A4EsNFiSs3mmYKv4pyEH9Q_dI7N5CkJUBaMy6BrXe4LKsmu2xCX93g2s5psDUeplldzzDdOWhF_aExrr2Fm83Qkcnb6w/s320/dodge.jpg');
    background-repeat:repeat-x;
    background-size:auto 100px;
}

.submit_button {
    background-color: green;
    color: yellow;
}

#reservation_form{
    visibility:visible;
}

.col-md-6{
}

.form-control{
}

</style>
</head>

<body>
    <h2 id="title">Dodgy Brakes Car Rental</h2>

    <div id="banner"></div>

    <form class="col-md-6">
        <h3>Regisration form</h3>

        <table class="table table-striped">
            <tr>
                <td>
                    <label>title: </label>
                </td>
                <td>
                    <select id="select_title" class="form-control">
                        <option value="">please select one</option>
                        <option value="Mr.">Mr.</option>
                        <option value="Mrs.">Mrs.</option>
                        <option value="Ms.">Ms.</option>
                        <option value="Dr.">Dr.</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label>first name: </label>
                </td>
                <td>
                    <input type="text" id="first_name" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>last name: </label>
                </td>
                <td>
                    <input type="text" id="last_name" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>street address : </label>
                </td>
                <td>
                    <input type="text" id="street" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>city : </label>
                </td>
                <td>
                    <input type="text" id="city" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>province : </label>
                </td>
                <td>
                    <input type="text" id="province" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>postal code : </label>
                </td>
                <td>
                    <input type="text" id="postal_code" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>phone # : </label>
                </td>
                <td>
                    <input type="tel" id="phone" class="form-control" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>email : </label>
                </td>
                <td>
                    <input type="email" id="email" class="form-control" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" class="form-control submit_button" value="submit" onclick="storeClientData()" />
                </td>
            </tr>
        </table>
    </form>

    <form class="col-md-6" name="reservation" id="reservation_form">
        <h3>Reservation form</h3>

        <table class="table table-striped">
            <tr>
                <td>
                    <label>duration (days)</label><br />
                    <span id="slider_value"></span>
                </td>
                <td>
                    <input id="duration" type="range" min ="1" max="30" step="1" onchange="slider_value()"/>                  
                </td>
            </tr>
            <tr>
                <td>
                    <label>type of vehicle</label><br />
                    <span id="vehicle_cost"></span>
                </td>
                <td>
                    <input type="radio" name="vehicle_type" value="25 small" onclick="vehicle_select()" />small<br />
                    <input type="radio" name="vehicle_type" value="35 mid-size" onclick="vehicle_select()"/>mid-size<br />
                    <input type="radio" name="vehicle_type" value="45 full-size" onclick="vehicle_select()"/>full-size<br />
                    <input type="radio" name="vehicle_type" value="50 van" onclick="vehicle_select()"/>van<br />                
                </td>              
            </tr>
            <tr>
                <td>
                    <label>additional options</label>
                    <span id="additional"></span>
                </td>
                <td>
                    <input type="checkbox" name="navigation" />navigation system $10<br />
                    <input type="checkbox" name="child_seat" />child seat $5<br />
                    <input type="checkbox" name="roof_rack" />roof rack $15<br />
                    <input type="checkbox" name="bicycle_rack" />bicycle rack $15<br />
                </td>            
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" class="form-control submit_button" value="calculate rental" onclick="calculate_rental()" />
                </td>
            </tr>
        </table>
    </form>

    <p id="receipt"></p>
</body>

</html>

reference:

http://www.html5tutorial.info/html5-range.php

No comments:

Post a Comment