Dynamic Selection of select options

Form Demo where options is selected and same no. of file upload options displays.

by Budhram Gurung

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<div id="wrapper" class="container">
    <header>
        <img class="center" src="http://kbsstatic.com/img/title.png" alt="Title">
    </header>
    	<h1 class="text-center">Create an MPB Page</h1>

    <form name="appraisalForm" action="mpb_creator.php" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
        <div class="row">
            	<h2 class="text-center">Customer Details</h2>

            <div class="col-md-6 col-md-offset-3 bottom-15">
                <label for="InvoiceNumber">Invoice Number</label>
                <input type="text" class="form-control" name="InvoiceNumber" placeholder="Invoice Number" id="InvoiceNumber">
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3 bottom-15">
                <label for="CustomerName">Customer Name</label>
                <input type="text" class="form-control" name="CustomerName" placeholder="Customer Name" id="CustomerName">
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-3 bottom-15">
                <label for="Number">No. of Bundles for This Invoice</label>
                <select class="form-control" name="Number" id="Number">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
          ...

CSS

#wrapper {
    width: 80%;
    margin: 25px auto;
}
header img {
    max-width: 100%;
}
.center {
    display: block;
    margin: 0 auto;
}
.text-center {
    text-align: center;
}
.bottom-15 {
    margin-bottom: 15px;
}
.light-gray {
    background-color: #e3e3e3;
}
.form-control {
    width: 100%;
}
textarea {
    resize:vertical;
}
.hide-till-uploaded {
    display: none;
}
[id^=thumbnail_image] {
    width: 175px;
}
label {
    display: block;
}

JavaScript

// Show Thumbnail
function getThumbnail1(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#thumbnail_image1').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

// Show Thumbnail
function getThumbnail2(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#thumbnail_image2').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$('#Number').change(function () {
    var num = parseInt($(this).val(), 10);
    var container = $('<div />');
    for (var i = 1; i <= num; i++) {
        container.append('<div class="' + i + '"><div class="row"><div class="col-md-6 col-md-offset-3 bottom-15"><label for="file" class="text-center" id="imageNumber' + i + '">Upload Image:</label><input class="light-gray center" type="file" name="appraisal_image' + i + '" id="appraisal_image' + i + '"><br><div class="image-holder"><img class="hide-till-uploaded center" id="thumbnail_image' + i + '" src="#" alt="your image" /></div></div></div><div class="row"><div class="col-md-2 col-md-offset-5 bottom-15"><label for="Size" id="Size' + i + '">Size</label><input type="text" class="form-control" name="Size' + i + '" placeholder="Rug Size" id="Size' + i + '"></div></div></div>');
    }

    $('#here').html(container);

    $("#appraisal_image1").change(function () {
        getThumbnail1(this);
        $('#thumbnail_image1').css("display", "block");
    });
    $("#appraisal_image2").change(function () {
        getThumbnail2(this);
        $('#thumbnail_image2').css("display", "block");
    });


});