Streaming live at 10am (PST)

Display input text as a text block on the same page?


#1

I'm looking for a way to take text entered into a text input field and display it as a text block on the same page.

Any thoughts on how to accomplish this in webflow?

thanks!

mrHunt


#2

Looking to do something similar to this, but I'm not sure how to implement it with the text boxes in Webflow...

<html>
<head>
	<title>JavaScript Test</title>
	<script language="JavaScript" type="text/javascript"><!--
	function GetText() {
		var sourceElement = document.getElementById("TextBox1");
		var targetElement = document.getElementById("TextBox2");

		targetElement.value = sourceElement.value;
	}
	// --></script>
</head>
<body>
Give it a try!  Type in the first text box and press the Tab key to move out of it.<br />
<br />
Clicking outside of the box will also work.<br />
<br />
<form action="#">
Box 1:  <input id="TextBox1" type="text" size="50" onBlur="GetText();" /><br /><br />
Box 2:  <input id="TextBox2" type="text" size="50" />
</form>
</body>
</html>bb

#3

Hi @mr_hunt Check this out. This is tested and work out as you asked http://livehelper.webflow.com/#copytextbox1valuetotextbox2

Its public link is https://webflow.com/design/livehelper?preview=64db81b7f9f1dcb5fe0be42d89a14d89 for you to observe elements and their properties.

Here is what it has done:

  1. I modified the script a little bit that I put it before /body tag on Custom Code settings.

    <script>
    $('#TextBox1').blur(function() {
    var sourceElement = document.getElementById("TextBox1");
    var targetElement = document.getElementById("TextBox2");
    
    targetElement.value = sourceElement.value;
    });
    </script>
  2. Drag a form and set input text boxes as plain, set its name myTextBox1 and myTextBox2, and set its unique id as TextBox1 and TextBox2. Notes that it's unique id that script above uses not their name.

Hope it helps.

Cheers


#4

Thank you! That is exactly what I am looking for. I have been unable to replicate though. Is there any other code that needs to be in the before/body section in Custom Code settings to enable this?

thanks again!

mrHunt


#5

Hi @mr_hunt. No other code needed. I only used that to achieve the result as you can see on Livehelper page smiley

Glad it helps.


#6

I was able to replicate your method! Thank you!


#7