I am having some difficulties in getting text from a url and assigning the retrieved data into a form input field. When I use a div the code works but i want to use an input text field.

Below is my jQuery:

     <script>

    $(document).ready(function(){
         $("#torefresh").load("myurl.php");
        setInterval(function() {
            $("#torefresh").load("myurl.php");
        }, 100);
    });
    
    </script>

This is my html:

   <div data-value="" id='torefresh'></div>

It works with the above div.

    <input type='text'  readonly="readonly" name='torefresh' id='torefresh'>
        

But i want the input text solution

Thanks in advance

CodePudding user response：

From the jQuery .load() documentation:

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document.

However, the input element doesn't have an innerHTML property - you must use the value property (or .val() in jQuery-ese). Therefore, you cannot use .load() to do this.

Since .load() is just a shorthand for $.ajax(), you can use that instead.

Try:

<script>

$(document).ready(function(){
   get_new_data();
   setInterval(function() {
       get_new_data();
   }, 100);
});
function get_new_data(){
   $.ajax({
      type: 'get',
       url: 'myurl.php'
   }).done((retn) => {
      $('#torefresh').val(retn);
   });
}
</script>