ehm form

by James Doyle

HTML

<form>
<label>Length:</label>
<input type="text" id="length" name="length" />
<label>Beam:</label>
<input type="text" id="beam" name="beam" />
<label>Blocking Boat:</label>
<input type="text" id="blocking" name="blocking" />
<label>Haul Out - custom trailer</label><br />
<input type="radio" name="haul-custom" value="60" /> Bowrider<br />
<input type="radio" name="haul-custom" value="100" /> Cruiser<br />
<label>Haul Out - hydraulic/travel trailer</label>
Feet: <input type="text" id="haul-hyd" name="haul-hyd" />
<label>Shrinkwrap: </label>
Length: <input type="text" id="shrink-length" name="shrink-length" />
Beam: <input type="text" id="shrink-beam" name="shrink-beam" />
<label>No Damps (1 every 10 feet):</label>
<input onchange="updateRange('no-damps')" type="range" name="no-damps" id="no-damps" min="0" max="20" value="0" /><span id="no-damps-value">0</span>
<label>Vents (up to 24')</label>

<label>Door:</label>
<input onchange="updateRange('door')" type="range" name="door" id="door" min="0" max="20" value="0" /><span id="door-value">0</span>
<input type="checkbox" name="support-hole" value="support-hole">Support Holes<br />

<label>Bottom Wash (Length in Feet):</label>
<input type="text" id="bottom-wash" name="bottom-wash" />
<label>Gel Wash Deck (Length in Feet):</label>
<input type="text" id="gel-wash-deck" name="gel-wash-deck" />
<label>Service Clean (Length in Feet):</label>
<input type="text" id="service-clean" name="service-clean" />
<label>Bronze Clean (Length in Feet):</label>
<input type="text" id="bronze-clean" name="bronze-clean" />
<label>Gold Clean (Length in Feet):</label>
<input type="text" id="gold-clean" name="gold-clean" />
<label>Engine: </label>
<select name="engine">
    <option data-set="0" value="4cyl">4 cyl</option>
    <option data-set="1" value="6cyl">6 cyl</option>
    <option data-set="2" value="8cylalpha">8cyl-Alpha</option>
    <option data-set="3" value="8cylbravo">8cyl-Bravo</option>
    <option data-set="4"...

CSS

form {
    margin: 10px;
    width: 300px;
}

label,input {
    width: 300px;
    margin: 4px 0;
    display: inline-block;
}

input {
    border: 1px solid #ccc;
    padding: 2px;
}

input[type=radio],
input[type=checkbox]{
    width: auto;
    margin: 0 3px 0 0;
}

input[type=range] {
    width: 260px;
    margin-right: 10px;
}

JavaScript

function updateRange(id) {
    var val = $('#' + id).attr("value");
    $('#' + id + '-value').html(val);
}

function getEngine() {
    var val = $("select[name='engine'] option:selected").attr("data-set");
    var items = [[435, 275, 185], [470, 405, 190], [550, 420, 210], [625, 420, 210], [710, 385, 210], [995, 670, 255], [860, 670, 255], [485, 370, 260]];
    if (val != null) {
        $("#new-radio").html("<input type=\"radio\" name=\"engine-price\" value=\"" + items[val][0] + "\" />Premium $" + items[val][0] + "<br /><input type=\"radio\" name=\"engine-price\" value=\"" + items[val][1] + "\" />Basic $" + items[val][1] + "<br /><input type=\"radio\" name=\"engine-price\" value=\"" + items[val][2] + "\" />No Oils $" + items[val][2]);
    } else {
        $("#new-radio").html('');
    }
}