Solved

ajax form in form

Posted on 2011-03-06
3
271 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
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.

733 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