How do I copy the contents of the text area and post them into another div using html and javascript

Question

1.00/5 (1 vote)

See more:

I have written following code to get the data from textarea those input by user and show that data on the div(odiv3) after clicking on "ok" button;

How i can show this data on div ?

HTML

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Three Div Tags</title>
<script  type ="text/javascript" language ="javascript"  >
<script  type ="text/javascript" language ="javascript"  >
function showDiv1()
{
 
document.getElementById('Div1').innerHTML=document.getElementById('TextArea1').value;
return false;
}
    </script>


<input type="submit" id="btn" value="ok" onclick="return showDiv1();" />



<style type="text/css">
#odiv1{
    margin:3px;

    background-color:#333333;
    height:400px;
    width:460px;
}
#odiv2{
background-color:#0066FF;
margin-left:8px;
    margin-top:15px;

    height:200px;
    width:200px;
    float:left;

}
#odiv3{ overflow:Auto;
margin-top:12px;

   float:right;
    background-color: #00FF66;
    height:340px;
    width:200px;

}
</style>

</head>

<body>
<form name="form">
<div id="odiv1"><p align="left">odiv1</p>
<div id="odiv2">div2<br>
  <textarea  id="text" name="text" cols="20"  rows="5"></textarea>
</br></div>
<div id="odiv3">odiv3<br>
  </br></div>
</div>

   </form>
</body>
</html>

I want to do this using html and javascript not in jquery...

Thanks in advance,
Sandra

Posted 4-Jan-15 19:10pm

Sanjita Priya

Add a Solution

2 solutions

Solution 1

How about using such a convenient and robust library as jQuery:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com/[^]?

This is what you would need:
http://api.jquery.com/category/selectors/[^],
http://api.jquery.com/html[^],
http://api.jquery.com/category/manipulation/dom-insertion-inside/[^].

If you need to learn jQuery (highly recommended), please see:
http://learn.jquery.com[^],
http://learn.jquery.com/using-jquery-core[^],
http://learn.jquery.com/about-jquery/how-jquery-works[^] (start from here).

—SA

Posted 4-Jan-15 19:19pm

Sergey Alexandrovich Kryukov

Updated 4-Jan-15 19:20pm

v3

Comments

Sanjita Priya 5-Jan-15 2:13am

I don't know jquery programming and I need to do in javascript for my project...

Sergey Alexandrovich Kryukov 5-Jan-15 2:41am

Okay, do you want to reinvent the wheel? Yes, you can, but it would be just the boring waste of time.
What do you mean, "need to do in javascript"? What do you think I've suggested, not Javascript? What you wrote is nonsense, sorry.
—SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Accepted Answer · 2015-01-04T20:15:00

Try this:

XML

<!DOCTYPE html>
<head>
<title>Three Div Tags</title>
<script>
function showDiv1()
{
   odiv2Value = document.getElementById('text').value;
   // replace JavaScript line break with HTML <br>
   odiv2Value = odiv2Value.replace(/(?:\r\n|\r|\n)/g, '<br>');
   document.getElementById('odiv3').innerHTML=odiv2Value ;
   return false;
}
</script>
</head>
<body>
<form name="form">
<div id="odiv1"><p align="left">odiv1</p>
<div id="odiv2">div2<br>
  <textarea  id="text" name="text" cols="20"  rows="5"></textarea>
</br></div>
<div id="odiv3">odiv3<br>
  </br></div>
</div>
 <input type="submit" id="btn" value="ok" onclick="return showDiv1();">
</form>
</body>
</html>