JQuery Textbox

Textbox are used to collect user entered data. Mainly it is used along with other componenets to collect data.

Reading the data entered in textbox

Our text box id=t1, here is the code to read the value entered inside a text box.
var str=$('#t1').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.
HTML part
<input type=text name=my_text id=t1><button name=b1 id=b1>Copy</button>
<div id=d1></div>
<script>
$(document).ready(function() {
$("#b1").click(function(){
var str=$('#t1').val();
$("#d1").html(str);
})
})
</script>

Show or Hide the Text Box

$('#t1').show(); // Display the hidden text box with id = t1
$('#t1').hide(); // Hide the text box
Read more on Show & Hide elements

Disable the text box

We can disable a text box or enable it by managing prop
$("#t2").prop("disabled", false);
Here the button with id b2 on Click will disable the text box , same time button with id b3 will enable it by using click function.
HTML part
<input type=text name=my_text id=t2><button name=b2 id=b2>Disable</button></div>      <button name=b3 id=b3>Enable</button> 
JQuery
<script>
$(document).ready(function() {
$("#b2").click(function(){
$("#t2").prop("disabled", true);
})
$("#b3").click(function(){
$("#t2").prop("disabled", false);
})

})
</script>

Disable textbox based on selection of checkbox

We can connect the textbox to a checkbox where on selection of checkbox the textbox can be enabled. By default we will keep the textbox disabled.

Others
HTML
<input type=checkbox id='ckb'> <input type=text name=my_text id=t3> 
JQuery
<script>$(document).ready(function() {
$("#t3").prop("disabled", true);

 $("#ckb").change(function(){
  var ckb_status = $("#ckb").prop('checked');
  if(ckb_status){
$("#t3").prop("disabled", false);
}else{
$("#t3").prop("disabled", true);
}
});
});
</script>

Setting the value of textbox

$("#t4").attr('value','Default Data');

Making the value empty

$("#t4").attr('value','');

Selecting value inside textbox

$("#text_id").select(); // Select all data inside textbox with id =text_id

Getting id and value of group of text box with common class

We have several textboxes with different id and different value but with common class. Here is how we will collect the id and value of the textbox which the user put the crusher or the textbox in focus.
We will use blue event of the group to hide the display of value.
We have used one div element ( id = display ) to show the collected id and value of the textbox.
Here is the code.
$('.edit').focus(function(){
var id=this.id; // Collect id 
var id=$(this).attr('id') // Collect id
var val=$(this).val(); // Collect value

$("#display").html('id:'+id+', value:'+ val);
});
Visitors Rating
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer