Loading inside a textarea after typing

Question

<textarea id='txedit'></textarea>
<button id='btnload'>LOAD</button>

$('#btnload').on('click', function(){
    $('#txedit').load('test.php');
});

Before typing anything inside txedit the above code works i.e. test.php is loaded inside txedit.

After typing even a letter inside txedit - clicking on btnload doesn't load test.php.

Answer 1

This is because of a unique property of the <textarea> element. When you put content in-between the tags, like so:

<textarea> I'm in the middle! </textarea>

... that text serves as the "default" placeholder text, and once the user starts typing, it is no longer used, even if you change it dynamically. When you call $('#txedit').load(), JQuery is not putting the value of that AJAX call into the textarea as a text value, it is putting it in between the tags as default text!

What you want to do instead is pass the result of JQuery load to the value of the textarea, like so:

<textarea id='txedit'></textarea>
<button id='btnload'>LOAD</button>
<script>
$('#btnload').on('click', function(){
    $.get('test.php', function(res){
        $('#txedit').val(res);
    })
});
</script>