Run PHP, wait; run JavaScript, wait; then submit form?

Question

What I need to do:

I have an upload form with a file input and hidden text inputs. The user uploads an image, the image gets manipulated and then sent to remote server for processing which takes a few seconds, then the remote server sends the finalized images back to the home server where they are saved in a new folder. JavaScript needs to reach these new images to do further data processing on the newly saved images (which also takes a second). Only after JavaScript has done its thing and updated the form's input variables can the form be submitted.

Right now I've got all of the separate pieces working, but executing everything in one click has proven to be a challenge.

My code for uploading the images:

PHP:

 if(isset($_POST['submit'])){
 //do image manipulation and save new files using PHP
 }

JS:

 function furtherProcessing() {
 //do further processing on newly saved images in newly created directory,
 //update hidden input variables for the form
 }

PHP again:

 if(isset($_POST['input_variables'])){
 //send these variables to SQL database
 }

I know trying to use JavaScript to get the newly saved images isn't an ideal approach, but the framework that I'm using is only available in JavaScript. Is this even possible with one click?

• Matt: Can you give us a real example of exactly what each piece is doing step by step? Javascript can only process images on the client side.
• Ionut Necula: What you're looking for is called AJAX. AJAX is also JavaScript and can process anything, not just images, @mkaatman

Answer 1

You can do this:

In your HTML, add data-processed="false" to your form like this:

<form action="upload.php" method="post" name="q_data" data-processed="false" enctype="multipart/form-data">

In your jQuery call this to submit the images via ajax:

$("form[name='q_data']").submit(function(e) {
 var $this = $(this);
 var processed = $this.data('processed')
 if (processed == false) {
 e.preventDefault();
 var formData = new FormData($(this)[0]);
 $.ajax({
 url: "upload.php", 
 type: "POST",
 data: formData ,
 async: false,
 success: function(msg) {
 //alert(msg);
 if (msg !== 'success') {
 $this.data('processed', true)
 furtherProcessing();
 }
 },
 cache: false,
 contentType: false,
 processData: false
 });
 }
});
function furtherProcessing() {
 //do further processing on newly saved images in newly created directory,
 //update hidden input variables for the form
 $("form[name='q_data']").submit();
}

In some-page.php do this:

if(isset($_POST['some-image-input-name'])){
 //do image manipulation and save new files using PHP
 return 'success'
}

However, if it were me, I'd have that first ajax call (that saves the images) simply return the urls for the saved images, then there is no need for a second ajax call to retrieve them which I assume is what you are doing now

• brad: I've got the hidden input fields to update but now it won't submit the form. I'm using
• Wesley Smith: @bradical14 did you update $("form[name='some-second-form']").submit(); to use a selector that is appropriate for your form?
• brad: *I've got the hidden input fields to update but now it won't submit the form. I'm using: if(msg=='success'){ furtherProcessing(); $("form[name='submit']").submit; } I'm only using one form in this case
• Wesley Smith: $("form[name='submit']").submit() looks to be wrong, I doubt you have a form with the name submit it's more likely that the form's submit button has the name submit. Try changing it to $("form[name='form-name']").submit() where form-name is the name on your form or $("button[name='submit']").click() if that is the only button that has that name. You could also give the form or button an ID and use that if you prefer
• brad: I've tried all of your suggestions and double-checked my selectors, but I haven't gotten any of these to work, sadly. Is it possible that after the preventDefault(); statemtent that the browser is preventing further submissions on the form? I tried putting your initial block of code into a bigger function with the 2nd $("form[name='form-name']").submit() out of scope of he preventDefault();, but that didn't work either.