AJAX send data to PHP file - php

send $username php with data: new FormData(this), to add.php like data: new FormData(this),$username how can i do it with ajax code
<script type="text/javascript">
$(document).ready(function (e) {
$("#uploadFormuserimg").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "add.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#user_img_a").html(data);
},
error: function()
{ alert("error");
}
});
}));
});
</script>

var myData = new FormData(this);
myData.append('username','<?php echo $username; ?>');
and get on "add.php" like this
$username = $_POST['username'];
This worked on my side.

Based on comments to the question, specifically:
I just want to add some data
Are you just asking how to add more fields to the object that was created already in the data value? Something like this:
var myData = new FormData(this);
myData.append("anotherField", "anotherValue");
// etc.
Then just use that variable as your AJAX data:
$.ajax({
url: "add.php",
type: "POST",
data: myData,
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#user_img_a").html(data);
},
error: function()
{ alert("error");
}
});
You can store anything you like in a variable and use that variable at a later time. With a FormData object you would generally use .append() to add more key/value pairs to it.

Related

Submit data with attachment Ajax and PHP

I have to submit data with attachment using java scripts and PHP, my problem is that I cant pass data and attachment to php page. here is my codes;
In my HTML i did not use
function kk_sendmail()
{
var kk_vtype= $("#vtype").val();
var kk_departm= $("#departm").val();
var kk_recepient= $("#recepient").val();
var kk_user= $("#euser").val();
var kk_smssubject= $("#smssubject").val();
var kk_compose_textarea= $("#compose-textarea").val();
var form_data = new FormData();
form_data.append('attach', $('#attachments').prop('files')[0]);
form_data.append('vtype',kk_vtype);
form_data.append('departm',kk_departm);
form_data.append('recepient',kk_recepient);
form_data.append('euser',kk_user);
form_data.append('smssubject',kk_smssubject);
form_data.append('compose-textarea',kk_compose_textarea);
$.ajax({
type: "POST",
url: "process.php",
dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
success : function(text){
if (text == "success"){
formSuccess();
} else {
console.log('Failed message');
}
}
});
};
you do not need to define the dataType and also you can use
enctype: "multipart/form-data",
$('#attachements')[0].files[0] // for file
It will help

JQuery fomdata sending empty data to php file?

I am trying to upload file through jquery formdata without any form. My problem is that it is not sending any data to php file.
Here is my jquery code
jQuery(document).ready(function() {
jQuery('#e_picture').change(function() {
var file_data = jQuery('#e_picture').prop('files')[0];
var form_data = new FormData();
form_data.append('e_picture', file_data);
form_data.append('e_uid', '3585');
//});
// data: {e_uid: e_uid, e_picture:'23'},
jQuery.ajax({
url: "index.php?option=com_objectified&task=course_reg.addPicture",
type: 'POST',
data: {
form_data
},
processData: false,
contentType: false,
success: function(result) {
alert('This is ' + result); // Here I show onlu e_uid but it alerts blank result
}
});
});
});
Html
<input type="file" class="form-control" name='e_picture' id='e_picture'>
You are sending the form_data in wrong way
instead of
data: {
form_data
},
just send it like
data: form_data,
jQuery(document).ready(function() {
jQuery('#e_picture').change(function() {
var file_data = jQuery('#e_picture')[0].files;
var form_data = new FormData();
form_data.append("e_picture[]", file_data[0]);
form_data.append('e_uid', '3585');
//});
// data: {e_uid: e_uid, e_picture:'23'},
jQuery.ajax({
url: "index.php?option=com_objectified&task=course_reg.addPicture",
type: 'POST',
data: {
form_data
},
processData: false,
contentType: false,
success: function(result) {
alert('This is ' + result); // Here I show onlu e_uid but it alerts blank result
}
});
});
});
ange content type to :
contentType: 'multipart/form-data',

Ajax Post and CodeIgniter not working

I am trying to echo back code I received from Ajax. But it does not work when I am using contentType:false, processData:false.
Here is my ajax. The url is correct. If I comment out the line with post_data['file'] and contentType:false, processData:false I will be able to get the echo, but as soon as contentType:false, processData:false is in I cannot get anything.
post_data = {};
post_data['file']= document.getElementById('fileToUpload').files[0];
post_data['paper-type']=$("#paper-input :selected").val();
$.ajax({
url:'/admin/upload_paper',
data: post_data,
type: 'post',
contentType: false,
processData: false,
success: function(data){
console.log(data);
},
error: function(data){
console.log(data+"error");
}
});
Here is the code snippet from CI
public function upload_paper(){
echo $this->input->post('paper-type');
echo "testing";
echo "testing2";
}
Does anyone know what that is? Thank you.
instead of doing this:
post_data['paper-type']=$("#paper-input :selected").val();
try
var val = $("#paper-input :selected").val();
and in ajax:
$.ajax({
url:'/admin/upload_paper',
data: {'paper-type':val},
type: 'post',
success: function(data){
console.log(data);
},
error: function(data){
console.log(data+"error");
}
});

jQuery + php file upload. Pass multiple parameters

How to pass extra variables through $.ajax to post.php?
My first variable is
var form_data = new FormData($(this)[0])
I can pass it alone, but if I want to add another variable and make an array
data {
"form_data": form_data,
"name": "hello"
}
it does't work.
My current code:
$(document).ready(function() {
$("form#data").submit(function(){
var form_data = new FormData($(this)[0]);
$.ajax({
url: 'post.php',
type: 'POST',
data: form_data,
success: function (data) {
$('#result').html(data);
},
contentType: false,
processData: false
});
return false;
});
});
<div id="result"></div>
<form id="data" method="post" enctype="multipart/form-data">
<input name="file" type="file" />
<button>Submit</button>
</form>
Try this. The formData object has a method append. We're going to use that instead. We're going to append the file under the name file. In PHP access it with $_FILES['file']. Now for the array or object that you want to add to it. Use JSON.stringify on it to turn it into a string. We append the JSON string and add it to the name 'object'. To access the JSON in PHP json_decode($_POST['object']) will turn it into an object.
Fiddle
$(function(){
$("form#data").submit(function (e) {
e.preventDefault();
var form_data = new FormData(),
o = {};
o.name = 'Adam';
o.arr = ['test', 213];
form_data.append('file', $('input[name="file"]', this)[0].files[0]);
form_data.append('object', JSON.stringify(o));
$.ajax({
url: '/info/',
type: 'POST',
data: form_data,
success: function (data) {
$('#result').html(data);
},
contentType: false,
processData: false
});
return false;
});
});
I would JSON.stringify it then json_decode when you get it back in PHP
var data = JSON.stringify({ /* object */ });
Then in your php
$data = json_decode(....);
Try to define a new bariable
var name = "hello";
and then insert it into $.ajax data
$.ajax({
url: 'post.php',
type: 'POST',
data: "form_data="+form_data+"&name="+name,
success: function (data) {
$('#result').html(data);
},
contentType: false,
processData: false
});
I never test this script, but there's no matter to check it out :D

jQuery Ajax posting not working

My jQuery ajax posting is not working. Here is the javascript
function SocialButtons() {
var $buttonWrapper = jQuery('.WrapperDiv');
if ($buttonWrapper.length){
var postData = $buttonWrapper.html();
jQuery.ajax({
type: 'POST',
url: 'http://www.wordpress-site.com/wp-contents/themes/theme-name/post.php',
data: postData,
cache: false,
success: function(data) {
console.log(data);
},
contentType: "application/json",
dataType: 'json'
});
}
}
I am saving the data to be posted inside a hidden div like
<div class='WrapperDiv hidden'>{"post_id":392,"url":"http:\/\/www.wordpress-site\/post\/post-title\/","title":"SEO Friendly title"}</div>
All I am getting in return from the post.php page is an empty array. Here is my code for post.php
<?php
if(isset($_POST)){
print_r($_POST);
} else {
echo "0";
}
?>
Any Idea whats wrong?
EDIT : Its working after I removed
contentType: "application/json",
dataType: 'json'
What about something like this:
var postData = "data=" + encodeURCIComponent($buttonWrapper.html());
Than in PHP:
echo $_POST["data"];
Than parse it or something....
Couple of things to try,
Try to pass the data directly in to the data object first. If it
works then you can debug and see why it's not ready your hidden div.
instead of $buttonWrapper.html try $buttonWrapper.text();
function SocialButtons() {
var $buttonWrapper = jQuery('.WrapperDiv');
if ($buttonWrapper.length){
var postData = $buttonWrapper.**text**();
jQuery.ajax({
type: 'POST',
url: 'http://www.wordpress-site.com/wp-contents/themes/theme-name/post.php',
data: **{'id':1}**,
cache: false,
success: function(data) {
console.log(data);
},
contentType: "application/json",
dataType: 'json'
});
}
}
Inside your jQuery ajax call, your data is not set to $_POST variable names. Hence why nothing is showing
Try changing your function to this:
function SocialButtons() {
var buttonWrapper = jQuery('.WrapperDiv');
if (buttonWrapper.length){
var postData = buttonWrapper.html();
jQuery.ajax({
type: 'POST',
url: 'http://www.wordpress-site.com/wp-contents/themes/theme-name/post.php',
data: {postData: postData},
cache: false,
success: function(data) {
console.log(data);
},
contentType: "application/json",
dataType: 'json'
});
}
}
Then you should have a $_POST['postData'] variable on your print_r or var_dump of $_POST.
Its working after I removed
contentType: "application/json",
dataType: 'json'

Categories