How to take data from a <form> and display the input values in a separate <div>

Question

I have 2 <div>

<div id="form">
    <form id="myform">
         <input type="text" id="value1"/>
         <input type="submit" value="Submit"/>
    </form>
</div>

<div id="display">
    <!--- value1 to be displayed here -->
</div>

I need to do this all in 1 file (no php or jsp).

Any ideas?

The Process · Accepted Answer · 2016-03-16 01:42:42Z

2

You can do it by setting event listener on input field and writing value of that field inside div
Check example snippet below

$('#value1').on('input', function() {
  $('#display').text($(this).val());


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form">
  <form id="myform">
    <input type="text" id="value1" />
    <input type="submit" value="Submit" />
  </form>
</div>

<div id="display">
  <!--- value1 to be displayed here -->
</div>

answered Mar 16, 2016 at 1:42

The Process

5,9533 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jpgerb Over a year ago

if I had 12 "text" inputs - would you do the same thing but put some <br/> between each?

The Process Over a year ago

I would make different <p> inside this div for each input, so it would be easier to collect/style text

Collectives™ on Stack Overflow

How to take data from a <form> and display the input values in a separate <div>

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related