String input automatically entered into readonly field

Question

Is it possible to copy an input from a previously entered field into another uneditable field javascript? Say for example you have two name fields, the first field you must enter your name, once entered the name will automatically be copied in the second text field which is uneditable. I have done a bit of searching around but i can't seem to find anything of use for this specific situation and i'm quite knew to javascript so any sort of help or a nudge in the right direction would be great.

What do you mean "uneditable"? As in, it has a readonly attribute? Get the elements by id and get/set the appropriate value property of them — Ian
– Ian, Commented May 21, 2013 at 16:38
If you have 2 id's , one for each text field , you can do document.getElementById('inputone').value = document.getElementById('inputtwo').value — Harsha Venkataramu
– Harsha Venkataramu, Commented May 21, 2013 at 16:39
It's possible. And easy with jQuery jsfiddle.net/j08691/WFvU9 — j08691
– j08691, Commented May 21, 2013 at 16:39
@j08691 that seems to work fine in jsfiddle but when i try to add it to my own code it doesn't work, should be between something? — daniel
– daniel, Commented May 21, 2013 at 16:46

user1796666 · Accepted Answer · 2013-05-21 16:42:10Z

3

Just use the keyup listener of your input:

<input type="text" id="input1" />
<input type="text" id="input2" readonly='readonly' />

var $input2 = document.getElementById('input2');
var $input1 = document.getElementById('input1');
$input1.addEventListener('keyup', function()
{
  $input2.value = $input1.value;
});

here's example: fiddle

answered May 21, 2013 at 16:42

user1796666

Sign up to request clarification or add additional context in comments.

2 Comments

daniel Over a year ago

It works find in jsfiddle but when i try it in my own code it doesn't work, should it be add between something?

daniel Over a year ago

oh wait i got it working, just added window.onload = function(event), thank you very much for the help!

vinicius gati · Accepted Answer · 2013-05-21 17:06:12Z

3

Yes you could, just do the follow:

document.getElementById('non_editable_name').value = document.getElementById('editable_name').value;

if you use jquery, you can do:

$('#non_editable_name').val($('#editable_name').val());

edited May 21, 2013 at 17:06

answered May 21, 2013 at 16:42

vinicius gati

4395 silver badges17 bronze badges

Comments

Daniel · Accepted Answer · 2013-05-21 16:41:54Z

0

Here is a fiddle. You can do this by using jQuery and code:

$(function () {
    $('#nameInput').change(function () {
        $('#secondInput').val($(this).val());
    });
});

with:

<input id="nameInput" type="text"/><br />
<input id="secondInput" type="text" readonly/>

answered May 21, 2013 at 16:41

Daniel

18.7k8 gold badges69 silver badges90 bronze badges

1 Comment

j08691 Over a year ago

You're assuming the OP is using jQuery.

Matt Berkowitz · Accepted Answer · 2013-05-21 16:40:30Z

-1

HTML

<input type="text" id="entry" />
<input type="hidden" id="storage" />

JS

(function() {

    $('#entry').on('change', function() { $('#storage').val(this.value); });

})();

answered May 21, 2013 at 16:40

Matt Berkowitz

9756 silver badges13 bronze badges

1 Comment

Harsha Venkataramu Over a year ago

Assuming that the OP is using jQuery. Also , what's the point of a 'hidden` input field?

Vinicius Lima · Accepted Answer · 2013-05-21 16:44:28Z

-1

Like this:

   <!DOCTYPE html>
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title>
      <script>
      function copianome(nome){
        document.getElementById('ds_name_result').value = nome;
      }
      </script>
      </head>
      <body>
        <input type="text" id="ds_name" onkeyup="copianome(this.value)" /><br />
        <input type="text" id="ds_name_result" readonly="readonly" />
      </body>
    </html>

answered May 21, 2013 at 16:44

Vinicius Lima

5447 silver badges20 bronze badges

Collectives™ on Stack Overflow

String input automatically entered into readonly field

5 Answers 5

2 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related