We Keep Coding

AJAX jQuery new version about "Insert into database without page load"

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.

How to add ajax parameters?

Faced with such a problem that you can't add parameters to ajax request, because there is a "Form Data" and it does not work to add more options. When you add in the parameter 'data' another variable, the error occurs. How to do that would be to post a file and parameters in one request?
Forgive the mistake, error or no, the php file simply does not output anything, rather empty values
//Here the file is sent without problems, but the parameters no more don't accept php file, nothing displays in the result
var fd = new FormData();
fd.append('file', input[0].files[0]);
$.ajax({
url: "/controllers/createNewsController.php",
data: fd,
type: "POST",
processData: false,
contentType: false,
success: function(data) {
$(".news .containers").append(data);
}
});
//When this code runs the PHP file won't take anything, although I was expecting the output variables and the file. Using var_dump, $_POST and $_FILES displays array(0){}
var fd = new FormData();
fd.append('file', input[0].files[0]);
$.ajax({
url: "/controllers/createNewsController.php",
data: {fd, title:newsHeader, description:description, hashTag:hashTag, themeHashTag:themeHashTag, viewNews:viewNews},
type: "POST",
processData: false,
contentType: false,
success: function(data){
$(".news .containers").append(data);
}
});
//Similarly, nothing appears in the php file
var fd = new FormData();
fd.append('file', input[0].files[0]);
$.ajax({
url: "/controllers/createNewsController.php",
data: {fd:fd, title:newsHeader, description:description, hashTag:hashTag, themeHashTag:themeHashTag, viewNews:viewNews},
type: "POST",
processData: false,
contentType: false,
success: function(data){
$(".news .containers").append(data);
}
});

Just like you have appended the file, you can append more data into it like:
fd.append('file', input[0].files[0]);
fd.append('var1', val1);
fd.append('var2', val2);

How to append more data in FormData for django?

My reference is here How to send FormData objects with Ajax-requests in jQuery?
The answer on that link worked on my program. My problem is how to append more data in FormData? I'm using python django and I would like to know where I can put the csrfmiddlewaretoken and inputfilename
Before, this is what I have in form data
var form_data = {
inputfilename: $("#filename").val(),
inputfile: $("#file").val(),
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
ajax: 1
};
and now,
var form_data = new FormData();
form_data.append('file', input.files[0]);

I'm not quite sure what's the issue you are having. Just append the csrf token the way you append the file:
var fd = new FormData();
fd.append('file', input.files[0] );
fd.append('csrfmiddlewaretoken', csrf_token);
$.ajax({
url: url,
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: callback
});

Send image with ajax , using jquery validator on submitHandler

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! =)

ajax form submit redirect like a not ajax form

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");
}
}
});
});