CODEWITHSUNDEEP
javascriptphpjquery
HiDayurie Dave
HiDayurie Dave

Reputation: 1807

jQuery Ajax Input Text and File can't get the value after processing to success function

I have jQuery input text and input file submit using ajax.

$("#uploadForm").on('submit',(function(e)
{
    e.preventDefault();

    var badgeID = $("#badgeID").val();
    var firstName = $("#firstName").val();
    var lastName = $("#lastName").val();
    var emailAddress = $("#emailAddress").val();

    var firstNameMask = $("#firstNameMask").val();
    var lastNameMask = $("#lastNameMask").val();
    var emailAddressMask = $("#emailAddressMask").val();

    $.ajax(
    {
        url: "updateAccountSetting.php",
        type: "POST",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function(data)
        {
            alert(data.firstNameVal);
            $("#firstNameMask").val(data.firstNameVal);
            $("#lastNameMask").val(data.lastNameVal);
            $("#emailAddressMask").val(data.emailAddressVal);

            $(".firstName").html(data.firstNameVal);

            $("#btnUpdateAvatar").attr({disabled: true, value: "Update"}).addClass('btn_inact').removeClass('btn_act');
            $('#firstName, #lastName, #emailAddress').attr('readonly', false);

            $('.uploadSuccess').show();
            $("#btnUpdateAvatar").attr('disabled', true).addClass('btn_inact').removeClass('btn_act');
        }           
   });
}));

I have tried the above code until processing to PHP file and it's working perfect.

But why I can't get value when I try to:

alert(data.firstNameVal);

The result of the alert is : undefined.

If I alert only data

alert(data);

the result is:

enter image description here

Upvotes: 1

Views: 951

Answers (3)

Mithu CN
Mithu CN

Reputation: 595

You get JSON response from updateAccountSetting.php url. JSON (JavaScript Object Notation) is a lightweight data-interchange format. You have to convert JSON data to Javascript object. Have a look at below

success: function(data)
        {
            var data =$.parseJSON(data);//convert json data to javascript object
            $("#firstNameMask").val(data.firstNameVal);
            $("#lastNameMask").val(data.lastNameVal);
            $("#emailAddressMask").val(data.emailAddressVal);

            $(".firstName").html(data.firstNameVal);

            $("#btnUpdateAvatar").attr({disabled: true, value: "Update"}).addClass('btn_inact').removeClass('btn_act');
            $('#firstName, #lastName, #emailAddress').attr('readonly', false);

            $('.uploadSuccess').show();
            $("#btnUpdateAvatar").attr('disabled', true).addClass('btn_inact').removeClass('btn_act');
        }

Upvotes: 0

DanieleAlessandra
DanieleAlessandra

Reputation: 1555

You may solve adding the correct header information in PHP or parsing the response in JavaScript.

PHP solution: add this row before output (on top of your script, maybe)

header('Content-Type: application/json');

JS solution: parse response string as json:

var dataObj = JSON.parse(data);

Upvotes: 0

Oliver
Oliver

Reputation: 893

Try this:

success: function(data)
        {
            var result = JSON.parse(data);
            alert(result.firstNameVal);
            // rest of your code
        }

Explanation: For JS it is just a string what you get. You have to convert it to JSON-Object.

Upvotes: 2

Related Questions