Fill a text field and display the same text in another field

Asked

Viewed 3,287 times

5

I have three text fields containing the following information: Name, Email and Phone. How I would do so that when filling out one of the fields, the same information would appear in the other field?

Just like what happens here when we type our questions. The text we type appears below automatically.

javascript

3 answers

5

This is more or less simple to do. You need to add an event headset to run a function when the event keyup is called. Then you pass the value of the input into the div, or other element that 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.

jsFidde: http://jsfiddle.net/x5vwp6uo/

  • 1

    Good answer. Could add an explanation about this not being ajax, since the OP included the tag in the question.

2


You can use angular for this.

just add the script to the head of your website : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

and to do what you’re wanting just do the following:

<html ng-app>
    <head>
        <title>AngularJS - Tableless</title>
        <script src="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 events when keys are pressed it may not work on mobile devices. That’s why I recommend using Angularjs

  • 3

    You’re gonna suggest to the guy to include the whole angle just to do this ?

  • But you recommend solving his problem in what way? Note: In a practical way and with clean code.

  • 2

    With pure javascript as it is a very simple problem.

  • 2

    I just think that there is no reason not to use a framework like Angularjs that solves the problem in such a simple and organized way to make pure js codes.

  • 2

    If the OP already use angular in his system would obviously be correct, but I think that is not the case. Then include an entire lib that does much more than manipulate the DOM only to manipulate the GIFT would not be coherent.

1

Hello, a very easy way to do this is by using the Binding data methodology.

There are many lightweight and easy-to-use frameworks for this, for example the Ractive.js

If you want examples I put here, but I’ll show you how to do this using only 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 methodology (standard request and answer) to request information from a server, api, webservice or anything of the kind and to obtain a response without "locking" the use of the page, that is to say to carry out an asynchronous request.

More about ajax here.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.