Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

187
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda