Mirror input field to a text field on keyboard strokes

Hi everyone,

Per the guidelines, here is my share link before I even say anything haha. The page I am referencing in this post is called Success, and the elements I am referencing to are contained in columns called Columns-Help.

I am wanting to mirror what a user inputs into a form’s field into another non-form text field on the same page. My Javascript skills are not very good, but these are the things I found online that I tried and failed at:

JS Fiddle Mirror Fields
Stack Overflow mirror one text input to another
HTML Goodies copy text from one field to another

In most of these cases, I added a script to the page. I tried in the page’s custom code section, adding it to the footer, and within the form. Then, I renamed classes or IDs based on what each article was referencing and published the site. However, I was unsuccessful in implementing any of these.

Ideally, the user inputs something into the form field (email for example in the left-hand column) and it is referenced on the right hand column in real-time. It would be great if the field on the right was a text field and not directly editable so the user cannot input anything there. I would like them to input everything on the left.

If anyone has any ideas, I would really appreciate the help. Again, not very good at Javascript, but very familiar with everything Webflow.

Thanks!

Hey, what’s up man. Crazy you posted this because I am actually making a cloneable project that has this exact thing.

Anyhow, try adding this to the custom code in the footer section in settings on your page:

<script>
var inputBox = document.getElementById('text-input');

inputBox.onkeyup = function(){
    document.getElementById('text-reflect').innerHTML = inputBox.value;
}
</script>

So for the field I want to mirror I have an id of “text-input” on it.
Then create another div (you don’t have to put anything inside of it) and style it the same way you would another input field or how you have it with the light blue and give that div an id of “text-reflect”.

Should work fine. Hope this helps :grin:

2 Likes

@Noah-R …Wow. Simple explanation, and worked like a charm. I cannot thank you enough! Really, really appreciate you seeing the post and taking time to write down the solution!

1 Like

So glad to hear that! You’re very welcome man! :call_me_hand:

1 Like

@Noah-R Well man…I spoke too soon haha. I got the one input/reflect working, but now I don’t know how to get the other two working. I tried a couple things in the footer code, basically just duplicating the code you provided with new IDs that I gave to the elements. I’m sure my screenshots are laughable as I don’t know a thing about Javascript haha. If you have any suggestions, I’d really appreciate it again! Thanks!

1 Like

Haha, I got you man… Give me one sec and I will record a video for you!

Dang I appreciate it! I can’t even imagine how funny the code I wrote was :rofl:

Haha, nah, I think you just did a bit more than you had to. All good man…

Ok So here is the video link: https://cl.ly/d7db5121f663

That way you can understand what’s going on and then I pasted the new code below so you can follow a bit easier. Hope this works right for you this time lol.

<script>
  var inputName = document.getElementById('input-name');
  var inputMessage = document.getElementById('input-message');

  inputName.onkeyup = function(){
      document.getElementById('reflect-name').innerHTML = inputName.value;
  }
  inputMessage.onkeyup = function(){
      document.getElementById('reflect-message').innerHTML = inputMessage.value;
  }
</script>
1 Like

Dude, thank you. It all works. Really thankful you put that video together, too - helped me actually understand. I’m in the home stretch of this site, and this was killing me. Thank you. I can’t say it enough.

Two things:

  1. I have to do something for you since you helped me. Venmo? This is lame, but I saw you do a lot of mockups with GraphicOwls, and I purchased this presentation kit for Sketch/Photoshop recently. If you ever want the files, just let me know - They are some of the best I have seen, and I use them all the time.

  2. “Things She Do” :fire::fire::fire:

AWESOME man! So glad to hear that! And no I can’t accept any money. I really just wanted to help out! I love helping so, really no trouble at all. Those mockups looks great… I would be down to check those out!

Oh you checked out my song?! That’s so dope. Thanks a million man!

Awesome man - lmk what files you want of the Presentation Kit (or everything). It’s kind of weird how they have it setup - you download it as you need it, and they have like 30 different files. Happy to send all though, just lmk!

Honestly I don’t know off top what I would choose. If it’s not too much trouble I would just say all. Makes it easier. Really appreciate that man!

Right on - I will get all the files into Dropbox/similar and share to your Graphic Owls “hello” email. Just give me a couple days. Sound good to you?

1 Like

Yeah, that’s great! Thanks so much man! I appreciate it!

@Noah-R I’ve just spend the last day looking for the same thing - so happy I found this thread, worked perfectly!

I’m now looking to go one step further and modify the mirrored text by applying a formula to result in a price that’s relative to the value that’s typed in on keystrokes. Would you know how to do this? Also, currency formatting found be handy too…

Hope you can help!

Hi Noah,
Any chane you could post the video again… the link seems to be dead, this would really help us finding this thread having the same problem.

Thanks,
Milan