4

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.

Improve this question
1
  • Have them round trip the information twice, half or whatever before with the image, all of it after to finalize. That's what used to happen. In other words, POSTBACKs to "update" a select field with cities for a state or whatever hooey. If you can make the form submission transparent for both, then you've won on all counts and nobody's the wiser. Commented Jun 24, 2012 at 4:33

2 Answers 2

Reset to default
1

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Guess so. It would seem like a better method than a nested form even if that wasn't disallowed, due to the fact that the parent page would remain unchanged and the user could upload his/her avitar without having to later reenter his/her username/password.
With the right approach, I think it's a reasonable way to approach it. It's certainly less twitchy and oh-lordy than some of the other options.
0

EDIT:

Please read this: nested html FORM is inaccessible - multiple forms problem

That answer says that form elements cannot contain other form elements, so even though it may work on a browser doesn't mean that you should use this technique. Try to put it all into one form like so:

<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 upload the avitar without leaving the page.

ORIGINAL ANSWER:

You can work 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 just give the forms the same action and give the submit buttons names so you can tell which one was submitted. This only works if the user clicks the submit button and doesn't just hit enter when one of the text boxes is selected, but for the file upload form the user would have to click the submit button.

Improve this answer

6 Comments

Using diferent names for the submmit buttons only works if the user clicks the button. If the user press the ENTER key on a field, the form is submitted without the button value.
Good point, will edit answer. However, for the file input a user has to click the submit button...
Sure, it can be used in this case.
Edited the post to reflect this. Either way, since all data is sent from the user (whom you should never trust), you should verify it first.
Unfortunately, this is more than just a case of needing to do different things with the same data. The main form, that the new one needs to be smack-dab in the middle of, has all sorts of validation and other scripts attached to it, that I can't mess with.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.