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
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 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 am using CKEditor as a WYSIWYG editor for an internal email system that I'm building, which requires me to get the data from from the textarea input like this:
var message = CKEDITOR.instances.messageArea.getData();
I am also allowing users to send attachments and I am sending the files to the server via the HTML5 FormData.
//create form variable
var form = $('#sendIndividualEmail')[0];
var formData = new FormData(form);
I have tried to append the the message variable to the formData, but it seems that formData only allows form fields to be appended.
Is there alternative way to append a var to FormData if it isn't a form field? If not, is there another way to get the message variable to the server with the formData?
ajax code:
request = $.ajax({
url: baseURL+'/sendIndividualMessage',
type: "post",
data: formData,
mimeType: "multipart/form-data",
dataType: json,
contentType: false, //required for formData
cache: false,
processData: false, //require for formData
});
You can append data to a FormData like that :
formData.append('message', message);
It doesn't need to be a form field.
To debug FormData, you have to post the data.
MDN FormData.append() Reference
Have a look here : FormData.append("key", "value") is not working
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;
});
});
I'm making a call to another ajax page, the call posts a json object.
I also need to send data from a form
(not using submit - I have the ajax call attached to a button which uses e.preventDeault()).
The call is as folows:
var myUrl = 'sendswatch-data.php';
$.ajax({
url: myUrl,
data: {'swatchid[]':swatchArray}, 'formdata':$('#orderData').serialize()},
type: "POST",
error: function(xhr, statusText, errorThrown){
// Work out what the error was and display the appropriate message
},
success: function(myData){
$('#tabsampleorder').html(myData);
$('.tabber').hide();
$('#tabsampleorder').show();
}
});
I have a form on the page id of formdata.
How do I send this as well as the json object? I've tried
data: {'swatchid[]':swatchArray}, 'formdata':$('#orderData').serialize()},
but that's generating an error.
You have an extra } after watchArray. Try removing that.
data: {'swatchid[]':swatchArray, 'formdata':$('#orderData').serialize()},
You can send data from the form as follows:
data : { swatchid: swatchArray, formdata: $('#orderData').serialize() }
You will need a parameter in the controller for every field that your add.