Bootstrap Snippet Create form using HTML Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<form id="evidence-form" class="form-horizontal">
    <fieldset>
        <fieldset>
            <legend>BEL Statement</legend>
            <div class="form-group">
                <label class="col-md-4 control-label" for="bel-statement"></label>  
                <div class="col-md-8">
                    <input id="bel-statement" name="bel-statement" placeholder="Subject Relationship Object" class="form-control input-md" required="" type="text">
                    <span class="help-block">i.e. p(HGNC:AKT1) -> bp(MESHPP:Apoptosis)</span>  
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>Citation</legend>
            <div class="form-group">
                <label class="col-md-4 control-label" for="citation-pubmed-id">PubMed ID</label>  
                <div class="col-md-8">
                    <input id="citation-pubmed-id" name="citation-pubmed-id" placeholder="PubMed identifier" class="form-control input-md" required="" type="text">
                    <span class="help-block">i.e. 9202001</span>  
                </div>
                <label class="col-md-4 control-label" for="citation-name">Name</label>  
                <div class="col-md-8">
                    <input id="citation-name" name="citation-name" placeholder="PubMed reference name" class="form-control input-md" required="" type="text">
                    <span class="help-block">i.e. J Biol Chem. 1997 Jul 4;272(27):16917-23.</span>  
                </div>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>Annotation</legend>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function()
{
    $(document).on('click', '.btn-add', function(e)
    {
        e.preventDefault();
        var controlForm = $('.controls form:first'),
            currentEntry = $(this).parents('.entry:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);
        newEntry.find('input').val('');
        controlForm.find('.entry:not(:last) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('btn-success').addClass('btn-danger')
            .html('<span class="glyphicon glyphicon-minus"></span>');
    }).on('click', '.btn-remove', function(e)
    {
        $(this).parents('.entry:first').remove();
        e.preventDefault();
        return false;
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Create form"
Bootstrap 3.3.0 Snippet by abargnesi

Related: See More

Questions / Comments:

"Create form" Bootstrap 3.3.0 Snippet by abargnesi

Related: See More

Questions / Comments:

"Create form"
Bootstrap 3.3.0 Snippet by abargnesi