Solved

ajax form in form

Posted on 2011-03-06
3
257 Views
Last Modified: 2012-06-27
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?
0
Comment
Question by:Dennie
  • 2
3 Comments
 
LVL 50

Expert Comment

by:Steve Bink
ID: 35055186
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
 

Author Comment

by:Dennie
ID: 35055520
do you have an example?
0
 
LVL 50

Accepted Solution

by:
Steve Bink earned 500 total points
ID: 35128869
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

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to dynamically set the form action using jQuery.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now