JQuery Textarea
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();We can display the data entered by connecting it to a button click function.
Enter some text inside textarea and then Click the button.
<textarea rows=2 cols=30 name=textarea_dtl id=textarea_dtl></textarea>
<button name=b1 id=b1>Copy</button> <div id=d1></div>
<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.<textarea rows=2 cols=30 name=textarea_dtl2 id=textarea_dtl2
class='form-control'></textarea> <button name=b12 id=b12>Show Data</button>
<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);<input type=text name=my_text id=t2>
<button name=b5 id=b5>Disable</button> <button name=b6 id=b6>Enable</button> <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);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><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>$('#b123').css('background','#ecf0eb')
This article is written by plus2net.com team.
| 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