I've a multipart form on rails.I need to submit this form using AJAX.for this I've following code
//grab all form data
var formData = new FormData(form);
$.ajax({
url: $(form).attr('action'),
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false
}).done(function (data) {
toastr.success(I18n.t('business_profile.success_' + action));
console.log(data);
}).fail(function () {
toastr.error(I18n.t('business_profile.error_' + action));
});
This code works fine on Chrome but in firefox it just displays response data on another page.
Is there any other solution to submit multipart form on AJAX?
Thank you
Related
I've got an ajax function:
$('#addSiteButton').on('click',function() {
let addSiteOption = $('#enterNewWebsiteLink').val();
const form = new FormData();
form.append('addSiteOption', addSiteOption);
$.ajax({
url: "includes/submit_site.php",
data: { 'data': form },
method: "POST",
contentType: false,
processData: false,
enctype: false,
cache: false,
datatype: "text",
success: function (response, data) {
}
});
My PHP file looks just like this:
if (isset($_POST['data'])) {
$websitelink = $_POST['addSiteOption'];
}
my HTML looks like this:
<input type="url" form="addsite" class="enterNewWebsiteLink"
id="enterNewWebsiteLink"
name="enterwebsitelink"
placeholder="Enter A New Website">
The error that I am getting is: Warning: Undefined array key "data"
I've tried outputting the variable addSiteOption and it outputs the URL correctly.
The frustrating thing, I've been checking/copying this against a previous project I did that I got it working in, and I can't make any difference between them now.
I get a 200 response from the server for the page.
You can't serialize FormData, and processData: false tells jQuery not to try to serialize the data: option.
You should just pass the FormData as the data: option. Then the keys of the FormData will become the $_POST keys.
JS:
$('#addSiteButton').on('click',function() {
let addSiteOption = $('#enterNewWebsiteLink').val();
const form = new FormData();
form.append('addSiteOption', addSiteOption);
$.ajax({
url: "includes/submit_site.php",
data: form,
method: "POST",
contentType: false,
processData: false,
enctype: false,
cache: false,
dataType: "text",
success: function (response, data) {
}
});
PHP:
if (isset($_POST['addSiteOption'])) {
$websitelink = $_POST['addSiteOption'];
}
You also had a typo: datatype: should be dataType:
I'm new to AJAX, I'm using old code:
$.ajax({
type: 'POST',
url: 'phppath/sucms.php',
data: $('#formid').serialize(),
success: function(response){
$('#success').html(response);
}
});
It works, but not perfectly, everything is good but when I try to upload an image it has "CLEAR VALUE".
I'm trying make new code like this:
var formData = new FormData(this);
$.ajax({
type: 'POST',
url: 'phppath/sucms.php',
data: formData ,
success: function(response){
$('#success').html(response);
}
});
but it reloads the page and opens sucms.php clear window.
If you want to upload files using ajax, you need to set contentType and processData as false in your ajax config.
var formData = new FormData();
formData.append(<KEY>, <FILE>);
$.ajax({
type: 'POST',
contentType: false,
processData: false,
url: 'phppath/sucms.php',
data: formData ,
success: function(response){
$('#success').html(response);
}
});
On the other hand, if the page is being reload or opened in a new window. It is probably because the type of your button is submit. You should change the button type to button or use event.preventDefault() to prevent the action being execute in the traditional form submit approach.
I have a jsp file which has a form. And the form has some text fields and image upload field.I need to send text data to one servlet and image to another servlet when I click the submit button. is this possible ?
Yes.. I think it is possible .. the way I know you have to use a javascript library like jquery. Below is how it happens
On form submit you prevent the post to servlet. Then you can use ajax like shown below to send 2 requests to 2 different servlets. Below shows one ajax call.. you can do another after that call. I trying to show you below
$("form").submit(function(evt){
evt.preventDefault();
var formData = new FormData($(this)[0]);
var author = $("#author").val();
$.ajax({
url: 'fileUploadServletUrl',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (response) {
alert(response);
}
});
$.ajax({
url: 'textDataServletUrl',
type: 'POST',
data: {'author':author },
async: false,
cache: false,
processData: false,
success: function (response) {
alert(response);
}
});
return false;
});
I trying to send two images with ajax (inside submitHandler) after using jquery validator plugin and i don't know hoy i cant take and send this image by ajax.
My code here:
var submitHandler = function(form) {
var formData = form[0];
var formData = new FormData(formData);
$.ajax({
url: 'function/savePreInscripcion.php',
type: 'POST',
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function(data){
alert(data);
}
});
};
but this dont work..
this display this error:
TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
var formData = new FormData(formData);
so.. what's worng here?
Thnx for the help!,
I resolve this..
Just change a little party on my code..
var submitHandler = function(form) {
$.ajax({
url: 'function/savePreInscripcion.php',
type: 'POST',
data: new FormData(form),
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false,
success: function(data){
alert(data);
}
});
};
Just I change the call to the form and put this directly on the data whit the next code: "data: new FormData(form)" and it work fine! =)
I have this code that I use to submit a form with a attachment file
$("#career_form").submit(function(e){
var this_current = $(this);
var formData = new FormData(this_current[0]);
var url = this_current.attr("action");
$.ajax({
url : url,
data: formData,
type: 'post',
cache: false,
async: true,
beforeSend: function(){ },
success: function(response){
if(response === true){
alert("successfully sent");
}
}
});
e.preventDefault();
});
but the form keeps redirecting me to its destination file "url in the action" like it wasn't an ajax submission but if I replace the 'data' argument with
data: $(this).serialize();
it works (ajax submit), any ideas, help, suggestions, recommendations?
give that e.preventDefault(); at the beginning of the function.
jQuery trys to transform your data by default into a query string, but with new formData it throws an error.
To use formData for a jquery ajax request use the option processData and set it to false like:
$.ajax({
url : url,
data: formData,
type: 'post',
cache: false,
async: true,
processData: false,
beforeSend: function(){ },
success: function(response){
if(response === true){
alert("successfully sent");
}
}
});
Thats the reason why it works with serialize, but not with formData in your example.
The e.preventDefault works correctly, but if there is an error before it will not work. By placing the e.preventDefault at the top of your function it will allways prevent the action, no matter if there is an error in later code or not.
You can edit the var formData = new FormData(this_current[0]); in your code and use the below line:
var formData = new FormData(document.querySelector("#career_form"));
Also, if you are using multipart form to send files in your form, you need to set following parameters in your ajax call.
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
Hope this helps. See more about using formData here.
Try this:
$("#career_form").submit(function(e){
e.preventDefault();
var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
url: "change-status.php",
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function(response){
if(response){
alert("successfully sent");
}
}
});
});