CODEWITHSUNDEEP
javascriptjqueryhtml
jpgerb
jpgerb

Reputation: 1120

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

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?

Upvotes: 1

Views: 73

Answers (1)

The Process
The Process

Reputation: 5953

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>

Upvotes: 2

Related Questions