HTML – Nested form work-around

formshtml

In order to prove myself to someone who doesn't know much about PHP, I need to work with some awkwardly hacked-together system designed and built by people who probably shouldn't be allowed to program any more. Basically, it has been decided that users should be allowed to upload an image for their profile, before they actually finish registering. Just, right there, in the middle of the registration form, a completely separate form (functionally, it has to look the same) with a file upload field, a separate submit button, and an image display area. Apparently, the customer saw AJAX image uploading on another site, and decided, "That's cool, we want that!" without actually knowing how forms work or taking into account why an unregistered user should be uploading things to begin with

My initial idea was to create an invisible form elsewhere, and copy over the file box value when the button is clicked, followed by the AJAX submission. That doesn't work because JavaScript can't edit the value of a file box. Understandable.

Second attempt was to create nested forms. With some hacking, I did manage to get FireFox to see two forms, but submitting the inner one submits the outer one. "Undefined behavior", I believe is the term. Makes sense, you're not supposed to nest forms.

So – ignoring the fact that this makes absolutely no sense, and the client really ought to be told that – is there any way left to create a file upload form on a page, that can be submitted via AJAX, and is visibly located within another form? I'm hoping to avoid just creating the form elsewhere on the page and hammering it into place with abhorrent CSS hacks.

Best Answer

I don't know if this is ingenious enough for you or not, but what about embedding an iframe in the middle of the form and doing the file upload within that window? It may not be pure evil enough to really be that clever and skullduggerous, but it may work.

The only side-effect I can see if that when the parent is submitted, so is the embedded iframe. If you're careful enough and make sure to remove the iframe when it's not in use for the file upload, I think you should be ok.

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's 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's Form</button>
    </div>
</form>
</body>
</html>

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

Related Topic