HTML Forum

**Physicsguy** · 05-21-2009, 08:56 PM

I am trying to make 2 textboxes that if you type something in on one of them, it also appears in the other, and if you try to change it, it changes them both.

How do you do this? Thanks >)

I've tried making two textboxes with the same name, but that doesn't work...

**JeremyMiller** · 05-21-2009, 10:09 PM

You'll need JavaScript. This code does it:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <script type="text/javascript">
      function syncTextAreas(source) {
        if (source.id == "textarea_1") {
          document.getElementById('textarea_2').value = source.value;
        } else if (source.id == "textarea_2") {
          document.getElementById('textarea_1').value = source.value;
        }
      }
    </script>
  </head>
  <body>
    <textarea id="textarea_1" onkeyup="syncTextAreas(this);"></textarea>
    <textarea id="textarea_2" onkeyup="syncTextAreas(this);"></textarea>
  </body>
</html>

**Physicsguy** · 05:14 PM

Thanks a lot! I hope it works with input fields!

EDIT: Yep, it does! THANK YOU SO MUCH!

**Physicsguy** · 08:45 AM

I have encountered a problem.

I want to have 4 synced textboxes, but not all the same.

For example, this is what I want:

You type in something in textarea_1, say you type in "Hello", and it syncs with textarea_2, so now they both say "Hello". That's what the script does above.

Then, you type in something in textarea_3, say you type in "Hi, there", and it syncs with textarea_4, so now they both say "Hi, there". How do you do this?

Thanks

Sorry for double-post, but I couldn't post it in an edit above since this thread is old and nobody would check it. So sorry.

Is what I'm asking even possible? I've fiddled around, to no avail...

**JeremyMiller** · 05-23-2009, 09:38 AM

Please post code demonstrating what you tried.

**Physicsguy** · 09:47 AM

Well, I tried just repeating the code:

Code:

<script type="text/javascript">
      function syncTextAreas(source) {
        if (source.id == "textarea_1") {
          document.getElementById('textarea_2').value = source.value;
        } else if (source.id == "textarea_2") {
          document.getElementById('textarea_1').value = source.value;
        }
      }
    </script>

<script type="text/javascript">
      function syncTextAreas(source) {
        if (source.id == "textarea_3") {
          document.getElementById('textarea_4').value = source.value;
        } else if (source.id == "textarea_4") {
          document.getElementById('textarea_3').value = source.value;
        }
      }
    </script>

But that didn't work...

So I tried:

Code:

<script type="text/javascript">
      function syncTextAreas(source) {
        if (source.id == "textarea_1") {
          document.getElementById('textarea_2').value = source.value;
        } else if (source.id == "textarea_2") {
          document.getElementById('textarea_1').value = source.value;
        if (source.id == "textarea_3") {
          document.getElementById('textarea_4').value = source.value;
        } else if (source.id == "textarea_4") {
          document.getElementById('textarea_3').value = source.value;
        }
      }
        }
      }
    </script>

And that didn't work...

I don't get it... The first one makes textareas 3 and 4 synced, but not 1 and 2, and the one you gave syncs 1 and 2, and the second one I posted doesn't work at all...

AARRGGHH my brain hurts

**JeremyMiller** · 05-23-2009, 09:47 AM

You just had some of your if/else statements crossed:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <script type="text/javascript">
      function syncTextAreas(source) {
        if (source.id == "textarea_1") {
          document.getElementById('textarea_2').value = source.value;
        } else if (source.id == "textarea_2") {
          document.getElementById('textarea_1').value = source.value;
        } else if (source.id == "textarea_3") {
          document.getElementById('textarea_4').value = source.value;
        } else if (source.id == "textarea_4") {
          document.getElementById('textarea_3').value = source.value;
        }
      }

    </script>
  </head>
  <body>
    <textarea id="textarea_1" onkeyup="syncTextAreas(this);"></textarea>
    <textarea id="textarea_2" onkeyup="syncTextAreas(this);"></textarea>
    <textarea id="textarea_3" onkeyup="syncTextAreas(this);"></textarea>
    <textarea id="textarea_4" onkeyup="syncTextAreas(this);"></textarea>
  </body>
</html>