I have three text fields containing the following information: Name, Email, and Phone. How would I do that by filling in one of the fields, the same information would appear in the other field?
So what happens here when we enter our doubts. The text you type appears automatically below.
You can use angular for this.
Just add the script to the head of your site:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>Andtodowhatyou'reupto,justdothefollowing:
<htmlng-app><head><title>AngularJS-Tableless</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="nome">
<p>Olá, Meu nome é: {{ nome }}</p>
</body>
</html>
Example in JSFiddle
Remembering that depending on the javascript code you use, such as when keys are pressed, this may not work on mobile devices. So I advise you to use AngularJS
This is more or less simple to do. You need to add an event sink to run a function when the keyup event is called. Here you pass the value of the input into the div, or whatever else you have.
var input = document.querySelector('input');
var div = document.querySelector('div');
input.addEventListener('keyup', function () {
div.innerHTML = input.value;
});
This is done in the Browser, without recourse to anything on the server side via ajax.
Hello, a very easy way to do this is to use the data binding methodology.
There are many lightweight, easy-to-use frameworks for this, for example Ractive.js
If you want examples I post here, but I'll show you how to do this using just the same javascript.
var meuCampo = document.querySelector('input');
var paragrafo = document.querySelector('p');
meuCampo.addEventListener('keyup', function () {
paragrafo.innerHTML = meuCampo.value;
});
See that this has nothing to do with AJAX. AJAX is a request-response (request-response pattern) method of requesting information from a server, api, webservice, or whatever, and if you get a response without "crashing" page usage, ie performing an asynchronous request .
More on ajax here .