How to modify cmarquee2 so a textArea can be accessed to enter scrolling content

[chrisjchrisj]

1) Script Title: Cross Browser marquee II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm
3) Describe problem: I'm wondering how this script can be modified so that ADD CONTENT HERE can be a textArea on a web page where a web page visitor can enter content, submit and see the scrolling content in the marquee container. I currently have a basic TextArea coding successfully working where text is entered, submitted and appears on the same html page (via php):



Comments:<br>
<textarea name="comments" id="comments" minlength="20" maxlength="120" rows="14" cols="130" form="myForm">
Hey... say something!
</textarea><br>
<form action="/textArea.php" target="processForm" method="post" id="myForm">
<input type="submit" value="Submit">
</form>
<br><br>
<iframe name="processForm" width="75%" height="70%">


and the php:



<?php
echo $_POST['comments'];
?>


but can't figure out how to integrate it with your cmarquee2 code.

Any guidance is greatly appreciated.

[keyboard]

Hey chrisjchrisj, and welcome to the forums! Apologies it took a while to respond.
Can you explain a bit regarding where the user's input is coming from? Is the user entering text into the form and then it is shown to them straight away? Or is it uploaded to a storage system (e.g., a database).
If it's being displayed straight away, you can use pure javascript (no PHP) to achieve what you're describing.

e.g., If you have the form and marquee HTML setup as follows


<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<h4>Your scroller contents</h4>
</div>
</div>

<form action="#" id="myForm">
Comments:<br />
<textarea name="comments" id="comments" minlength="20" maxlength="120" rows="14" cols="130" form="myForm">Hey... say something!</textarea>
<br />
<input type="submit" value="Submit">
</form>


You could use the following javascript code (you'll also need the Cross Browser marquee II script included)


<script type="text/javascript">
//Bind an event to run after the page is ready, so that we can interact with the DOM elements on the page.
document.addEventListener("DOMContentLoaded", () => {
//Get a reference to the form and the marquee DOM elements.
const form = document.getElementById("myForm");
const marquee = document.getElementById("vmarquee");

//Bind an event to trigger when the form is submitted.
form.addEventListener("submit", event => {
//Set the marquee's text to the contents of the input inside the form named "comments".
marquee.textContent = form.elements["comments"].value;

//Prevent the form from submitting.
return false;
});
})
</script>