Click a button and add text to a textarea

Hi Guys,

I am using ASP Classic

I have a form with a textarea in it - which will have some text in it

I would like to be able to add the current date and time to the end of the text in the textarea on the push of a button by the user. The code below is what I have come up with based on a little javascript knowledge and my knowledge of ASP - the code currently works but before implementing it across the site - I thought I'd check and make sure that what I have done is the most efficient

I would also like the function to be made generic enough to be passed the id of a textarea and use that id to insert the text

The form name in which the textarea resides is "frmEvents" and the name of the text area is "description"

<script>
    function AddDate() {
        var txt = document.frmevents.Description.value.toString();
        var curDateTime = new Date()
        var varDateTime = curDateTime.toLocaleString();

        // insert 2 newlines + a line of equals
        txt = txt + '\n' + '\n' + '================================================='

        // attach current datetime string to existing string
        // with newline "Comment Added : "
        txt = txt + '\nComment added : ' + varDateTime
        document.frmevents.Description.value = txt
        return true; //??
    }

</script>

Open in new window



MTIA

DWE
LVL 1
dwe0608Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I would just add it to the insert code.

Assume you have this form field.
<textarea name="mytext" id="mytext" cols="45" rows="5"></textarea>

Open in new window


Your asp code to accept form input would be
<%
dim MyText
MyText=request.form("mytext")
MyText=replace(MyText,"'","") ' at least some simple data scrubbing
MyText=MyText&vbcrlf&"Date Updated "&now

%>

Open in new window

This way the user can't remove the date stamp.
0
dwe0608Author Commented:
Hi Padas,

The idea is that there will be several additions over time to the text in the textarea - it is the users responsibility to add the note - thus I am providing them with a tool to add a date/time string in a uniform fashion .... I have modified the code as below to set focus to the textarea after the insertion of the code ...

I need some help to put the cursor at the end of the text ...

I also need some helpt to modify the code to accept the id of any textarea passed to the function ...

MTIA

DWE
0
dwe0608Author Commented:
sorry - forgot the code

<script>
    function AddDate() {
        var txt = document.frmevents.Description.value.toString();
        var curDateTime = new Date()
        var varDateTime = curDateTime.toLocaleString();

        // insert a newline
        txt = txt + '\n' + '\n' + '============================================================'

        // attach current datetime string
        txt = txt + '\nComment added : ' + varDateTime + '\n' + '\n'
        document.frmevents.Description.value = txt
        // set focus to end of the text in the textarea 
        document.frmevents.Description.focus()

        return true; //??
    }

</script>

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
http://jsbin.com/OzejOLi/3/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Padas </title>
</head>
<body>
  <!-- http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/ASP/Q_28241347.html#a39498288 -->
  <button onclick="AddDate()">Add Date</button>
  <textarea name="mytext" id="mytext" cols="45" rows="5">Hello EE</textarea>
</body>
</html>

Open in new window

function AddDate() {
   var txt = '';
   var curDateTime = new Date();
   var varDateTime = curDateTime.toLocaleString();
   txt = txt + '\n' + '\n' + '=================================================';
   txt = txt + '\nComment added : ' + varDateTime;
   var my_text = document.getElementById('mytext');
   my_text.value = my_text.value +' '+ txt;
}

Open in new window

0
dwe0608Author Commented:
Hi Padas

Changed your code to work as follows (note its the "id" I changed so as to be generic):

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Padas </title>
</head>
<body>
  <!-- http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/ASP/Q_28241347.html#a39498288 -->
  <button onclick="AddDate('mytext')">Add Date</button><br>
  <textarea name="mytext" id="mytext" cols="45" rows="5">Hello EE</textarea>
</body>
</html>
  

Open in new window



function AddDate(id) {
   var txt = '';
   var curDateTime = new Date();
   var varDateTime = curDateTime.toLocaleString();
   txt = txt + '\r\n' + '\n' + '=================================================';
   txt = txt + '\nComment added : ' + varDateTime;
   var my_text = document.getElementById(id);
   my_text.value = my_text.value +' '+ txt;
}

Open in new window


Now how do I put the cursor at the end of the text ?

MTIA

DWE
0
dwe0608Author Commented:
Hi Guys,

Solved the problem including some error checking on the passed parameter.

<script>
    function AddDate(id) {
        var txt = '';
        var fn = 'AddDate';
        var curDateTime = new Date();
        var varDateTime = curDateTime.toLocaleString();
        var my_text = document.getElementById(id);
        // text to insert
        txt = txt + '\r\n' + '\n' + '=================================================';
        txt = txt + '\nComment added : ' + varDateTime;


        if (null === my_text) {
            var msg = "param is NULL";
            alert("Function: " + fn + "\r\n\r\n" + msg);
        }
        else {
            if (my_text.value.length > 1) {
                my_text.value += txt;
            }
            else {
                my_text.value = txt;
            }
            //	alert("Function: " + fn + "\r\n\r\n" + txt );
            my_text.focus();
            moveCursorToEnd(my_text);
        }
    }

    function moveCursorToEnd(el) {
        if (typeof el.selectionStart == "number") {
            el.selectionStart = el.selectionEnd = el.value.length;
        } else if (typeof el.createTextRange != "undefined") {
            el.focus();
            var range = el.createTextRange();
            range.collapse(false);
            range.select();
        }
    }


</script>

Open in new window


Working code found here:
http://jsbin.com/OmEfEQ/3/edit?html,css,js,console,output

Padas, thanks greatly for the help, I couldnt have finalised it without your assistance.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Having joined the party late - without padas improvements here is a simplified generic version of the script (without move cursor code)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>28241347</title> 
<script type="text/javascript">
function AddDate(id) {
    // Get the element
    var el = document.getElementById(id);
    // Append the coment
    el.value += '\n' + '\n' + '================================================='+ '\nComment added : ' + Date().toLocaleString();

    return true; 
}
</script>
</head>
<body>
    <textarea id="fred"></textarea>
    <button onclick="return AddDate('fred');">Add Date</button>
</body>
</html>

Open in new window

You can do the append in one line - without having to create a Date() object.
0
dwe0608Author Commented:
Many thanks for the assistance guys
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.