CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
user3925277
user3925277

Reputation: 27

Having issue showing the ajax result in a textbox

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}

Upvotes: 2

Views: 1051

Answers (3)

canolucas
canolucas

Reputation: 1490

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 =)

Upvotes: 0

chestnut
chestnut

Reputation: 351

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);
    }
});

Upvotes: 1

Siva.G ツ
Siva.G ツ

Reputation: 839

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);

    }
});

Upvotes: 1

Related Questions