如何从 <form> 并分别显示输入值 <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?

Answer 1

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>