Having issue showing the ajax result in a textbox

Question

I want to do is show my ajax result in my count inputbox.

I tried to use alert() to know if my AJAX return a value and it gives value.

My problem is it doesnt show in my count inputbox the result in my AJAX.

script:

$(document).ready(function(){
var countTimer = setInterval(
        function ()
        {
            codeValue();        
        }, 500);

function codeValue(){

        var data = {};
        data.countValue = $('#countValue').val();

        $.ajax({
            type: "POST",
            url: "codeTime.php",
            data: data,
            cache: false,
            success: function (result) {
            alert(result);
            $("#count").val(result.user_code);

            }
        });

};

});

response:

{"user_code":2}

put console.log(result) in success method and see the response from the server. — Devendra Soni, Aug 09 '14 at 15:17
Is the alert data a json object with the result.user_code entry? — Brunis, Aug 09 '14 at 15:19
use $("#count").val( JSON.stringify(result.user_code)); you are trying to put an object in the val — Idan Magled, Aug 09 '14 at 15:36

chestnut · Accepted Answer · 2014-08-09T16:22:07.600

Your php code return a json string, not a javascript object. You can specify the dataType or parse it yourself in the callback function.

$.ajax({
    type: "POST",
    url: "codeTime.php",
    data: data,
    cache: false,
    dataType: "json",
    success: function (result) {
        alert(result);
        $("#count").val(result.user_code);
    }
});

or

$.ajax({
    type: "POST",
    url: "codeTime.php",
    data: data,
    cache: false,
    success: function (result) {
        result = JSON.parse(result);       // parse the json string into a javascript object
        $("#count").val(result.user_code);
    }
});

Siva.G ツ · Answer 2 · 2014-08-09T16:07:56.280

1

You have to put dataType: 'json' in the ajax

Like:

$.ajax({
    type: "POST",
    url: "codeTime.php",
    data: data,
    cache: false,
    dataType: 'json',
    success: function (result) {
        alert(result);
        $("#count").val(result.user_code);

    }
});

edited Aug 09 '14 at 16:07

answered Aug 09 '14 at 15:39

Siva.G ツ

831
1
7
20

score 0 · Answer 3 · edited Sep 07 '14 at 01:31

You don't need to use the jQuery library to achieve this:

First step - Call a function when the body onload event is triggered:

You need to trigger a JavaScript function when the document is loaded, using the onload property in your HTML body tag, like this:

<body onload="ini()">

(...)

</body>

Second step - Make an AJAX call to your PHP file:

You need to call your server side script using AJAX. Your JavaScript code will look like this:

function ini()
{
    var interVal = setInterval(function() { ajaxCall() }, 500);
    // you can later on:
    // clearInterval(interVal);
    // if you need to
}

function ajaxCall()
{
    // Store the "countValue"
    var countValue = document.getElementById('countValue').value;

    // Store your POST variables, to be sent to the SERVER side
    postData = "countValue=" + encodeURIComponent(countValue);
    // you can send multiple post variables using the & separator
    // like this:
    // var1=encodeURIComponent(value1)&var2=encodeURIComponent(value2)

    // Create an XML HTTP Request
    var xhr = new XMLHttpRequest();

    // Set the content Type of your request
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 

    // Set the lambda function to execute when the ready state changes 
    // You need to set this function in the onreadystatechange property
    xhr.onreadystatechange = function()
    { // Ready state changed
        if (xhr.readyState == 4) { // Response arrived Succesfully

            // Parse and Store the responseText of the XML HTTP Request
            var jsonObj = JSON.parse(xhr.responseText);
            document.getElementById('count').value = jsonObj['user_code'];
        }
    }
    xhr.open('POST', 'codeTime.php', true);
    xhr.send(postData);
}

Advice:

Only use a library when you need to, even if it's jQuery =)

Only use a library when you want to make sure your app works in all browsers. — Ryan, Aug 09 '14 at 22:21
@true, XMLHttpRequest will work for IE7+, if you need IE6 support, you can use something like http://stackoverflow.com/questions/2557247/easiest-way-to-retrieve-cross-browser-xmlhttprequest I don't see a real need for jQuery for doing AJAX, anyway, that's just my opinion / preference. If you want to use jQuery for AJAX, I'm fine with it. :P — canolucas, Aug 10 '14 at 01:49

Having issue showing the ajax result in a textbox

3 Answers3

First step - Call a function when the body onload event is triggered:

Second step - Make an AJAX call to your PHP file:

Advice: