Pass PHP var to JQUERY

Question

I am trying to pass a PHP variable to JQUERY. I tried the following script but the var 'id' is not been passed to upload_avatar.php. Guess i am making some mistake. Can anyone help me.

$(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
        e.preventDefault();
        var id = '<?php echo $id; ?>';
        $.ajax({
            url: "upload_avatar.php",
            type: "POST",
            data:  new FormData(this)
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
            $("#targetLayer").html(data);
            },
            error: function() 
            {
            }           
       });
    }));
});

Possible duplicate of [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — Dave, Oct 07 '19 at 12:08
Creating a variable `var id = ...` does not include it in the `form` data that you are sending through to your PHP page. You need to explicitly add the `id` value into the form data, or create an object that contains your form data and the `id`. — Martin, Oct 07 '19 at 12:09
`var id = '';` is ok, but you not use `id` any where after that — Devsi Odedra, Oct 07 '19 at 12:09

score 2 · Accepted Answer · answered Oct 07 '19 at 12:11

Append your id in formData as below

$(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
        e.preventDefault();
        var id = '<?php echo $id; ?>';
        var frmData = new FormData(this);
        frmData.append('id', id);
        $.ajax({
            url: "upload_avatar.php",
            type: "POST",
            data:  frmData ,
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
            $("#targetLayer").html(data);
            },
            error: function() 
            {
            }           
       });
    }));
});

score 1 · Answer 2 · answered Oct 07 '19 at 12:45

change your code to:

$(document).ready(function (e) {
$("#uploadForm").on('submit',(function(e) {
    e.preventDefault();
    var id = '<?php echo $id; ?>';
      var myFormData = new FormData();
       myFormData.append('id', id);
    $.ajax({

        url: "upload_avatar.php",
        contentType: false,
        cache: false,
        processData:false,
        data: myFormData,
        dataType: "json",

        success: function(data)
        {
        $("#targetLayer").html(data);
        },
        error: function() 
        {
        }           
   });
}));

});

Pass PHP var to JQUERY

2 Answers2

Linked