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:
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.
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”.
@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!
@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!
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.
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:
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.
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!
@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…