<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>
<div id="comment"></div>
<hr>
<!--Mr.M. logo -->
<p>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADqUlEQVR4nO2aTYgURxTHGzREQ1hEw7KoGMiKIouZ7nqtQ+9013srunGmu+vVGhoRFMVAPi5CLiEHnZshl5wCibDgQchx8eDJi2cvggcJogiBRSWgAQ0q+NU5rCPrOP01LGSnu//wTjP86PebrqpXMIbjROtN0mYVy3Gi9YZJ2gTkuIplkjZrAbWAWkAtoBbwfz9ILaAWULyE5D8B+RTQnCtIHQTkrpDqn6oImDfa7Q+NvuxsHdgMnrpaagECw+sAX3/Q33wvu/Z1PgWpHpVWgO2GR5Ka78Xy9K+lFbDH/fKzLAEm6ROlFSBIbc98A1z/ZJkFHM0SABj+VloBgOrGoBPgbfP72pMC+d8SC+DYQr4AEH7U3/zSCaCv5eWMrABAjgWq2zbqH/YQ7wfS2kL9E0j1uAhjpAWsRNUCVoUAqZ4I5L+KFiC/fJ+nngnJr0ZKgEn6RNaxNnC3J/65nyVIHZyi6OPP0fdsj78HyX8IqW+tXgEyvENEa4cRQETrljdnIV8Y9D2T9IZVK8By/ZPDNN/LbtmRQqrXQvLfe/fObRoxAeqFRcFpIP4xT1muPjaoQfDU70IGh5MkrWIBxUqguj2ww5SpsFQCANWztEYrIIBjoPCTSgswSZuVFiAwCCstADz1XaUF2B6frbSApGmvMgJAqiuVFpA4DKUEnM7u0ggAyU8LNY/+DEh+WB4ByHHSpac/tgy/AVQv0lgjKSDPMNSY8b/Iw7LcoDFyAho0F2S/+nwqt8xRE2BR8G2mAE//kltAkw5ttYjPjUrBjO9nr3/9VR5Wkw5tzWLVqVOnTp06hmE0m+0xcMNtK8mcnJ4dn5yeHV9JJrjhtmazPbYisCmiCUCeB1Q3hVSv3wwQD0DyZbsVdIZhWm7QsKVeAOTFZUPJoi31guUGjWGYdivogOTLgPwAkOOlZ1U3AXl+imhiGKYhSB1Nu0kBcmxjeD6v7SiK1gByFyQ/T2QufdaNomhNHmaz2R6zMTyfOvFJfpjnbzXvxGr5qsB4ejEPE5C7BZjdnMyLuUfolq9yNe840UZAdb/QjC7V8TSm5QaN1F9+wJuQtRxAquPF7hHqvuNEG7OtevpM0QuKkOpuGvPNmi/EtKVeSGMKqe4WZYKnz2QKEBheKgxGjnc4wZZEqe9ueHlrMYm3wwm2DPOMAsNLmQJA8r1h4ElrbHJ6dnwYHiDHSUdkwT1q+dK6VwvISr0Eqr4JVv4YNIyKD0K9VHoU7qXSl6H+lPU6/B+3ehOjykS6TAAAAABJRU5ErkJggg==" alt="by Mr.M." title="by Mr. M.">
</p>
<p>
<a href="http://validator.w3.org/check?uri=referer;ss=1"><small>HTML</small><sup>5</sup></a>
</p>
<hr>
</div><!--.col -->
</div><!--./row -->
</div><!--./container -->
body {
background-color:#333;
margin-top:18px
}
.container {
padding:33px;
background-color:#fff
}
/*
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;
$("#comment").fadeIn(2000);
return false;
}
function writeLorem(e) {
var s; // string
if ($('#chkLorem').is(':checked')) {
// required to hide first, in order to show later
$("#comment").hide();
$("#txtCommentHere").hide();
s = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in posuere nisi. Cras mi eros, blandit eget eros in, blandit vulputate sem. Morbi in tincidunt magna, sed tincidunt turpis. Integer. ';
document.frmComment.txtComment.value = s;
// 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;
$("#comment").fadeIn(2000);
} else {
document.frmComment.txtComment.value = ' ';
$('#txtComment').focus();
} // end if
} // end function
