How to add PHP Session variable into FormData using AJAX? - javascript

I'd like to pass a PHP session variable (called 'profileid') using FormData and AJAX. I thought this below would work, it did not. Why?
var imageData = new FormData();
imageData.append('image', $('#uploadImage')[0].files[0]);
imageData.append('profileid', <?php echo $_SESSION['profileid'];?>);
//Make ajax call here:
$.ajax({
url: '/upload-image-results-ajax.php',
type: 'POST',
processData: false, // important
contentType: false, // important
data: imageData,
//leaving out the rest as it doesn't pertain

You could add the profileid in the $.ajax URL parameter instead of adding it in FormData:
$(document).ready(function (e) {
$('#uploadImageForm').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: "/upload-image-results-ajax.php?profileid=<?= $_SESSION['profileid']; ?>",
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response){
console.log("success");
console.log(response);
},
error: function(response){
console.log("error");
console.log(response);
}
});
}));
$('#uploadImage').on("change", function() {
$("#uploadImageForm").submit();
});
});
Don't forget to place session_start(); at the beginning of your code.

Related

Data is not display after insertion through Bootstrap modal with jquery ajax in php Mysqli

Data is not display after insert through bootstrap modal with ajax in php mysqli.
jQuery Ajax code:
$(document).ready(function() {
fetch_data();
function fetch_data() {
var action = "fetch";
$.ajax({
url: 'action.php',
method: 'post',
data: {action: action},
success: function (data) {
$("#all_table_data").html(data);
}
});
}
});
function addData() {
var formData = new FormData($('#employee_insert_form')[0]);
formData.append('action', 'add');
$.ajax({
method: 'post',
url: 'action.php',
data: formData,
processData: false,
contentType: false,
cache: false,
success: function (response) {
$("#all_table_data").html(response);
$('#empInsert').modal('hide');
fetch_data();
}
});
}
Your PHP code never return anything to your view. So try to echo result of select * from tbl_employee after the insertion

Php does not receive a variable through $ _POST

Php does not receive a variable through $ _POST. I'm trying to pass a variable with ajax to a php page, but php takes a variable as NULL. Tell me, what is the error and how to fix it?
jquery code:
var imgPath;
$(".close_modal_clear_cover").on("click", function(e) {
imgPath = $("#cover_preview").attr('src');
$.ajax({
url: "/management/ajax_scripts/img_delete.php",
type: "POST",
data: imgPath,
async: true,
cache: false,
contentType: false,
dataType: "json",
processData: false,
success: function (returndata) {
console.log(imgPath); //url of image
console.log(returndata); // NULL
}
});
});
img_delete.php code:
if (isset($_POST['imgPath'])) {
$path= $_POST['imgPath'];
unlink($path);
$response = $path;
} else {
$response = "false";
}
echo json_encode($response);
data: imgPath should be data: {imgPath: imgPath} and you should change your $_GETs to $_POSTs in the php backend
Thanks #Reflective for the help. Having studied what data comes in img_delete.php and a little googling, I found a solution. At me for some reason contentType was specified as false, but it was necessary 'application / x-www-form-urlencoded; charset = UTF-8 '.
This is a stupid mistake, but suddenly someone with the same collided.
$(".close_modal_clear_cover").on("click", function(e) {
// imgPath = $.session.get("imgCover");
imgPath = JSON.stringify($("#cover_prewiew").attr('src'));
$.ajax({
url: "/management/ajax_scripts/img_delete.php",
type: "POST",
data: {imgPath: imgPath},
async: true,
cache: true,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
dataType: "json",
processData: true,
success: function (returndata) {
console.log(imgPath);
console.log(returndata);
}
});
});

Transmitting Form Data via Json

I believe I am making a very basic mistake somewhere.
I have a Form I want to transmit to a PHP page. I also want to send a parameter with that information so I have created a basic 2D array:
$fd['api'] -> contaning the parameter as a string
$fd['body'] -> containing the form data
I am struggling to transmit this array "$fd" as a json string and believe I am using the javascript syntax incorrectly somewhere as I do not often use Javascript.
Any Help would be appreciated.
function admin_statistics_form_send(){
var fd = []
fd['api'] = "refresh_all"
fd['body'] = new FormData(document.getElementById("admin_statistics_form"))
var jsonstring = fd
console.log(jsonstring)
$.ajax({
async: true,
beforeSend: function(){
},
url: "admin_statistics_api.php",
type: "POST",
data: jsonstring,
dataType: "json",
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function (data) {
console.log(data)
},
error: function(data) {
console.log(data)
}
})
}
You only want to send the FormData object. To add other key/value pairs you append to that object:
function admin_statistics_form_send(){
var fd = new FormData($("#admin_statistics_form")[0]);
fd.append('api',"refresh_all");
$.ajax({
//async: true, // redundant since it is default and should never use `false`
beforeSend: function(){
},
url: "admin_statistics_api.php",
type: "POST",
data: fd,
dataType: "json",
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function (data) {
console.log(data)
},
error: function(data) {
console.log(data)
}
})
}

Post array using formData

I am trying to add images, few string information and array using formData. I can successfully add images, string but can't add array information while adding. It always passes array as a string.Any help would be appreciated. My code
var reader = new FileReader();
var form_data = new FormData();
form_data.append('departure_city',departure_city);
form_data.append('inclusion_icons', inc_icons);
form_data.append('theme_icons',theme_icons);
$.ajax({
url: url,
type: "POST",
async: false,
cache: false,
contentType: false,
processData: false,
enctype: 'multipart/form-data',
data: form_data,
}).done(function (data) {
console.log("Success");
console.log(data);
}).fail(function (data) {
console.log("Error");
console.log(data);
});
inclusion_icons and theme_icons are arrayz, however I'm getting them as a string.

How to send String data with formdata in ajax

<script type="text/javascript">
$(document).ready(function(){
$("#btnUpdate").click(function(){
alert($("#frm_data").serialize());
var formData = new FormData($("#frm_data")[0]);
var Desc= CKEDITOR.instances.editor1.getData();
$("#btnUpdate").attr('value', 'Please Wait...');
$.ajax({
url: 'update_job.php',
data: formData,
cache: false,
contentType:false,
processData:false,
type: 'post',
success: function(response)
{
$("#btnUpdate").attr('value', 'Update');
}
});
return false;
});
})
</script>
i use ckeditor for textarea field. but its can update value with new value, so i want to use another way with send textarea value with form data.
so how to send Desc data with fromData. in ajax.
To achieve this you can use the append() method of FormData to add whatever additional information you require:
$("#btnUpdate").click(function(e) {
e.preventDefault();
var $btn = $(this).attr('value', 'Please Wait...');
var formData = new FormData($("#frm_data")[0]);
formData.append('desc', CKEDITOR.instances.editor1.getData());
$.ajax({
url: 'update_job.php',
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'post',
success: function(response) {
$btn.attr('value', 'Update');
}
});
});

Categories

Resources