ajax form in form

Hi,

I'm using a form that enables users to select an image, the image is automatically submitted in the background (AJAX) to the server and resized and shown to the user, see: http://www.zurb.com/playground/ajax_upload 

However, I would like to use this form/functionality within another form. Currently I'm using CSS to absolutely place the Ajax form over the other form. But this is not ideal because when server side checks of the form fail, the form error is shown above the form and the absolute position of the AJAX form isn't correct.

Any ideas?
DennieAsked:
Who is Participating?
 
Steve BinkConnect With a Mentor Commented:
I was going to make one for you, but my work load has not allowed me the opportunity.  The concept is pretty simple, assuming you are already familiar with AJAX and javascript.

If you have a single form, all of the controls will be submitted when a user clicks the submit button.  Any controls not populated, however, will not be populated on the server side either.  For the "main" form's submit button, attach an onclick event that de-populates the controls you do not want to submit.  The AJAX form's submit button should already be configured in such a way that it does not submit the form, but instead calls the AJAX initiation functions/methods you have defined.

An alternative method, which I described in my last post, is to have the AJAX return-handling functions clear the controls.  When you click the submit button on the AJAX portion of the form, it calls a javascript function to fire off an XMLHTTPRequest.  That request can have a function reference to call when the response is returned from the server.  That function should handle any useful return it receives, then clear the values of all the appropriate controls, such as the file control.
0
 
Steve BinkCommented:
Put the AJAX form inside the normal form and use javascript to control the values before the normal form is submitted, or blank them inside the AJAX return functions.  That will keep the image from being uploaded twice.  Make sure the AJAX form is using input="button" and the onclick event, not input="submit".
0
 
DennieAuthor Commented:
do you have an example?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.