Bootstrap User Management

by Steve Coffman

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="container">
    <form action="edit-user" method="post">
        <fieldset class="form-horizontal">
            <legend>Edit User</legend>
            <p>
                <label for="switch-user-field">Change the user details for this user:</label>
            </p>
            <div class="form-group">
                <input type="hidden" id="id" name="id" value="529" />
                <input type="hidden" id="uniqname" name="uniqname" value="cdnapier" />
                <label for="uniqname" class="col-sm-2 control-label">Uniqname</label>
                <div class="col-sm-10">
                    <input type="text" disabled="disabled" class="form-control" id="uniqname" name="uniqname" value="cdnapier" />
                </div>
            </div>
            <!-- /form-group -->
            <div class="form-group">
                <label for="Role" class="col-sm-2 control-label">Role</label>
                <div class=" col-sm-10 dropdown">
                    <input type="hidden" value="Administrator" />
                    <button class="btn btn-default dropdown-toggle" type="button" id="role" data-toggle="dropdown"> <span class="drop-down-value">Administrator</span>
 <span class="caret"></span>

                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="role">
                        <li role="presentation"><a class="linkToChangeRole" role="menuitem" tabindex="-1" href="#" data-value="ADMIN">Administrator</a>

                        </li>
                        <li role="presentation"><a class="linkToChangeRole" role="menuitem" tabindex="-1" href="#" data-value="COORDINATOR">Coordinator</a>

                        </li>
       ...

CSS

.col-sm-3 {
    border: 1px solid #000;
}

JavaScript

$(document).ready(function () {
	'use strict';


	$('input[name = "primaryDepartment"]').click(function () {
		
        var primaryDeptValue = $(this).attr('data-description');
        
			$('#primary-dept').val(primaryDeptValue);
		});
	});