Two part form submitted via javascript

I’ve built a form in a mobile app where the user chooses a photo from the camera roll, they hit an upload button and the image is submitted to my server. The file is renamed by the PHP script and moved to the correct folder. All this works great.

I need a way to send the new filename back to my app and I’m not sure how exactly to do that.

The reason I need the name back from the PHP script is because I will then ask my users of the app to fill in a title and description and then i just want to submit all of the data together.

Any thoughts how this can be accomplished?

Rob

I have 2 javascript scripts files that I want to now merge into one.

Basically my app allows you to take a photo and then submit it to our
via blog. I’ve got all of the pieces in pretty much working order.

I have a PHP script that uploads the image. I have another PHP script
that sends the email with the data.

So, what I want my web app form to do now is the following:

  1. user types in a title and description.
  2. user click the grab an image button and picks the jpg from his
    camera.
  3. Click submit.

When the user hits submit the image is uploaded first and then when
the upload is complete, then the form is submitted. I’m having
problems with this part. I’m sure how to tell the first script to call
the second script once the image is uploaded.

Maybe somone out there in PG land can assist :slight_smile: It might be something
simple too, my brain is just fried at this point.


SAMPLE of my JS code:

////////////////////////////
jQuery(document).ready(function() {
var $ = jQuery;

$(“.submit-button”).click(function() {

//upload the image
var progressbar = document.getElementById(‘progbar’);
progressbar.style.display = ‘block’;

   var selectUpload = document.getElementById('upload');
   selectUpload.style.display = 'none';

var smallImage = document.getElementById(‘cameraImage’);
if (smallImage.src && smallImage.src !== “”) {
var f = new FileTransfer();
f.upload(
// file path
smallImage.src,
// server URL
http://mydomain.com/email.php”,
// success callback
function(result) {

document.getElementById(‘uploadProgress’).innerHTML = result.bytesSent

  • ’ bytes sent’;
    alert(‘Got it. Now tell us about your photo.’);

var progressbar = document.getElementById(‘progbar’);
progressbar.style.display = ‘none’;

var uploadimage = document.getElementById(‘uploadimage’);
uploadimage.style.display = ‘none’;

var webform = document.getElementById(‘webform’);
webform.style.display = ‘block’;
},
// error callback
function(error) {
alert('error uploading file: ’ + error.code);

           var selectUpload = document.getElementById('upload');
           selectUpload.style.display = 'block';
       },
       // options
       { fileName: smallImage.src });

}

// send the data
var title = $(“input#mytitle”).val();
var desc = $(“textarea#AdDescription”).val();

var dataString = ‘title=’+ title + ‘&AdDescription=’+ desc;

                   $.ajax({
                           type: "POST",
                           url: "http://mydomain.com/email.php",
                           data: dataString,
                           success: function(html) {

                                   alert('success');
                           }
                   });
   });

});