1

Quero que o resultado do conteúdo digitado no campo "Texto" saia automaticamente entre um texto pré definido dentro do campo "Pós Texto".
Ex: ao digitar exemplo no campo "Texto" e clicar em enviar, o resultado aparecer automaticamente em "Pós Texto" Seu "exemplo" aqui ou <<<< exemplo >>>> <div>exemplo</div>

No momentos está assim:
No momento está assim

Onde quero chegar:
Final

<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>
6
  • Sua pergunta não ficou muito clara, vc quer mostrar o resultado em outra página é isto?
    – LeAndrade
    Commented 23/06/2018 às 17:22
  • Reformulei a pergunta
    – Mark Vaaz
    Commented 23/06/2018 às 17:27
  • Mas se vc não quer enviar o form, pois está dando um return false, pq pegar as informações de um formulário?
    – LeAndrade
    Commented 23/06/2018 às 17:36
  • formValue = "<div>"+(document.getElementsByName("texto")[0].value)+"</div>";
    – user60252
    Commented 23/06/2018 às 17:43
  • Oi amigo! Por que fica alternando a marcação de um resposta a outra?
    – Sam
    Commented 25/06/2018 às 0:15

2 Respostas 2

2

Você já consegue pegar o valor do primeiro input, aí é só concatenar a ele o que você deseja usando o sinal + (semelhante ao ponto . no PHP).

Mas você pode usar outra sintaxe e dispensar o uso do setAttribute:

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

Exemplo:

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>

Adicionando valores de vários campos:

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>

Para concatenar a tag </script> dentro do código, é preciso escapar a barra de fechamento, senão o código vai interpretar como se você estivesse encerrando o script:

 ↓
<\/script>
6
  • Sim, basta vc pegar os campos pelo índice [1], [2], [3] no document.getElementsByName("texto")[índice].value e alterar como quiser.
    – Sam
    Commented 23/06/2018 às 19:36
  • Não use o campo de respostas para colocar dúvidas. Atualizei a minha resposta com outros campos.
    – Sam
    Commented 23/06/2018 às 19:51
  • Apenas é preciso fazer isso com <\/script> ou algum outro também? tipo </head> </body> etc..
    – Mark Vaaz
    Commented 23/06/2018 às 19:54
  • Só no </script>
    – Sam
    Commented 23/06/2018 às 19:56
  • eu mudei o "Pos Texto" pra <textarea name="texto" style="height:200px"></textarea> como faço pra cada um ficar em uma linha separada?
    – Mark Vaaz
    Commented 23/06/2018 às 20:11
0

Vou publicar meu comentário como resposta, já adequando para com outros campos etc..

Basta fazer uso de concatenação.

Concatenação Podemos entender concatenação como sendo a junção de duas strings (frases ou palavras). O operador para fazer concatenação é o sinal de adição +.

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>

Para textarea, para cada um ficar em uma linha separada, e para não enviar campos em branco ou nulos.

linha separada basta acrescentar \n (nova linha) no local que quiser quebrar a linha.

para não enviar campos em branco utilize o método trim()

O método trim() remove os espaços desnecessários declarados no início e/ou no final de uma string.

Compatibilidade entre navegadores

inserir a descrição da imagem aqui

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>

Nas tags de fechamento </script> deve-se escapar a barra / com uma contrabarra \,ou seja <\/script>

também pode usar da seguinte forma: </scr'+'ipt>

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

quando divide em duas strings e concatena, fará com que não atrapalhe o motor de renderização

4
  • Se o campo tiver em branco ele vai enviar a string do mesmo jeito, como fazer para que ele n envie nada dos campos em branco?
    – Mark Vaaz
    Commented 24/06/2018 às 2:01
  • @MarkVaaz, mas o que vc está enviando? Isto não está claro na sua pergunta nem no seu comentário. Todos os campos? Só o do Pós texto?
    – user60252
    Commented 24/06/2018 às 5:54
  • Na verdade eu não vou usar o formulario para enviar algo, só achei o formulario a maneira mais facil (na minha opinião) de fazer o que preciso, que é um gerador de HTML personalizável, geralmente eu preciso fazer algo que vai o msm codigo repetidamente, e com isso agr eu posso agilizar um processo q levava 10 minutos pra 2 minutos, e também simplificar o trabalho de uma maneira que até alguém que não sabe nada consiga fazer
    – Mark Vaaz
    Commented 24/06/2018 às 23:56
  • Obrigado pela ajuda
    – Mark Vaaz
    Commented 25/06/2018 às 0:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .