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
Related
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 file input <input type="file" class="form-control fileStyle" id="invoice" name="invoice">
and this is my jquery (i dont know it's work or not)
var formData = new FormData();
formData.append('formData', file);
$.ajax({
url: host+'upload/file', //Server script to process data
type: 'POST',
data: formData,
contentType: false,
processData: false
});
But my problem it's on upload/file I dont know how to call my file input? Any sugesttion?
NOTE : I'm using framework like ci or laravel like that.
UPDATE :
Nevermind case closed i figured out, i call $_FILES to get everything.
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 have an ajax script which sends FormData object via ajax.
The code looks like this:
fd = new FormData();
fd.append('title', $('.some_input').val());
// few other appends including file
jQuery.ajax({
url: 'some_url',
dataType: 'json',
processData: false,
contentType: false,
data: fd
})
When $('.some_input').val() is not empty, it works as predicted, server gets necessary param. But in the case of input value is empty string it behaves like its missing the append. How can I put empty string to formdata in this case?
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;
});
});