HTML Multiple form - Refresh Problem

Question

I have got two forms in a page. The second form has got a file upload input component along with other controls. My requirement is to submit the second form with the file and refresh only that form without refreshing the other form. If it was only normal components, I could have done this easily in Ajax. But when the form is having a file component, I feel its not that straigh forward. Please suggest any ideas to do it???

Answer 1

You can still use AJAX on a form with file components. Maybe you can use the jQuery library (if you are not already) since that makes these tasks trivially easy.

Answer 2

Put the second form in an iframe.

Answer 3

The way I have done it in the past is to hide an iframe on the page. Then set the target of the file upload form to the name that was given to the iframe. If you need to be xhtml compliant you can use JavaScript to create the iframe after the page loads and to set the target on the form. The code will look something like this. You can apply css to the frame to hide it.

<iframe name="myFrame" src="blank.htm"></iframe>
<form action="uploadFile.php" method="post" enctype="multipart/form-data" target="myFrame">
    <input type="file" name="myFile"/>
    <input type="submit" value="Upload"/>
</form>