Automatically making text to appear in another html element while being typed in form text field is awesome Using jQuery or Angular Js

It is basically a concise way of wiring up backend logical inference on the client server side without having to query the database. There by reducing work load to be handled by the database.

This function making query to appear elsewhere while being typed in a text field can be done using angular js or jQuery see example below.

In the example we displayed the result for the function of making text appear on line while text is been typed text field using Angular Js and jQuery.

Angular Js is more concise to do this project function of making a text typed in a text field to appear elsewhere though using jQuery one can still achieve same result but angular Js make its DRY keeping the codes neat and more professional look.

  • #1 EXAMPLE  : jQuery – Making text in text field to appear somewhere while been typed
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angular Js</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
  var name = $('#name');
  var greeting = $('#greeting');
  name.keyup(function(){
    greeting.text('Hello ' + name.val() + '!');
  })
})
</script>
</head>

<body>
<input id="name" type="text" />
<h2 id="greeting"></h2>
</body>
</html>
(#DEMO1) USING JQUERY to make text in text field to appear somewhere while been typed
  • #2 EXAMPLE : Angular Js – Making text in text field to appear somewhere while been typed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angular Js</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>

<body>
<input ng-model="name" type="text" />
<h2>Hello {{name}}!</h2>
</body>
</html>

LEAVE A REPLY

Please enter your comment!
Please enter your name here