Skip to content

Instantly share code, notes, and snippets.

@pramodvspk

pramodvspk/Templating Bootstrap form.markdown

Created June 3, 2016 17:31
Show Gist options
  • Save pramodvspk/0afe4852fb7da977a17e315a34264074 to your computer and use it in GitHub Desktop.
Save pramodvspk/0afe4852fb7da977a17e315a34264074 to your computer and use it in GitHub Desktop.
Download ZIP
Templating Bootstrap form
Raw
index.html
<body>
<script type="text/template" id="dataTemplate">
<div class="container">
<!--Start of column 1-->
<div class="col-sm-6">
<div class="table table-borderless table-sm">
<table class="table" id="contributors-table">
<thead>
<tr>
<th></th>
<th>Contributors</th>
<th>Last Name, First Name</th>
</tr>
</thead>
<tbody>
{{#authors}}
<tr>
<td>
<label class="checkbox-label">
<div class="radio">
<input type="radio" name="optradio" class="table-radio">
</div>
</label>
</td>
<td>
<div class="form-group">
<select class="form-control input-sm" class="contributor-select">
<option value="author">Author</option>
<option value="editor">Editor</option>
<option value="translator">Translator</option>
</select>
</div>
</td>
<td>
<div class="form-group">
<input class="form-control input-sm name" type="text" value="{{lastname}}, {{firstname}}">
</div>
</td>
</tr>
{{/authors}}
</tbody>
</table>
</div>
<div id="table-buttons" class="btn-grp">
<button type="button" class="btn btn-default btn-md" id="add">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-md" id="up">
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-md" id="down">
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-md" id="delete">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div class="form-group">
<div class="col-sm-8">
<label for="title">Title</label>
<input class="form-control input-sm" id="title" type="text" value={{title}} required>
</div>
<div class="col-sm-4">
<label for="year">Year</label>
<input class="form-control input-sm" id="year" type="number" value={{year}} required>
</div>
</div>
<div class="form-group col-sm-12">
<label for="pubtype">Publication Type:</label>
<select class="form-control input-sm" id="pubtype">
<option value="article">Article</option>
<option value="book">Book</option>
<option value="editedbook">Edited Book</option>
<option value="conference">Conference</option>
<option value="inbook">In Book</option>
<option value="incollection">In Collection</option>
<option value="inproceedings">In Proceedings</option>
<option value="manual">Manual</option>
<option value="masterthesis">Master's Thesis</option>
<option value="phdthesis">Ph.D. Thesis</option>
<option value="inproceedings">Proceedings</option>
<option value="techreport">Tech Report</option>
<option value="unpublished">Unpublished</option>
<option value="misc">Miscellaneous</option>
<option value="translatedbook">Translated Book</option>
<option value="webpub">Web Published</option>
</select>
</div>
<!--Start of dynamic elements forms-->
<div class="form-group" id="dynamicUpdate">
<div class="col-sm-8">
<label for="publisher">Publisher</label>
<input class="form-control input-sm" id="publisher" type="text" required="true">
</div>
<div class="col-sm-4">
<label for="city">City</label>
<input class="form-control input-sm" id="city" type="text" required="true" value={{location}} >
</div>
<div class="col-sm-2">
<label for="volume">Volume</label>
<input class="form-control input-sm" id="volume" type="number" value={{volume}} >
</div>
<div class="col-sm-2">
<label for="series">Series</label>
<input class="form-control input-sm" id="series" type="number" value={{series}} >
</div>
<div class="col-sm-2">
<label for="edition">Edition</label>
<input class="form-control input-sm" id="edition" type="number" value={{edition}} >
</div>
<div class="col-sm-6">
<label for="sel1">Month</label>
<select class="form-control input-sm" id="month">
<option value="none">----</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
</div>
<div class="form-group col-sm-12">
<label for="note">Note</label>
<textarea class="form-control" rows="4" id="note"></textarea>
</div>
</div>
<!--End of filling the dynamic forms-->
</div><!--End of column 1-->
<div class="col-sm-6">
<div id="preview-pane">
<p id="preview-header">Preview:</p>
<label id="preview-rawtext">
{{raw}}
</label>
<button type="button" class="btn btn-default btn-md">Update Preview</button>
<button type="button" class="btn btn-default btn-md">Raw Text</button>
</div>
<div class="form-group">
<label for="abstract">Abstract:</label>
<textarea class="form-control" rows="4" id="abstract">{{abstract}}</textarea>
</div>
<div class="form-group">
<label for="keywords">Keywords:</label>
<textarea class="form-control" rows="4" id="keywords">{{keywords}}</textarea>
</div>
<div class="form-group">
<label for="url">URL</label>
<input type="url" class="form-control input-sm" id="url" value={{url}}>
</div>
<div class="form-group">
<label for="doi">DOI</label>
<input class="form-control input-sm" id="doi" value={{doi}}>
</div>
</div>
</div>
<div class="container">
<div id="control-buttons" class="btn-grp">
<button type="submit" class="btn btn-warning">Verify</button>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-danger">Close</button>
</div>
</div>
</script>
<form id="templateForm"></form>
</body>
Raw
script.js
$("document").ready(function () {
$.getJSON('//nupubs.cogs.indiana.edu/citation/33590', function (data) {
var template = $("#dataTemplate").html();
var result = Mustache.render(template, data);
$("#templateForm").html(result);
// Setting the month
var publicationMonth = data.month.toLowerCase();
if(data.month.toLowerCase() == "") {
$('#month option[value="----"]').attr('selected',true);
} else {
$('#month option[value='+publicationMonth+']').attr('selected',true);
}
// Setting the publicationType
var pubType = data.pubtype.toLowerCase();
$("#pubtype option[value="+pubType+"]").attr("selected", true);
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
Raw
style.css
.container{
padding: 5px;
}
.textbox{
border: 1px solid;
border-radius:5px;
height: 30px;
}
.dropdown{
border: 1px solid;
border-radius:5px;
height: 30px;
}
#control-buttons{
margin: 10px;
text-align:center;
}
#table-buttons{
margin: 10px;
text-align:center;
}
#preview-rawtext{
text-align:left;
overflow-y:scroll;
height: 100px;
}
#preview-pane{
text-align:center;
}
#pubsid{
margin:10px;
}
.form-group{
margin-bottom: 0px;
}
.radio input[type=radio] {
margin-left: 0px;
margin-top: 0px;
}
thead { font-weight: bold; }
.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
border: none;
}
td{
text-align:center;
vertical-align: middle;
}
tr td{
margin: 0;
}
.checkbox-label{
display:block;
}
.table{
border-collapse: collapse;
border-spacing: 0;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment