Q:

How to create Javascript concatenation; Several text fields to seperate text areas?

I'm trying to concatenate 5 text fields into 2 different formats and have each specific format output to 2 seperate text areas in the same form/page.
The attached code works fine to output to TextArea1 but will not output to my second TextArea2.
So C+A, B+D, E to populate TextArea1.
And C+D, A, B+E to populate TextArea2.
Any help/advice would be greatly appreciated.
Thank you.
    <html>
    <script type="text/javascript">
    function setName()
    {document.forms[0].TextArea1.value = document.forms[0].TextC.value + ' ' + document.forms[0].TextA.value + ', ' + document.forms[0].TextB.value + ' ' + document.forms[0].TextD.value + ', ' + document.forms[0].TextE.value}
    </script>

    <script type="text/javascript">
    function setName()
    {document.forms[0].TextArea2.value = document.forms[0].TextC.value + ' ' + document.forms[0].TextD.value + ', ' + document.forms[0].TextA.value + ', ' + document.forms[0].TextB.value + ' ' + document.forms[0].TextE.value}
    </script>

    <head>
    </head>
    <body>
    <form method="post">
    <table >

<tr>
  <td style="width: 421px">
  <input name="TextA" onkeyup="setName()" type="text" />&nbsp; </td>
</tr>

<tr>
  <td style="width: 421px">
  <input name="TextB" onkeyup="setName()" type="text" /> </td>
</tr>

<tr>
  <td style="width: 421px">
  <input name="TextC" onkeyup="setName()" type="text" /> </td>
</tr>

<tr>
  <td style="width: 421px">
  <input name="TextD" onkeyup="setName()" type="text" /> </td>
</tr>

<tr>
  <td style="width: 421px">
  <input name="TextE" onkeyup="setName()" type="text" /> </td>
</tr>

<tr>
  <td style="width: 421px"><strong>C+A, B+D, E</strong><br />
  Created this outcome:<br />
  <input name="TextArea1" onfocus="setName()" style="width: 286px; height: 90px" type="text" wrap="hard" />
  <br />
  </td>
</tr>

<tr>
  <td style="width: 421px"><strong>C+D, A, B+E</strong><br />
  Created this outcome:<br />
  <input name="TextArea2" onfocus="setName()" style="width: 286px; height: 90px" type="text" wrap="hard" /></td>
</tr>

<tr>
  <td style="width: 421px"><strong>Clear Form</strong><br />
  <input name="Reset2" type="reset" value="reset" />&nbsp; </td>
</tr>
      </table>
    </form>
    </body>
    </html>

A:

You have two functions with the same name; the second overwrites the first.

A:

You have the function setName() defined twice. The first one is being called, but not the second one. Put the code from the second setName into the first one, along with the code that's already there, and it will work.
<script type="text/javascript">
function setName()
{
    document.forms[0].TextArea1.value = document.forms[0].TextC.value + ' ' + document.forms[0].TextA.value + ', ' + document.forms[0].TextB.value + ' ' + document.forms[0].TextD.value + ', ' + document.forms[0].TextE.value;
    document.forms[0].TextArea2.value = document.forms[0].TextC.value + ' ' + document.forms[0].TextD.value + ', ' + document.forms[0].TextA.value + ', ' + document.forms[0].TextB.value + ' ' + document.forms[0].TextE.value
}
</script>

