0

I need to output onto a button in realtime what is being written into a text input field. 

<div class="content-loaded-via-ajax">
    <input id="input" type="text" pattern="[0-9]+" name="amount">
</div>


<div class="another-content-loaded-via-ajax">
    <button id="output" type="submit" name="submit">
        //display output here
    </button>
</div>

I would use something like this:

<script>

    document.getElementById('input').addEventListener("keyup", myFunction);

    var inputBox = document.getElementById('input');

    function myFunction(){
        document.getElementById('output').value = inputBox.value;
    }   

</script>

But since both the input field and the button are dynamically loaded by ajax, this doesn't work.

I would also be willing to use jQuery since it's already being used on the page anyway.

Thanks.

DanielM
  • 317
  • 2
  • 11
  • You'll also want to use the `input` event, rather than `keyup`. – T.J. Crowder Oct 01 '19 at 10:16
  • You should add `keyup` listener after you have created\loaded input – Denis O. Oct 01 '19 at 10:16
  • @T.J. Crowder Thanks a lot. But I don't really see your marked question as a dublicate, since in the other thread the OP doesn't even have posted a proper initial code for reference. If my question gets some good answers, it would be much easier to be understood by other visitors, because there are actual elements and divs to work with. Also, my knowledge of JS is not good enough to be able to apply the answers of the other question to my case. I would appreciate if you could open it up again. – DanielM Oct 01 '19 at 11:49
  • @DanielM - Yes, this is a duplicate of that question. That question is the *canonical* "how do I hook events on dynamically-created elements." If more or better answers are required, they should be provided there. That's how SO works. :-) Please take the [tour] (you get a badge!), have a look around, and read through the [help] for details. – T.J. Crowder Oct 01 '19 at 11:58

0 Answers0