Unobtrusive JS

by housecor

HTML

<h1>Contact Us</h1>

<p>
    <input type="text" id="name" placeholder="Name" data-bind="value: name" />
</p>

<p>
    <select id="contact-method" data-bind="value: contactMethod">
        <option>Contact Method</option>
        <option value="phone">Phone</option>
        <option value="email">Email</option>
        <option value="mail">US Mail</option>
    </select>
</p>
<p id="phone-wrapper" class="followup" data-bind="visible: contactMethod() == 'phone'">
    <input type="text" id="phone" placeholder="Phone Number" data-bind="value: phone" />
</p>
<p id="email-wrapper" class="followup" data-bind="visible: contactMethod() == 'email'">
    <input type="text" id="email" placeholder="Email Address" data-bind="value: email" />
</p>
<p id="mail-wrapper" class="followup" data-bind="visible: contactMethod() == 'mail'">
    <input type="text" id="address" placeholder="Address" data-bind="value: address" />
    <input type="text" id="city" placeholder="City" data-bind="value: city" />
    <input type="text" id="state" placeholder="State" data-bind="value: state" />
    <input type="text" id="zip" placeholder="Zip" data-bind="value: zip" />
</p>
<p>
    <textarea id="message" placeholder="Enter your message here." data-bind="value: message"></textarea>
</p>
<input type="submit" value="Submit" />

<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>

CSS

input[type=text], select, textarea {
    width: 200px;
}
textarea {
    height: 100px;
}

JavaScript

var vm = {};
vm.name = ko.observable('');
vm.contactMethod = ko.observable('');
vm.phone = ko.observable('');
vm.email = ko.observable('');
vm.address = ko.observable('');
vm.city = ko.observable('');
vm.state = ko.observable('');
vm.zip = ko.observable('');
vm.message = ko.observable('');

ko.applyBindings(vm);