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

<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

Related: See More


Questions / Comments: