Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

185
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!