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" onchange="copyProductNameToHeader()" />
</p>
<p>
    <label>Category</label>
    <br/>
    <select id="category" onchange="initializeFollowupFieldVisibility()">
        <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" value="Save" class="btn-primary btn" onclick="save()" />

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);
 });

 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));
}