angular js,jQuery,text field,field,text, Angular Js vs jQuery : Making text in text field to appear somewhere while been typed, Shopinson, Shopinson

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>
0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*

shopinson-logo-32

©2020 Shopinson: complete guide to programming language

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

Log in with your credentials

or    

Forgot your details?

Create Account