jquery autocomplete textarea with checkbox in sticky


I have created autocomplete in textarea from checkbox in jquery.As i was trying to alert the check box list it got failed.so alternative I used jquery plugin from http://stickyjs.com .

The update area function is used to insert the value from 
checkbox to textarea
<style type="text/css">
label {display:block; margin:1em 0em}
input {margin:0ex 1ex}
</style>
    <link href="sticky.full.css" rel="stylesheet" type="text/css">
 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>    
    <script src="sticky.full.js" charset="utf-8"></script>

<script type="text/javascript">

function updateArea (e) {
document.getElementById('area').value = '';
for (var i=0; i<e.form.elements.length; i++)
{
        if (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked) 
        {
        document.getElementById('area').value += e.form.elements[i].nextSibling.data; 
        document.getElementById('area').value += '\n';
        }
        };
}
This code is used to display checkbox list as 
sticky onchange in textarea.

 $("#area").live( "click", function() {
$('.demo-box').sticky();
});
HTML CODE  
<textarea cols="5" id="area" rows="5"></textarea> 
<div style="display: none;">
    <form action="">
<label><input type="checkbox" onclick="updateArea(this)">Fee</label>
<label><input type="checkbox" onclick="updateArea(this)">Fie</label>
<label><input type="checkbox" onclick="updateArea(this)">Foe</label>
<label><input type="checkbox" onclick="updateArea(this)">Fum</label>
<button type="submit">Submit</button>
</form>
</div>
Advertisements
About

myself pramodh kumar yet another php developer from India and have worked on oops,procedural,yii framework,codeigniter,wordpress,joomla,api and more.

Tagged with: , , , , , , , , , ,
Posted in javascript and jquery

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow php tutorial on WordPress.com
categories
Calendar
March 2014
M T W T F S S
« Feb   Apr »
 12
3456789
10111213141516
17181920212223
24252627282930
31  
Follow me on Twitter
Blog Stats
  • 74,607 hits
%d bloggers like this: