Hi Everyone,
I am writing this article to help those who are very new to jquery,
Requirement is : Need to update one input box on changing the text in other text box.
Solution: I am assuming that you know the basic of html and javascript.
Here is the text version of the code. you just have to copy the code and paste this text in notepad file and save that file as html.
------------------------Beginning of Code------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#FirstInput").on('keyup', function () {
$("#SecondInput").val($(this).val())
});
});
</script>
<title></title>
</head>
<body>
<div>
First InputBox <input type="text" id="FirstInput" value="" /> <br />
Second InputBox <input type="text" id="SecondInput" value="" /> <br />
</div>
</body>
</html>
------------------------------End Of Code-----------------------------------------------
After running this code, the output will be :
As you can see if i enter "G" in First InputBox the value will automatically be reflect in 2nd InputBox.
The Jquery Code which is doing all this is :
$("#FirstInput").on('keyup', function () {
$("#SecondInput").val($(this).val())
});
$ is inbuild keyword to access elements using jquery and every function that need to be registered on element are to be enclosed in ready method of jquey as provided in code.
Happy Coding :)
I am writing this article to help those who are very new to jquery,
Requirement is : Need to update one input box on changing the text in other text box.
Solution: I am assuming that you know the basic of html and javascript.
Here is the text version of the code. you just have to copy the code and paste this text in notepad file and save that file as html.
------------------------Beginning of Code------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#FirstInput").on('keyup', function () {
$("#SecondInput").val($(this).val())
});
});
</script>
<title></title>
</head>
<body>
<div>
First InputBox <input type="text" id="FirstInput" value="" /> <br />
Second InputBox <input type="text" id="SecondInput" value="" /> <br />
</div>
</body>
</html>
------------------------------End Of Code-----------------------------------------------
After running this code, the output will be :
As you can see if i enter "G" in First InputBox the value will automatically be reflect in 2nd InputBox.
The Jquery Code which is doing all this is :
$("#FirstInput").on('keyup', function () {
$("#SecondInput").val($(this).val())
});
$ is inbuild keyword to access elements using jquery and every function that need to be registered on element are to be enclosed in ready method of jquey as provided in code.
Happy Coding :)
No comments:
Post a Comment