How to do when click "send" change the final text Form

Question

I want the result of the content typed in the "Text" field to automatically exit between a preset text within the "Post Text" field".
Ex: when typing exemplo in the "Text" field and click submit, the result will automatically appear in "Post Text" Seu "exemplo" aqui or <<<< exemplo >>>> <div>exemplo</div>

In the moment it’s like this:

My point:

<script>
  function submitted() {
    formValue = document.getElementsByName("texto")[0].value;
    document.getElementsByName("texto")[1].setAttribute("value", formValue); // Copia
    return false;
  }
</script>

<form onsubmit="return submitted()"> 
  Texto:<br><input type="text" name="texto">
  <input type="submit" value="Enviar"><br><br> 
  Pós texto:<br><input type="text" name="texto">
</form>

Answer 1

You can already take the value of the first input, then just concatenate to it what you want using the signal + (similar to the point . in PHP).

But you can use another syntax and dispense with the use of setAttribute:

document.getElementsByName("texto")[1].value = 'seu "'+formValue+'" aqui';

Example:

function submitted() {
   formValue = document.getElementsByName("texto")[0].value;
   document.getElementsByName("texto")[1].value = 'seu "'+formValue+'" aqui';
   return false;
}

<form onsubmit="return submitted()"> 
  Texto:<br><input type="text" name="texto">
  <input type="submit" value="Enviar"><br><br> 
  Pós texto:<br><input type="text" name="texto">
</form>

Adding values from multiple fields:

function submitted() {
   var formValue0 = '<div>'+ document.getElementsByName("texto")[0].value +'</div>';
   var formValue1 = '<script>'+ document.getElementsByName("texto")[1].value +'<\/script>';
   var formValue2 = '<style>'+ document.getElementsByName("texto")[2].value +'</style>';
   document.getElementsByName("texto")[3].value = formValue0+formValue1+formValue2;
   return false;
}

<form onsubmit="return submitted()"> 
  Campo 1:<br><input type="text" name="texto"><br>
  Campo 2:<br><input type="text" name="texto"><br>
  Campo 3:<br><input type="text" name="texto"><br>
  <input type="submit" value="Enviar"><br><br> 
  Pós texto:<br><input type="text" name="texto">
</form>

To concatenate the tag </script> inside the code, you need to escape the closing bar, otherwise the code will interpret as if you were terminating the script:

 ↓
<\/script>

Answer 2

I will publish my comment as a response, already suitable for com outros campos etc...

Just make use of concatenation.

Concatenation We can understand concatenation to be the joining of two strings (phrases or words). The operator for concatenating is the plus sign +.

function submitted() {
   var formValue = '<div>'+ document.getElementsByName("texto")[0].value +'</div>';
   formValue += '<script>'+ document.getElementsByName("texto")[1].value +'<\/script>';
   formValue += '<style>'+ document.getElementsByName("texto")[2].value +'</style>';
   document.getElementsByName("texto")[3].value = formValue;
   return false;
}

<form onsubmit="return submitted()"> 
  Campo 1:<br><input type="text" name="texto"><br>
  Campo 2:<br><input type="text" name="texto"><br>
  Campo 3:<br><input type="text" name="texto"><br>
  <input type="submit" value="Enviar"><br><br> 
  Pós texto:<br><input type="text" name="texto">
</form>

To textarea, for each to stay on a separate line, and not to send blank or null fields.

linha separada just add \n (new line) at the location you want to break the line.

para não enviar campos em branco use the method trim()

The Trim() method removes unnecessary spaces declared at the beginning and/or end of a string.

Compatibility between browsers

function submitted() { 
   
var texto0= (document.getElementsByName("texto")[0].value).trim();
 var texto1= (document.getElementsByName("texto")[1].value).trim();
  var texto2= (document.getElementsByName("texto")[2].value).trim();
   
   if(texto0!=""){
    texto0= '<div>'+ texto0 +'</div>\n';
   }
   if(texto1!=""){
   texto1= '<script>'+ texto1 +'<\/script>\n';
   }
   if(texto2!=""){
   texto2= '<span>'+ texto2 +'<\/span>\n';
   }

   var formValue = texto0 + texto1 + texto2;
   document.getElementsByName("texto")[3].value = formValue;
   return false;
}

<form onsubmit="return submitted()"> 
  Campo 1:<br><input type="text" name="texto"><br>
  Campo 2:<br><input type="text" name="texto"><br>
  Campo 3:<br><input type="text" name="texto"><br>
  <input type="submit" value="Enviar"><br><br> 
  <textarea name="texto" style="height:200px"></textarea
</form>

In the closing tags </script> must escape the bar / with a counter \,that is to say <\/script>

can also use as follows: </scr'+'ipt>

formValue += '<script>'+ document.getElementsByName("texto")[1].value +'</scr'+'ipt>\n';

when it splits into two strings and concatenates, it will not interfere with the rendering engine