0

I'm looking for a simple way to achieve this without a page refresh:

1.) User enters a PARAGRAPH of text into an editable field or <p>

2.) User clicks a button

3.) Text is duplicated/copied to a non-editable <p>

Any ideas? Thanks!

EDIT: Building on the selected answer below, here is one approach to maintaining the paragraph line breaks;

Javascript:

function copyAddress() {
var x = document.getElementById("INPUTPARA").value;
document.getElementById("DUPEPARA").innerHTML = x;
} 

function addBreak(INPUTPARA) {
var textarea = INPUTPARA;
var matches = textarea.value.split(/\n|\s\n/);
textarea.value = matches.join("<br>\n") + "<br>";
}

function eraseText() {
document.getElementById("INPUTPARA").value = "";
}

HTML:

<textarea id="INPUTPARA"></textarea>
<button type="button" onclick="addBreak(this.previousElementSibling);copyAddress();eraseText()">Try     it</button>
<p id="DUPEPARA"></p>
Ben
  • 39
  • 5

3 Answers3

0

HTML

<input type="text" id="inp">
<button onclick="start()">COPY</button>
<p id="para"></p>

Javascript

function start(){
var text = document.getElementById("inp").value;
document.getElementById("para").innerHTML = text;
}

or if you want to use JQuery

function start(){
var text = $("#inp").val();
$("#para").html(text);
}

You could also use TEXTAREA with specified columns and rows 

<textarea rows="4" cols="50" id="inp"></textarea>

For preserving line breaks you can put this

#para{
white-space:pre-line;
}

SOURCE FOR LINE BREAKS

< p > is not editable by itself

Community
  • 1
  • 1
ii7scw
  • 351
  • 1
  • 3
  • 17
  • Many thanks! This works well for a single line but I don't think an input form can accept a PARAGRAPH - Am I right? – Ben Feb 09 '17 at 01:29
  • @Ben You can use Textarea as mentioned, you can specify it's rows and columns so it looks like a paragraph(line breaks at the end) – ii7scw Feb 09 '17 at 08:59
0
<form>
    <input type="text" id="text">
</form>

<button onclick="myFunction()">copy</button>

<p style="border:solid 1px #000;height:20px;" id="copied"></p>

<script>
    function myFunction() {
        var txt = document.getElementById("text").value;
        document.getElementById("copied").innerHTML = txt;
    }
</script>
ha_ryu
  • 568
  • 2
  • 7
  • 20
  • Many thanks for your solution, it works very nicely for a single line. Can you think of anything that would work for a paragraph and retain the paragraph's line breaks? – Ben Feb 09 '17 at 01:35
0
<textarea id="myTextarea"> 2233 West Chicago IL , 556699</textarea>
<p>Click the button to copy the address.</p>
<button type="button" onclick="copyAddress()">Try it</button>
<p id="copiedAddress"></p>
<script> function copyAddress() {
var x = document.getElementById("myTextarea").value;
document.getElementById("copiedAddress").innerHTML = x;
} </script>
Plaimanus Lueondee
  • 43
  • 4