?
Solved

ajax form in form

Posted on 2011-03-06
3
Medium Priority
?
285 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 51

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 51

Accepted Solution

by:
Steve Bink earned 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Suggested Courses

770 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