0

How can i Set & Auto Refresh the value of a input field with javascript ?

i am currently using like this .

<script type="text/javascript">
var auto_refresh = setInterval(
function()
{
$('#value5').fadeOut("fast").load('get_data.php').fadeIn("slow");
}, 5000);
</script>

<div id="value5" ></div>

this is working fine if i set id=value5 in div but if i set the same id for input box like this

<script type="text/javascript">
var auto_refresh = setInterval(
function()
{
$('#value5').fadeOut("fast").load('get_data.php').fadeIn("slow");
}, 5000);
</script>

<input class="form-control input-lg" id="value5" type="text">

then its not showing data in the input box.

i even tried this code from Set the value of an input field

<input type="text" id="value5">

<script type="text/javascript">
var elem = document.getElementById("value5");
elem.value = "My default value";
</script>

but this shows "My default value" as value and its one time only, its not refreshing. i even tried modifying the above code like this

<input type="text" id="value5">

<script type="text/javascript">
var elem = document.getElementById("value5");
elem.value = "#value5";
</script>

still not working.

Community
  • 1
  • 1

3 Answers3

2

.load() places HTML into the matched element(s). If you are trying to populate the value of an input textbox, use .val() instead. Also, using setInterval() to repeat an asynchronous AJAX call might cause unanticipated problems if the AJAX call takes longer than you expect or flat out fails. Try this function instead, which will set a 5-second timeout to re-execute only upon completion of a successful AJAX call:

function loadValue5() {
    $.ajax({
        method: 'GET',
        url: 'get_data.php',
        success: function(responseText) {
            $('#value5').fadeOut('fast', function () {
                $('#value5').val(responseText).fadeIn('slow', function() {
                    setTimeout(loadValue5, 5000);
                });
            });
        }
    });
}
loadValue5();

EDIT: Here is a working example.

Jesse
  • 608
  • 8
  • 19
  • 1
    Here's the [jsfiddle](http://jsfiddle.net/mU2ke/8/) from my answer. I am going to delete it. This answer covers everything. – John S Dec 21 '13 at 20:21
  • thanks , idk whats wrong , its working on jsfiddle but not on my box , i have jquery and bootstrap js files.although my original code is working .but not this. –  Dec 21 '13 at 20:27
  • @AMB Are you getting a script error in the browser console or a network error in the network monitor? – Jesse Dec 21 '13 at 20:35
  • no error at all, just seeing blank input box, using latest firefox, even this http://jsfiddle.net/mU2ke/8/ is not working, strange. or am i missing something, –  Dec 21 '13 at 20:40
  • Huh, weird. The JSFiddle works fine for me using Firefox 26 (thanks @JohnS for fixing it, by the way). There must be something else going on in your browser. Have you tried clearing your browser cache, and have you tried with another browser? – Jesse Dec 21 '13 at 20:43
  • just tried clearing cache and in ie, still same, blank input box even after few seconds. –  Dec 21 '13 at 20:47
  • Is it just that you should use `data`, instead of `data.value` as in the fiddle? Here's a new [fiddle](http://jsfiddle.net/mU2ke/9/) that does not return json. – John S Dec 21 '13 at 20:54
  • @JohnS FWIW, your original example works for me in Firefox 26, Chrome 31 and IE 11. – Jesse Dec 21 '13 at 20:58
  • 1
    @Jesse - The first parameter to the success callback is the response text, not the xhr object (that is the third parameter). BTW, it is the first parameter to the complete callback. – John S Dec 21 '13 at 20:58
  • @Jesse, I just thought the new fiddle would be less confusing because it does not return json. – John S Dec 21 '13 at 20:59
  • @JohnS Oops, my bad. I updated the answer to use a "responseText" variable rather than "xhr" and "xhr.responseText" that one might expect with a pure (non-jQuery) JavaScript alternative. – Jesse Dec 21 '13 at 21:02
  • @Jesse , Thanks for the example , noticed my mistake, i was including code.jquery.com/jquery-1.9.1.min.js instead of ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js idk whats the difference but your live example made my day, –  Dec 22 '13 at 17:41
0

you just need to replace the value by null. So $(".form-name input).val(""); Should refresh the form input elements. Couple it with SetTimeout and you're good to go.

CreativeR
  • 11
  • 1
-1

Setting the value of a div is different than setting the value an input box. You want to set the input box's value attribute: 

$('#value5').attr('value').fadeOut("fast").load('get_data.php').fadeIn("slow");
symlink
  • 11,984
  • 7
  • 29
  • 50
  • -1 for: `$('#value5').attr('value')` will get the value of the "value" attribute for the "value5" element rather than set anything; `.load()` will populate an element's inner HTML rather than its "value" attribute; and chaining `.fadeOut('fast')` with `.fadeIn('slow')` in this fashion (i.e., without proper callback functions) is not going to achieve the OP's desired effect. – Jesse Dec 21 '13 at 20:31