Develop Reference

AJAX submit multipart form within textarea and inputs [duplicate]

This question already has answers here:
jQuery AJAX file upload PHP
(5 answers)
Closed 3 years ago.
Well, I have tried a lot of JS codes to post one form with multiple data [2 Files & 1 textarea] and they didn't work well.
But How to send non-empty form data to PHP using AJAX?
<form method="post" enctype="multipart/form-data">
<textarea id="acas"></textarea>
<input id="uimage" type="file" name="image" accept=".png,.jpg,.gif"/>
<input id="uaudio" type="file" name="audio" accept=".mp3"/>
<input id="armes" style="display: none;" name="send" type="submit"/>
</form>
By default I use this JS code below to submit form, But it reloads page:
$("#acas").on('keydown', function(e) {
if (e.key == "Enter") {
if (e.shiftKey) {
} else {
e.preventDefault();
$("#armes").click();
}
}
});

Use this code
$(document).on('submit', 'form', function (e)
{
var form = new FormData(this);
jQuery.ajax({
url: "",
method: 'POST',
processData: false,
contentType: false,
dataType: "json",
data: form,
success: function (response)
{
}
});
return false;
});

Image upload via ajax POST without using HTML form

I am trying to send some data via POST method to a PHP file without using form in HTML. This is the code I have. Why doesn't it do anything?
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="hidden" value="<?php echo $row['Gallery_Id']; ?>" name="gid" id="gid">
<input type="hidden" value="User" name="user" id="user">
<button onclick="myFormData()">Upload Image</button>
<script>
$('#fileToUpload').on('change', function() {
var myFormData = new FormData();
var file = document.getElementById('fileToUpload').value;
var gid = document.getElementById('gid').value;
var user = document.getElementById('user').value;
myFormData.append('file', file);
myFormData.append('gid', gid);
myFormData.append('user', user);
});
$.ajax({
url: 'imgupload.php',
type: 'POST',
processData: false, // important
contentType: false, // important
dataType : 'json',
data: myFormData
});
</script>
On imgupload.php I get the POST data like this
$gid = $_POST['gid'];
$user = $_POST['user'];
It worked when I used the HTML form method. What's wrong here?

FormData.append() takes key-value pairs, so this is wrong:
myFormData.append(file,gid,user);
You need something like:
myFormData.append('file', file);
myFormData.append('gid', gid);
myFormData.append('user', user);
Appart from that you need to put this code inside an event handler so that it triggers when you need it to.
For example:
$('#fileToUpload').on('change', function() {
// your javascript code
});
And you should probably also put it inside a document.ready block.

JQuery / AJAX File Upload using FormData, file not posting [duplicate]

This question already has answers here:
How to use FormData for AJAX file upload?
(9 answers)
Closed 7 years ago.
This works when submitting the form directly. Perhaps I am not passing my "form" object to FormData correctly. Laravel is saying that "file" isn't being passed and when I console.log(formData), I'm seeing an object containing the proto prop but as far as I can tell none of my fields
HTML
<form enctype="multipart/form-data" accept-charset="utf-8" method="POST" action="/file">
<input id="file" type="file" name="file">
<button type="submit">Upload</button>
</form>
JS
$('.file-upload-form').submit(function (e) {
e.preventDefault();
submitUploadFileForm($(this)); //also tried just passing this without wrapper
});
function submitUploadFileForm(form){
console.log(form);
var formData = new FormData(form); //Needed for passing file
console.log(formData);
$.ajax({
type: 'post',
url: '/file',
data: formData,
success: function () {
alert('done');
},
processData: false,
contentType: false
});
}

FormData accepts a form DOMElement, not a jQuery object. You need to call submitUploadFileForm() just passing the this reference to the form:
submitUploadFileForm(this);

jQuery file Upload and ajax

So, I have the following form and js/php:
php
<form enctype="multipart/form-data">
<input id="fileupload" type="file" name="files[]" class="files " onChange="UploadImage" accept='image/*'/>
<input type="button" class="submit_form" value="submit">
</form>
<?php
add_action( 'wp_ajax_UploadImage', 'UploadImage' );
function UploadImage()
{
$upload_dir = wp_upload_dir();
$files = $_FILES['files'];
//Some function
}
?>
JS
function UploadImage(e)
{
jQuery('#fileupload').fileupload({
url: upload_image.ajax_url,
});
if(jQuery('#fileupload')) {
var form = document.forms.namedItem("upload_video");
var formdata = new FormData(form);
formdata.append('action', 'UploadImage');
jQuery.ajax({
success : function(data){
alert('sddsf');
}
})
}
};
As you can see from here, when an image is selected using Blueimp jQuery File upload (which the js is not properly written), I want the image file to be handled by the php function.
In other words, the js is not correctly written and I am not sure how to initiate the plugin then when the image is selected, it is processed by the php function via ajax (meaning, how do I parse the file info to php function via ajax?)

Don't use $.ajax directly. The plugin already does that behind the scenes.
Here's a working example, based on your code, but adapted to run on JSFiddle:
$(document).ready(function(){
var url = '/echo/json/';
var formdata = {json: JSON.stringify({field1: 'value1'})};
jQuery('#fileupload').fileupload({
url: url,
formData : formdata,
dataType: 'json',
type: "POST",
contentType:false,
processData:false,
success : function(data){
alert('success...');
console.dir(data);
}
});
});
Demo: http://jsfiddle.net/pottersky/8usb1sn3/3/

send data from inputs like form by java script [duplicate]

This question already has answers here:
How to submit a form with JavaScript by clicking a link?
(9 answers)
Closed 9 years ago.
I have a table and every row has a form:
<td><input type="date" id='time'/></td>
<td><input type="text" id='info'/></td>
<td><input type="text" id='money'/></td>
<td><input type="buttond" id="submit_edit" value="edit"/></td>
The problem is I can't submit a form like this, so I need to submit this with JavaScript, and I need to submit it using the POST method. I want the POST method to do this as one row; I will change the id of the inputs later.
This is not like this question: How to submit a form with JavaScript by clicking a link?
I want to send data manually by id. The correct thing I need is like this
$(document).ready(function(){
$("#submit_edit").click(function(){
var time=$("#time").val();
var info=$("#info").val();
var money=$("#money").val();
$.ajax(
{
type: "POST",
url: "edit.php",
data: {time:time , info:info,:money:money},
success: function(html)
{
$("#edit_result").html(html).show();
}
});
});
});

If you want to do it via ajax it's like this:
// this is the id of the form
$("#form_id").submit(function() {
url="page.php";
data1=$("#selector").val();
data2="value";
$.ajax({
datatype:"html",
type: "POST",
url: url,
data: {data1:data1,data2:data2},
success: function(html)
{
alert(html);
}
});
});

you have jquery ?
First
if not, try this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
you can download http://jquery.com/download/
also
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Ok, now
u need send a form?
then
ur button:
<input type="submit" name="edit" id="button_submit"/>
ur form
<form action="" method="POST" id="form">
then the jquery
$('#button_submit').click(function(){
$('#form').submit();
});