Javascript input form | display "creating... " and refresh page - javascript

Below I have script js and form.
$(document).on('submit','#form_create_user',function(e){
e.preventDefault();
var fd = new FormData(this);
var obj = $(this);
fd.append('course_id', "<?php echo $this->uri->segment(4); ?>");
obj.find('input[type="submit"]').val("Creating...")
$.ajax({
url: $(this).attr("action"),
data: fd,
cache: false,
processData: false,
contentType: false,
type: 'POST',
success: function (dataofconfirm) {
// do something with the result
// obj.find('input[type="submit"]').val("Confirm")
}
});
$.ajax({
url: "<?php echo site_url('home/saveValues/'); ?>",
data: fd,
cache: false,
processData: false,
contentType: false,
type: 'POST',
success: function (dataofconfirm) {
// do something with the result
toastr.success("Success created user.");
obj.find('input[type="submit"]').val("Confirm")
}
});
})
<form action="?" method="post" name="form_create_user" id="form_create_user">
<input name="username" type="text" id="username" value="test"><input type="submit" name="Submit" value="Confirm">
</form>
When I click on submit form then this script change text on button from "create" to "creating..." and display success action. But now this take about 1sec.
I need extand this script and I need:
display "creating..." for one minute and then return a success action.
note: the script run by form I need to set to run immediately, but only return success after a minute and reload the page.
Can anyone help me?

Related

Data not sending to php JS/FormData/AJAX using PHP

I am trying to send a file to my DB together with text using this:
let formData = new FormData($('#image_form')[0]);
formData.append("message", $('#messageInput').val());
$(document).ready(function() {
$('#image_form').submit(function(e) {
e.preventDefault();
$.ajax({
url: "https://example.com/test.php",
type: "POST",
data: new FormData(this),
contentType: false,
processData:false,
success: function(status) {
$('#result').append(status);
}
});
});
});
That's the DOM
<form id="image_form" enctype="multipart/form-data">
<input type="file" name="files[]" id="files[]" multiple >
<input type="submit" name="submit" is="submit" id="submit"/>
</form>
<input type="text" name="message" id="messageInput">
PHP:
<?php
$file = $_FILES['files'];
$message = $_POST['message'];
var_dump($_POST);
?>
The Image is received by php and can be display. But the Text is not.
Besides the Image, the php script outputs:
array(1) { ["submit"]=> string(6) "Submit" }
You need to assign formData inside the submit handler, so it gets the values after the user has submitted the form.
$(document).ready(function() {
$('#image_form').submit(function(e) {
e.preventDefault();
let formData = new FormData($('#image_form')[0]);
formData.append("message", $('#messageInput').val());
$.ajax({
url: "https://example.com/test.php",
type: "POST",
data: formData,
contentType: false,
processData: false,
success: function(status) {
$('#result').append(status);
}
});
});
});

Submit an ajax-created form via ajax

I'm having trouble getting an ajax-loaded form (#ajaxLoadedForm) to submit via ajax. The formData object gathers no data. I figure I've got to attach an event-handler to the form so the DOM recognizes it, but I can't figure out how.
A couple of notes: I'm bypassing the 'submit' method and using a button (#button), so I can't attach the handler to that. The form itself is a sibling to #button, not a child.
<form id="ajaxLoadedForm" enctype="multipart/form-data" action="destination.php" method="POST">
<input type="hidden" name="state" value="1" />
<label for="fullname">Your Full Name</label>
<input type="text" id="name" autocapitalize="off" autocorrect="off" name="fullname" placeholder="your name" value="" />
</form>
<div id="button">Submit me!</div>
$('#button').click(function(){
var uploadData = new FormData($("#ajaxLoadedForm")[0]);
jQuery.ajax({
url: 'destination.php',
data: uploadData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
data = JSON.parse(data);
if (data['pass'] == false) {
console.log('fail');
} else {
console.log('success');
}
}
});
});
Try using the submit handler on the form itself
$('#ajaxLoadedForm').submit(function(e){
e.preventDefault();
var uploadData = new FormData(this);
});
Then make your button for submit a submit type
<button type='submit'>Submit</button>
In your php side, test the data coming by doing this:
print_r($_POST);
you can use serialize function for sending form data . Like below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script >
$('#button').click(function(){
var uploadData = $('#ajaxLoadedForm').serialize();
jQuery.ajax({
url: 'destination.php',
data: uploadData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
data = JSON.parse(data);
if (data['pass'] == false) {
console.log('fail');
} else {
console.log('success');
}
}
});
});
</script>
Try below code..
$('#button').click(function(){
var uploadData = new FormData();
uploadData.append('fullName',$('#fullName').val());
jQuery.ajax({
url: 'destination.php',
data: uploadData,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
}
});
});
And try to access full name in php

