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;
});
Related
This question already has answers here:
jQuery Ajax File Upload
(27 answers)
Closed 7 years ago.
I was requested to use only Javascript (Ajax/Jquery/JSON) only. Why doesn't this work?
Here's my code that I embedded in HTML script:
function uploadImage(){
$.post("signup/upload.php", function(data)
{
if(data['status']!='ok'){
$("#status").html(data['status']);
console.log("!Failure");
}else{
$('#status').html("Your picture was uploaded!");
console.log("Success");
}
});
}
$(document).ready(function () {
$('#uploadImageButton').on('click', function()
{
uploadImage();
});
});
Here is the HTML:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Submit" id = "uploadImageButton" name="submit">
Here is the PHP:
$reply['status'] = 'ok';
<?php
if(isset($_POST['submit'])) {
if (isset($_FILES['upload'])) {
$allowed = array ('image/pjpeg', 'image/jpeg','image/JPG');
if (in_array($_FILES['upload']['type'], $allowed)) {
if (move_uploaded_file
($_FILES['upload']['tmp_name'], "/fakepath/www/upload_files/{$_FILES['upload']['name']}"))
{
$reply['status'] = 'ok';
echo '<p><em>The file has been uploaded!</em></p>';
}
} else {
echo '<p class="error">Please upload a JPEG or PNG image.</p>';
}
}
}
print json_encode($reply);
?>
You should use $.ajax request, e.g below.
HTML :
<form enctype="multipart/form-data">
<input type="file" name="upload" id="fileToUpload">
<input type="submit" value="Submit" id = "uploadImageButton" name="submit">
<form>
JS :
$(function(){
$('body').on('submit', 'form', function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: "signup/upload.php",
data: new FormData(this),
cache: false,
contentType: false,
processData: false,
success: function (data) {
//your code
}
});
return false;
})
})
Hope this helps.
First PHP instruction $reply['status'] = 'ok'; would not execute because it is placed before PHP open tag.
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);
This question already has answers here:
Uploading both data and files in one form using Ajax?
(13 answers)
Closed 7 years ago.
I am trying to upload a file and sending it through AJAX.. but i am getting below error..
Notice: Undefined index: xlsFile in
Below is my Coding :
HTML FORM : (this form is in Modal Popup)
<form id="form2" class="importModal" enctype="multipart/form-data">
Upload Excel File : <input type="file" name="xlsFile" id="xlsFile" />
<button type="button" id="addType" name="addType">Submit</button>
</form>
AJAX Code :
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
$("button#addTripType").click(function(){
alert("hello");
$.ajax({
type: "POST",
url: "ajax-Upload.php", //
data: $('form.importModal').serialize(),
success: function(msg){
alert("success");
},
error: function(){
alert("failure");
}
});
});
});
</script>
What should i Do..??? Need Help..??
I had the same issue, it is possible with FormData if you are using IE >= 10. For all and IE >= 8 one way to trick it is using form in iframe.
An easy way to do that is using jquery.form plugin : http://malsup.com/jquery/form/
You can put method and action in your form :
<form id="form2" method="post" action="ajax-Upload.php" class="importModal" enctype="multipart/form-data">
Upload Excel File : <input type="file" name="xlsFile" id="xlsFile" />
<input type="submit" id="addType" name="addType" value="Submit" />
</form>
And then with plugin api :
$('#form2').submit(function() {
$(this).ajaxForm({
success: function(msg) {
alert("success");
},
error: function(){
alert("failure");
}
});
return false;
});
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();
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I would like to send a form so I don't get page refresh when I send a form.
Now when I press submit button I'm running this code:
<?php
if (isset($_POST['send_this_message']) == 'yes')
{
echo "yes this is just example and working";
}
?>
<form method="post" action="">
<input type="submit" name="send_this_message" value="yes">
</form>Now how can send this form but without page refresh with jquery. I have seen several examples but they are all calling external files.. Something like this.
<script>
$(function () {
$("#send").click(function () {
$.ajax({
type: "post",
url: "send.php",
data: $("#myform").serialize(),
success: function (response) {
if (response == "done") {
alert("Form submitted successfully!");
} else {
alert("Form submission failed!");
}
},
error: function (response) {
alert(response);
}
});
});
})();
</script>
This code above is not working for me. I mean I need to somehow execute that isset when pressing on button.
As you want to send data without page refresh, use Ajax to send the data from to your php file: (as example)
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'post.php', // here your php file to do something with postdata
data: $('form').serialize(), // here you set the data to send to php file
success: function (data) {
alert('form was submitted');
}
});
e.preventDefault();
});
});
</script>
I don't know if I understand very well your question
However you need to set a value for your attribut action in
<form method="POST" action="">
for exemple
<form method="POST" action="responseForm.php">
you are selecting
$("#send")
it does not exist
add the id to the button
<input id="send" type="submit" name="send_this_message" value="yes">
also you need to use preventDefault() for stopping the propagation
Assuming your script is called script.php:
<?php
if (isset($_POST['send_this_message']) == 'yes')
{
// do stuff
echo "done"; // as confirmation for jQuery, see below
die(); // no output the form because ajax function isn't interested in it
}
?>
<form method="post" action="" id="form">
<input type="submit" name="send_this_message" value="yes">
</form>
<script>
$(function () {
$("#form").submit(function (e) {
e.preventDefault(); // prevent the form from being submitted normally
$.ajax({
type: "post",
url: "script.php",
data: $(this).serialize(),
success: function (response) {
if (response == "done") {
alert("stuff done");
} else {
alert("isset wasn't true");
}
},
error: function (response) {
alert("server returned a 500 error or something");
}
});
});
})();
</script>