Bootstrap Snippet Writing text in <div> using forms, JavaScript and jQuery using HTML CSS Bootstrap Javascript

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<!-- Submitted March 7 @ 11:05pm  -->
<div class="container">
<div class="row">
    <div class="col-md-4">
        <img src="https://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/Pencil3.png" class="img-responsive center-block" alt="">
    </div><!--.col -->
    <div class="col-md-8">
        <h3>
            Writing text in < div > using forms, JavaScript and jQuery
        </h3>
            How to write to a HTML page without reloading and without using server side scripting.
<!-- NOTE: TB3 form width default is 100%, so they expan to your <div> -->
        <form name="frmComment" id="frmComment">
            <label for="txtComment">Enter a comment here:</label>
            <input type="text" name="commentUser" id="txtComment" class="form-control" placeholder="Enter a comment (html allowed)">
            <br>
            <button type="button" class="btn btn-success" value="Submit" onclick="writeComment()">Write out text</button>
            <label><input type="checkbox" id="chkLorem" onclick="writeLorem()"> Use Lorem Ipsum text</label>
        </form>
        <hr>
        <p>
            Write to "textarea"
        </p>
        <textarea id="txtCommentHere" class="form-control" rows="3">
        </textarea>
        
        <p>
            Write to <div>
        </p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
body {
background-color:#333;
margin-top:18px
}
.container {
padding:33px;
background-color:#fff
}
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
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
Ref. starting point
http://stackoverflow.com/questions/7195844/writing-text-on-div-using-javascript
Naming conventions to make programming easy :)
TIP: Use CamelCases for names after prefix
<form>  id's prefix frm____  
<text><input> prefix txt___ 
<radio>  rad___
<checkbox> chk__
*/
function writeComment(e) {
    // check to see if they didn't fill in anything
    if ($.trim(document.frmComment.txtComment.value).length == 0) {
        alert('Please enter  some text.');
        document.frmComment.txtComment.value = ''; // clear any spaces 
        $('#txtComment').focus();        
        return; // exit function
    }
    // required to hide first, in order to show later
    $("#comment").hide();
    $("#txtComment").hide();
    $("#txtCommentHere").hide();
    var s = document.frmComment.txtComment.value;
    $("#txtComment").fadeIn(1000);
    // write out to to textarea, with delay of 1,000ms (1 second)
    document.getElementById('txtCommentHere').innerHTML = s;
    $("#txtCommentHere").fadeIn(1000);
    // write out to to <div id="comment"> , with delay of 2,000ms (2 second)
    document.getElementById('comment').innerHTML = s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Writing text in <div> using forms, JavaScript and jQuery"
Bootstrap 3.1.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"Writing text in <div> using forms, JavaScript and jQuery" Bootstrap 3.1.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"Writing text in <div> using forms, JavaScript and jQuery"
Bootstrap 3.1.0 Snippet by mrmccormack