how to reuse a form and jquery ajax call in multiple sections of a document?

I am working on jquery dialog email attachment. I created a separate form to upload file that uses formdata object. I want to reuse the form and its related ajax call in different dialogs in the same php page(reason: need email attachment functionality in other dialogs). How can i achieve this?
Jquery Ajax call:
$('#attchform').submit(function(event) {
$.ajax({
url: 'uploadfile.php',
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
success: function(data) {
document.getElementById("fileToUpload").disabled = true;
$("#loadimg").html(data);
}
});
event.preventDefault();
});
Html form:
<form id="attchform" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Attach" name="submit">
</form>
<div id="loadimg"></div>
You can define a function and call any where in the same page:
function UploadFile(){
$.ajax({
url: 'uploadfile.php',
type: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
success: function(data) {
document.getElementById("fileToUpload").disabled = true;
$("#loadimg").html(data);
}
});
}
$('#attchform').submit(function(event) {
UploadFile();
event.preventDefault();
});

Javascript: Upload some files synchronous from a form

I need to upload multiple files from a form. I have an event "submit" that processes the data of the form, uploads the files and then shows a message. I need that this process syncronous to show the message when the files have been uploaded.
I have this HTML code in the form:
<form method="post" action="files/upload_project_file" id="upload_project_file_form" target="upload_project_file_iframe" enctype="multipart/form-data">
<input type="file" name="uploaded_file[]" class="multi" maxlength="0" accept="" />
<input type="hidden" name="action" value="upload_project_file">
<input type="hidden" name="id_project_files" value="" id="id_project_files">
</form>
And this Javascript code in the javascript Submit event:
//processes data
//...
//Upload files
var data = new FormData();
jQuery.each($('input[name^="uploaded_file"]')[0].files, function(i, file) {
data.append('uploaded_file'+i, file);
});
data.append('id_project_files', $("#id_project_files").val());
$.ajax({
url: 'files/upload_project_file',
enctype: 'multipart/form-data',
data: data,
cache: false,
contentType: false,
processData: false,
async: false,
type: 'POST',
success: function(data){
//Clear
$('.filesToUpload').empty();
}
});
//Then show the message and redirect page
//...
I upload only one file but not all, I can't, I don't know why. I've seen Jquery.each runs only once.
No, thanks "user2698878", I didn't want to use Uploadify.
Finally I changed the ajax code and it works perfectly. This is the new code:
var formData1 = new FormData($("#upload_project_file_form")[0]);
$.ajax({
url: "files/upload_project_file",
enctype: 'multipart/form-data',
type: 'POST',
data: formData1,
async: false,
success: function (data) {
$('.filesToUpload').empty();
},
cache: false,
contentType: false,
processData: false
});

File upload using Jquery ajax without form

Here is mycode
function addPackage(elem)
{
var dataimg = new FormData();
dataimg.append('', $("#browseimg"+elem).prop('files')[0]);
var startdate=$("#from_date"+elem).val();
var enddate=$("#to_date"+elem).val();
$.ajax({
url: "addpackage/",
type:"post",
contentType:false,
data:{startdate:startdate,enddate:enddate,packageid:elem,img:dataimg},
success: function(data) {
}
});
}
I tried post method ajax to upload image and input field data without form. In ajax call it showing [object object]. How to post image with input field without form in jquery ajax?
You can do it like following. Hope this will help you.
function addPackage(elem)
{
var dataimg = new FormData();
dataimg.append('startdate', $("#from_date"+elem).val());
dataimg.append('enddate', $("#to_date"+elem).val());
dataimg.append('packageid', elem);
dataimg.append('img', $("#browseimg"+elem)[0].files[0]);
$.ajax({
url: "addpackage/",
type:"post",
cache : false,
contentType : false,
processType : false,
data: dataimg,
success: function(data) {
}
});
}
You can try this:
Your JS Code:
<script type="text/javascript">
var data = new FormData(document.getElementById("yourFormID")); //your form ID
var url = $("#yourFormID").attr("action"); // action that you mention in form action.
$.ajax({
type: "POST",
url: url,
data: data,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
dataType: "json",
success: function(response)
{
// some code after succes from php
},
beforeSend: function()
{
// some code before request send if required like LOADING....
}
});
</script>
Dummy HTML:
<form method="post" action="addpackage/" id="yourFormID">
<input type="text" name="firstvalue" value="some value">
<input type="text" name="secondvalue" value="some value">
<input type="file" name="imagevalue">
</form>
in addpackage php file:
print_r($_POST);
print_r($_FILES);

Categories