JQuery textbox reading entered data, disableing and managing using Jquery

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

Video Tutorial on JQuery TextBox

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

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','');

$("#t1").val('');

Set Focus

$('#t1').focus();

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);
});

Adding Style to Textbox

$('#t1').css('border-color', 'red'); // Border color red 
$('#t1').css('border-color', ''); // Remove border color 
// Background colour ///
$('#t1').css('background-color', 'green'); // Add background color
$('#t1').css('background-color', ''); // Remove background color

Video Tutorial code

<html>
<head>
<title>(Type a title for your page here)</title>
<META NAME="DESCRIPTION" CONTENT=" ">
<META NAME="KEYWORDS" CONTENT=" ">
</head>
<body>
<input type=text id=t1> <button id=b1> Display </button> 
<input type=text id=t2><br>
<span id=display></display>

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Jquery code here ///
$('#t1').blur(function(){
var data=$('#t1').val();
if(data.length <=3){
var msg="Minimum length is 3 ";
$('#t1').css('border-color','red'); // border color
$('#t1').css('background-color','#f1f1f1'); // background color
}else{
$('#t1').css('border-color','green'); // border color
$('#t1').css('background-color','#ffffff'); // background color
var msg="OK.";
$('#t2').attr('value',data);
$('#t1').hide();
}
$('#display').html(msg);
});
/////
$('#t1').focus(function(){
$('#display').html('Enter your name');
});
////////
$('#b1').click(function(){
$('#t1').show();
});
////
});
</script>
</body>
</html>

Textbox Code Generator using Bootstrap style DEMO : Group of Textbox Managing Button Radio button

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

JQuery Textbox

Video Tutorial on JQuery TextBox