While a user is filling out one form, I want them to be able to open up a new form, probably in Lightbox, and be able to save the contents that the separate form produces into a hidden field on the original form.
I’m using the separate form to manipulate an image and I need to be able to return the path to that image to the original form.
Is this possible with jQuery/AJAX?
—
Product Form:
<form>
Name <input type="text" name="name" />
Description <textarea name="description"></textarea>
Price <input type="text" name="price" />
<button>Upload Image</button> <!-- Open new form with Lightbox to upload, manipulate,
then return image path to this form. -->
</form>
Image Form:
<form action="manipulate.php"> <!-- Goes to another page for manipulation, upload -->
<input type="file" name="image" id="image" />
<input type="submit" name="Upload" />
<form>
Manipulate: Uploads the final image to a folder. I want to be able to return the path to the Product form.
The biggest problem here is the file upload with Ajax. Of course there are some JQuery Ajax uploaders – this was the first in the list: http://valums.com/ajax-upload/.
As you may see this one has callbacks which will return some server response see onComplete().
Basically you should pass the file path of the uploaded file as response and then it will be very easy to pass that string to the original form.
This is very basic explanation, but at least it could give you the idea how to to it.