Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

186
Visualizações
How to create a button that works as an output display for input values AS WELL AS copy button for the displayed output?

I am studying a vanilla JS and I would like to create a form wherein the values in the input elements will be displayed inside a button. I am planning to create a form where the user will fill the questions out with their details then those answers will be displayed on the same HTML page formatted in a certain template. Currently, I can display the output however there's no line break per value. Also, since the display is a button element, the user should be able to click it to copy the formatted answers that they can paste on notepad or MS word. Is this even possible in vanilla JS or do I have to learn JS frameworks? Can you share your thoughts?

Example display on a button that can be clicked to copy the below information:

Name: John Smith (line 1)

Age: 99 (line 2)

This is the current output:

What I've got

This is my current scripts:

<form name="myForm">
    Name: <input type="text" id="myName" name="myName">
    Age:  <input type="number" name="myAge" id="myAge">
    <button type="submit" name="createBtn" id="createBtn" onclick="create(); return 
false">CREATE</button>
</form>
<div>
    <button type="submit" id="copyBtn" onClick="copy(); return false">
        <span id="userName"></span>
        <span id="userAge"></span>
    </button>
</div>

<script>
    function create() {
        document.getElementById('userName').innerHTML = document.myForm.myName.value;
        document.getElementById('userAge').innerHTML = document.myForm.myAge.value;
    }
    function copy() {
        // insert the needed function here
    }
</script>
about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda