Hello. How can you make the text that the user enters in the form, immediately appears above the form. This is something like an example of what the text will look like.

It is desirable to link to an example of this. Thank you for attention.

    3 answers 3

    If you use jQuery you can do it like this:

     <div class="text"></div> <form> <input type="text"> </form> <script> var userText; var $textDiv = $('.text'); var $input = $('input'); $('input').on('input', function() { userText = $input.val(); $textDiv.html(userText); }); </script>

    Note that the input event does not work in older IE
    Example

    UPD
    An example for several fields.

    • Thank you very much. Please tell me more, if 2 input forms are done, then how should the code look like? - iKey
    • @ Denis If I understood you correctly, I updated the answer - user200141

    HTML

     <form action="" id="form"> <textarea name="" id="text" cols="30" rows="10"></textarea> <div id="preview"></div> </form>

    jQuery

     $(document).ready(function(){ function myFunc(){ var input = $("#text").val(); $("#preview").html(input); } myFunc(); $('#text').keyup(function(){ myFunc(); }); });

    https://jsfiddle.net/q9s802yo/2/

    • keyup bad because you can paste text into the field with the right mouse button - user200141

    IDs must be named as form names.

    HTML:

     <div class="form-data"> Name:<span id="name"></span> Age:<span id="age"></span> </div> <form action="/" name="form"> <input type="text" name="name"> <input type="text" name="age"> <input type="submit" value="Submit"> </form>

    Javascript:

     var form = document.forms['form']; var formElements = form.elements; for (var i = formElements.length - 1; i >= 0; i--) { formElements[i].addEventListener('keyup', function() { document.querySelector('#' + this.name).textContent = this.value; }) }

    https://jsfiddle.net

    • keyup bad because you can paste text into the field with the right mouse button - user200141
    • In principle, yes, well, if on pure javascript, you can still hang up the handler - UserX