JQuery Textarea

Textarea are used to collect more line of data from users.

Reading the data entered in textarea

Our textarea id=textarea_dtl, here is the code to read the value entered inside a text box.
var str=$('#textarea_dtl').val();
Here we stored the text box data in a variable str.
We can display the data entered by connecting it to a button click function.
Enter some text inside textarea and then Click the button.
HTML part
<textarea rows=2 cols=30 name=textarea_dtl id=textarea_dtl></textarea>
   <button name=b1 id=b1>Copy</button>   <div id=d1></div>
JQuery
<script>
$(document).ready(function() {
$("#b1").click(function(){
var str=$('#textarea_dtl').val();
$("#d1").html(str);
})
})
</script>

Adding Bootstrap Design

We will add class='form-control' to our textarea.
<textarea class='form-control' rows=2
  name=textarea_dtl id=textarea_dtl></textarea>

Setting the value of a textarea

We will use val() to update or add text to our textarea. Click the button below.
HTML
<textarea rows=2 cols=30 name=textarea_dtl2 id=textarea_dtl2
  class='form-control'></textarea> <button name=b12 id=b12>Show Data</button>
JQuery

<script>
$(document).ready(function() {
$("#b12").click(function(){
$("#textarea_dtl2").val('Default Data to be shown inside textarea');
})
})
</script>

Disable the textarea

We can disable a textarea or enable it by managing prop
$("#textarea_dt13").prop("disabled", false);
Here the button with id b5 on Click will disable the textarea , same time button with id b6 will enable it by using click event function.

HTML part
<input type=text name=my_text id=t2>
<button name=b5 id=b5>Disable</button> <button name=b6 id=b6>Enable</button> 
JQuery
<script>
$(document).ready(function() {
$("#b5").click(function(){
$("#textarea_dt13").prop("disabled", true);
})
$("#b6").click(function(){
$("#textarea_dt13").prop("disabled", false);
})

})
</script>

Length of the string inside textarea

We can get length of the string entered inside a textarea by using length. Here we are reading the string and storing in a variable str. Then we are displaying the length of the string inside a div tag with id=d1.
var str=$('#t1').val();
$('#d1').html(str.length);
Reading the number of Chars in a Textarea
Using the above concepts we can develop a script where the submit button will be enabled after entering some minimum number of chars in a textarea.
Here is the sample.
You must enter 10 cars minimum to enable the associated button. Note that we have used keyup event to trigger the code block for calculating and disabling the button.
0
html
<textarea name=t123 rows=4 cols=60 id=t123></textarea>
<button id=b123>Send Data</button>
<div id=d123>0</div>
Jquery
<script>
$(document).ready(function() {
  $('#b123' ).prop( 'disabled',true )
// Jquery code here ///
$('#t123').attr('maxlength','50')
$('#t123').keyup(function(){
  var str=$('#t123').val();
  $('#d123').html(str.length);
if(str.length>9){$('#b123' ).prop( 'disabled',false )}
else{$('#b123' ).prop( 'disabled',true)}
})
////
});
</script>
To add colour changes to button use css function.
$('#b123').css('background','#ecf0eb')
TextBox

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer