I have a localStorage which i can create an image on the canvas, choose save and it stores the data/url into my localStorage. My question is... how do I send that url or decode it into a blob type to be able to display it in a php page?
I am using ajax and I want to attach it when my formdata is sent. I guess my main issue is trying to figure out the ajax request. Any help with this would be great.
My form sends great but my localstorage item is missing and doesnt get posted to the server.
my ajax
$('#252whole').submit(function(event){
var fd = new FormData( $(this)[0] );
var img = localStorage.getItem('signature');
$.ajax({
type: 'POST',
processData: false,
contentType: false,
async: false,
data: fd,img,
url: 'http://urltomyservice.php',
success: function(data){
alert('Form Submitted...');
},
error: function(){
alert('There was an error converting the pdf!');
}
});
return false;
});
});
Related
I am attempting to recover a WordPress user's ID on the backend PHP after receiving an AJAX post request.
I was unable to use wp_get_current_user() within my AJAX handler function on the backend (I'm not entirely sure why this fails)
My solution was to use wp_localize_script to pass wp_get_current_user()->ID to the browser. I am concerned that the user might be able to change the user ID within their browser and pose as another user. Is this possible? If so, is there a better way to get the user's ID in an ajax POST?
The following is my current setup:
JS Ajax
var fd = new FormData();
fd.append('user_id', ajax_object.user_id);
fd.append('action', 'tb_upload');
jQuery.ajax({
type: "POST",
async: false,
url: ajax_object.ajaxurl,
data: fd,
contentType: false,
processData: false,
success: function (resp) {
console.log("in success!");
if (resp != null) {
console.log(resp.data);
} else {
console.log("Error: Response is null!");
}
}
});
I would like to simulate a form submit with the values stored in a form data object. I can't use a classic form because I need to include dynamically created file object.
How can I simulate a POST form submit with the values of the FormData object?
i.e. The data should be sent in an HTTP request and the HTTP response should be used to show a new page, just as if the user had loaded a new page by submitting a form.
just initialize a FormData object and fill it with your params and then do the ajax call
let input = 'hello';
let formData = new FormData();
formData.append('input', input);
// append the data you need
$.ajax({
url: yoururl,
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data) {
console.log(data);
},
error: function(err) {
console.log(err);
}
});
The OP needs to use Ajax and then change window.location to the page they want it to go to
I have an input tag of type file. I use this to get a file from my local disc. What I need is a way to get and hold that file so I can POST it to a server.
<input type='file'>
//I now want to hold this file and pass this to this ajax post method
$.ajax({
type: "POST",
url: url, //I have URL, this isn't a problem
data: data, // do I place response here ?
success: function(){ alert('file posted')
dataType: dataType // ?
})
You have to post form data to the server through ajax. Try Following.
$.ajax({
url: url,
type: "POST",
data: new FormData('#yourForm'),
contentType: false,
cache: false,
processData:false,
success : function(){
// success message.
}
});
#yourForm is your form. if you are using form submit event then replace this by 'this' keyword.
So the formData is your form's data. and fetch file input by name on server.
I'm trying to use this to get image URL's http://aminariana.github.io/data-uri-to-img-url/ for sharing on facebook.
I just can't work out how to make the post request using jquery:
# Make a POST request with param 'image[data_uri]' set to the above DataURI input.
# This could be from an HTML form with a textarea, or programmatically using an AJAX POST request.
I have setup a JS Fiddle that creates an image in canvas, converts the image to the datauri http://jsfiddle.net/7asutg7c/ it's just the last part of using jsonp in jquery to send the parameter and get the URL back that I am completely lost on.
var url = 'http://data-uri-to-img-url.herokuapp.com/images.json';.
$.ajax({
type: 'POST',
url: url,
async: false,
// data: dataURL,
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
console.log(json.url);
},
error: function(e) {
console.log(e.message);
}
});
My initial thought was to set data to the dataURI but I get "Failed to load resource: the server responded with a status of 414 (Request-URI Too Large)" ... so I am a little stuck about how I should be sending that dataURI.
Any help would be greatly appreciated.
Create a JavaScript object like this,
var myData = {
image: {
data_uri: your_data_uri_here
}
};
and then pass that as value of the data parameter of the $.ajax call.
I'm using Ajax to pass my form data and files to a PHP file for processing.
Javascript:
$("form#applyform").submit(function(){
var data = new FormData();
jQuery.each($('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
$.ajax({
url: 'ValidateApplication.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
ValidateApplication.php definitely exists. I can view it if I type in the address into the web browser, however when I submit the form chrome console returns 404.
The PHP is in the same folder as the HTML page the JavaScript is running on so I am confused as to why I keep getting a 404.
UPDATE
Changing POST to GET gets rid of the 404 error, but returns a 500 Internal Server Error
UPDATE 2
Changing the action of the form to ="ValidateApplication.php" and submitting it as normal (without AJAX) leads to the correct file without any errors.
I've had the same issue and after 2 hours looking for what was causing the 404 Not Found error I found that I was recently playing with the header() from PHP and had forgotten to delete the following line of code:
header($_SERVER["SERVER_PROTOCOL"]." 404 Not Found");
After deleting it, my Ajax functions became normal again.
It seemed to be a problem with the FormData object. Once I changed my method to use .serialize() instead, the page worked just fine.
$("form#applyform").submit(function(){
var data = $("form#applyform").serialize();
jQuery.each($('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
$.ajax({
url: 'ValidateApplication.php',
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
For me, it was that I used an input field with name="name" which made the called page return a 404. Weird stuff, hope this helps someone.
Try adding a / before the filename:
url: '/ValidateApplication.php',
Try changing the request type from POST to GET and see if it works.
Try commenting out parts of the code:
/*cache: false,
contentType: false,
processData: false,*/
Try another browser.
Please validate you have provided name="" attribute properly in the form
Form submit validate all bean attribute from name attribute of the input
Please check your PHP page name!
Do not use page-ajax.php, but instead use page_ajax.php.
Based on my case, I'd be sure to recheck your url address.