Inline JS Product Edit

by housecor

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<h1 id="header"></h1>

<p>
    <label>Product</label>
    <br/>
    <input type="text" id="name" />
</p>
<p>
    <label>Category</label>
    <br/>
    <select id="category">
        <option>Select Category</option>
        <option value="tv">TV</option>
        <option value="computer">Computer</option>
        <option value="camera">Camera</option>
    </select>
</p>
<p class="followup" data-followup-for="tv">
    <label>Screen Size</label>
    <br/>
    <input type="text" id="size" />
</p>
<p class="followup" data-followup-for="computer">
    <label>Processor</label>
    <br/>
    <input type="text" id="processor" />
</p>
<p class="followup" data-followup-for="camera">
    <label>Megapixels</label>
    <br/>
    <input type="text" id="megapixels" />
</p>
<p>
    <label>Description</label>
    <br/>
    <textarea id="message" placeholder="Enter your message here."></textarea>
</p>
<input type="submit" id="save" value="Save" class="btn-primary btn" />

CSS

input[type=text], select, textarea {
    width: 200px;
}
textarea {
    height: 100px;
}
body {
    margin-left: 10px;
}
label {
    margin-top: 10px;
}

JavaScript

var product = {
    name: "Panasonic 65\" Plasma Display",
    category: "tv",
    screenSize: "65",
    processor: "",
    megapixels: "",
    description: "This is a big TV that will impress your mom. Yeah, she'll roll her eyes, but she'll be secretly jealous."
};

$(document).ready(function () {
    populateForm(product);

    $('#name').change(copyProductNameToHeader);
    $('#category').change(initializeFollowupFieldVisibility);
    $('#save').click(save);
});

function populateForm(product) {
    $('#header').html(product.name);
    $('#name').val(product.name);
    $('#category').val(product.category);
    $('#size').val(product.size);
    $('#processor').val(product.processor);
    $('#megapixels').val(product.megapixels);
    $('#message').val(product.description);

    initializeFollowupFieldVisibility();
}

function initializeFollowupFieldVisibility() {
    hideFollowupFields();
    var selectedCategory = $('#category').val();
    var $followupWrapper = $('.followup').filter(function () {
        return $(this).data("followup-for") == selectedCategory
    });
    $followupWrapper.show();
}

function hideFollowupFields() {
    $('.followup').hide();
}

function copyProductNameToHeader() {
    var productName = $('#name').val();
    $('#header').html(productName);
}

function save() {
    var product = {
        name: $('#name').val(),
        category: $('#category').val(),
        screenSize: $('#size').val(),
        processor: $('#processor').val(),
        megapixels: $('#megapixels').val(),
        description: $('#message').val()
    };
    alert('Saving this: ' + JSON.stringify(product));
}