Inline JS

by housecor

HTML

<h1>Contact Us</h1>

<p>
    <input type="text" id="name" placeholder="Name" />
</p>
<p>
    <select id="contact-method" onchange="showFollowup()">
        <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">
    <input type="text" id="phone" placeholder="Phone Number" />
</p>
<p id="email-wrapper" class="followup">
    <input type="text" id="email" placeholder="Email Address" />
</p>
<p id="mail-wrapper" class="followup">
    <input type="text" id="address" placeholder="Address" />
    <input type="text" id="city" placeholder="City" />
    <input type="text" id="state" placeholder="State" />
    <input type="text" id="zip" placeholder="Zip" />
</p>
<p>
    <textarea id="message" placeholder="Enter your message here."></textarea>
</p>
<input type="submit" value="Submit" />
<script>
    function showFollowup() {
        hideFollowups();
        var selectedContactMethod = $('#contact-method').val();
        $('#' + selectedContactMethod + '-wrapper').slideDown();
    }

    function hideFollowups() {
        $('.followup').hide();
    }
</script>

CSS

font-family {
    'Arial', 'Helvetica';
}
font-size {
    11px;
}
input[type=text], select, textarea {
    width: 200px;
}
textarea {
    height: 100px;
}
.followup {
    display: none;
}