www.webdeveloper.com
Results 1 to 8 of 8

Thread: How to combine text from textareas into one textarea

  1. #1
    Join Date
    Nov 2009
    Posts
    4

    How to combine text from textareas into one textarea

    Hello. I'm new around here. Sorry if this is an obvious newbie question =).

    Problem = I have an HTML form that has 2 text areas. What I want to do is simply take the text entered into textarea1 and textarea2, combine the strings, and output the new string into textarea3. My situation is more complicated than this, but this is the part I cannot figure out how to do. Do I need JavaScript to do this? Sorry for the newb question. I tried Googling and searching w/in this site, but I haven’t found my answer. Thanks.

    My background - never really worked directly w/ HTML much. I've had past experience w/ Java and C++ couple years back. Did some JS recently too.

    HTML Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Release Note Builder</title>
    </head>
    
    <body>
    
    <h1>Combine strings</h1>
    <br/>
    <form>
    <textarea name="textarea1" cols="60" rows="5">
    [textarea1's text]
    </textarea><br>
    </form>
    
    <form>
    <textarea name="textarea2" cols="60" rows="5">
    [textarea2's text]
    </textarea><br>
    </form>
    
    <form>
    <textarea name="textarea3" cols="60" rows="5">
    // I want to combine whatever is entered in textarea1 and textarea2, and auto-populate the text here.
    // ex – if user entered “My car ran out of gas.” in textarea1, and entered “I had to push it off the road.” in textarea2, I want textarea3’s default text to be “My car ran out of gas. I had to push it off the road.”
    </textarea><br>
    </form>
    
    
    
    </body>
    
    </html>

  2. #2
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    what are you using to process the form?
    ...but stupidity is terminal.

  3. #3
    Join Date
    Nov 2009
    Posts
    4
    Quote Originally Posted by opifex View Post
    what are you using to process the form?
    I'm sorry, but I'm not sure I understand exactly what you are asking when you say "process".

    If you're asking how I came up w/ the code, it's from MS Frontpage. Is that what you're asking? Thanks for responding.

  4. #4
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    OK... a form doesn't do anything except provide a way to collect information... when you "submit" the form to an "action" it is processed by a program script.

    Do a search in your favorite search engine for form tutorials so you can get acquainted with the subject.
    ...but stupidity is terminal.

  5. #5
    Join Date
    Dec 2008
    Posts
    488
    Extremely basic solution? Give the textareas id's matching the corresponding names. Assuming you want to have this occur with the press of a button, use the onclick property of the button to run a very short script:
    Code:
    document.getElementById('textarea3').value=document.getElementById('textarea1').value+' '+document.getElementById('textarea2').value;
    So your page would look like:
    HTML Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Release Note Builder</title>
    </head>
    
    <body>
    
    <h1>Combine strings</h1>
    <br/>
    <form>
    <textarea id="textarea1" name="textarea1"cols="60" rows="5">
    [textarea1's text]
    </textarea><br>
    </form>
    
    <form>
    <textarea id="textarea2" name="textarea2" cols="60" rows="5">
    [textarea2's text]
    </textarea><br>
    </form>
    
    <form>
    <textarea id="textarea3" name="textarea3"cols="60" rows="5">
    // I want to combine whatever is entered in textarea1 and textarea2, and auto-populate the text here.
    // ex – if user entered “My car ran out of gas.” in textarea1, and entered “I had to push it off the road.” in textarea2, I want textarea3’s default text to be “My car ran out of gas. I had to push it off the road.”
    </textarea><br>
    <input type="button" value="combine" onclick="document.getElementById('textarea3').value=document.getElementById('textarea1').value+' '+document.getElementById('textarea2').value" />
    </form>
    </body>
    
    </html>
    Until I know more about exactly what you're trying to do, I can't tell you how to call it other than using the button, for now.

  6. #6
    Join Date
    Nov 2009
    Posts
    4
    jamesbcox1980/opifex,

    Thank you for both of your responses. jamesbcox1980's response was what I was looking for... I simply did not know how to reference my html form textareas. I do now.

    What I have now, which is what I need, is below. Thanks again.

    HTML Code:
    <html>
    
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    
    <script type="text/javascript">
    
    function doConcat()
    {
    	document.releaseNotes.releaseNoteCombined.value = document.releaseNotes.problem.value + " " + document.releaseNotes.consequence1.value + " " + document.releaseNotes.whatWasDone.value;
    }
    </script>
    
    <title>Release Note Builder</title>
    </head>
    
    <body>
    
    <form name="releaseNotes">
    
    <h1>Release Notes Builder</h1>
    <br/>
    
    <textarea name="problem" cols="60" rows="5">
    [Problem description]
    </textarea><br>
    
    
    
    <textarea name="consequence1" cols="60" rows="5">
    As a result, [consequence]
    </textarea><br>
    
    
    <textarea name="whatWasDone" cols="60" rows="5">
    In this task, [X Y and Z were fixed]. After this task is delivered, [what will be different/fixed]
    </textarea><br>
    
    <br>
    <input type="button" align="middle" onclick="doConcat()" value="Generate" style="height: 50px; width: 120px" />
    <br>
    
    <h3>Release note</h3>
    
    <textarea name="releaseNoteCombined" cols="60" rows="5">
    </textarea><br>
    <br>
    
    
    
    </form>
    
    </body>
    
    </html>

  7. #7
    Join Date
    Dec 2008
    Posts
    488
    Keep in mind that "name" is not used in the same ways as "id". Id is used in situations where you want to seperate each element so each is idenified and referenced using a seperate id. Name can be used in the same way but was created more to refer to groups of form elements. You can actually name several inputs the same thing and refer to them using the array (HTML collection, actually) document.getElementsByName().

    In conclusion, you can do it the way you did n his situation, but you find yourself in a situation where you need to refer both to an individual item or a group of items.

  8. #8
    Join Date
    Nov 2009
    Posts
    4
    Quote Originally Posted by jamesbcox1980 View Post
    Keep in mind that "name" is not used in the same ways as "id". Id is used in situations where you want to seperate each element so each is idenified and referenced using a seperate id. Name can be used in the same way but was created more to refer to groups of form elements. You can actually name several inputs the same thing and refer to them using the array (HTML collection, actually) document.getElementsByName().

    In conclusion, you can do it the way you did n his situation, but you find yourself in a situation where you need to refer both to an individual item or a group of items.
    Cool, that makes sense (had to read it twice though =P). Thanks for the info.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles