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.

Improve this question
4
  • id is meant to be unique on the page. Use classes instead Commented Dec 21, 2013 at 19:46
  • i am using unique id, thanks Commented Dec 21, 2013 at 19:51
  • but if i set the same id for input box implies you are not. Commented Dec 21, 2013 at 19:53
  • i commented out the div while testing input value. Commented Dec 21, 2013 at 19:55

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

Here's the jsfiddle from my answer. I am going to delete it. This answer covers everything.
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.
@AMB Are you getting a script error in the browser console or a network error in the network monitor?
no error at all, just seeing blank input box, using latest firefox, even this jsfiddle.net/mU2ke/8 is not working, strange. or am i missing something,
@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.
|
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.

Improve this answer

Comments

-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");
Improve this answer

1 Comment

-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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.