Geek Answers Handbook

HTML - Nested Work Form?

To prove myself to someone who knows little about PHP, I need to work with some awkwardly hacked system designed and created by people who should probably no longer be allowed to program. In principle, it was decided that users are allowed to upload an image for their profile before they actually complete the registration. Simply, right here, in the middle of the registration form, a completely separate form (functionally, it should look the same) with a file upload field, a separate submit button and an image display area. Apparently, the client saw the upload of the AJAX image to another site and decided: "This is cool, we want it!" without actually knowing how the forms work or considering why an unregistered user has to download things starting from

My initial idea was to create an invisible form elsewhere and copy the value of the file field at the click of a button, and then apply for AJAX. This does not work because JavaScript cannot edit the value of a file field. I see.

The second attempt was to create nested forms. With some hacks , I managed to get FireFox to see two forms, but subordinating the internal one gives the external one. "Undefined behavior", I think, is the term. It makes sense you should not embed forms.

So, ignoring the fact that this makes absolutely no sense, and the client really should say that - is there a way to leave the file upload form on a page that can be submitted via AJAX, and clearly located in a different form? I hope to avoid just creating a form elsewhere on the page and clogging it in place with disgusting CSS hacks.

+4
source share
2 answers

I don’t know if this is enough for you or not, but what about embedding an iframe in the middle of the form and doing the file upload in this window? It may not just be pure evil to really be so smart and scrupulous, but it can work.

The only side effect that I can see if this is when sending the parent is the inline iframe . If you are careful enough and make sure you remove the iframe when it is not used to download the file, I think you should be fine.

Parent

 <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </head> <body> <form submit="http://www.google.com/search" method="get"> <div> <input type="text" name="q" value="[ Search Google Here ]"/> </div> <iframe src="http://jfcoder.com/test/embed.php" style="width: 200px; height: 200px;"></iframe> <div> <button type="submit">Submit this Page Form</button> </div> </form> </body> </html>

Embedded

 <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </head> <body> <?php if ($_GET['q']) { echo "<p><strong>GET SUBMITTED</strong></p>"; } ?> <form submit="embed.php" method="get"> <div> <input type="text" name="q" value="Type whatever"/> <button type="submit">Submit this Page Form</button> </div> </form> </body> </html>

http://jfcoder.com/test/parentform.php

+1
source

EDIT:

Read the following: An embedded HTML form is not available - multiple forms problem

This answer says that form elements cannot contain other form elements, so even if they can work in a browser, this does not mean that you should use this technique. Try putting all this in one form:

 <form action="register.php" method="POST" enctype="multipart/formdata"> <input name="username" type="text" /> <input name="password" type="password" /> <input name="avitar" type="file" /> <input name="image" type="submit" value="Upload" /> <input name="register" type="submit" value="Register" /> </form>

Or better yet, use jQuery / AJAX to load the avatar without leaving the page.

ORIGINAL RESPONSE:

You can get around this using some javascript. Heres a quick, untested example:

 <head> <script> var submitted = false; function canSubmit() { if(submitted) return false; submitted = true; return true; } </script> </head> <body> <form action="register.php" method="POST" onsubmit="return canSubmit();"> <input name="username" type="text" /> <input name="password" type="password" /> <form action="upload.php" method="POST" onsubmit="return canSubmit();" enctype="multipart/formdata"> <input name="avatar" type="file" /> <input type="submit" value="Upload" /> </form> <input type="submit" value="Register" /> </form> </body>

Another method is to simply give the forms the same action and give the names of the submit buttons so that you can indicate which one was submitted. This only works if the user presses the submit button and not just presses the enter button when one of the text fields is selected, but for the file upload form the user needs to press the submit button.

0
source

More articles:


All Articles