Question

I’m building a sort of internal communication tool, where users can post comments and attach files.

I’m using the blue imp file uploader: https://github.com/blueimp/jQuery-File-Upload/

And I made a jsfiddle here: http://jsfiddle.net/denislexic/s56xG/12/

But to simplify, I made an extract here:

<form action="/path/to/submit/" method="post" style="padding:10px;">
    <textarea style="display:block; width:60%;"></textarea>


    <form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
        <!-- Blue imp form stuff in here -->
    </form>


    <a href="#" class="btn JS_fileUpload">Attach file</a>
    <button type="submit" class="btn btn-primary">Post</button>
</form>

The problem is that, design wise, I really need the Submit button to be after the textarea and file uploader, and the file uploader has to be in between…so that means I have to have nested forms (which doesn’t doesn’t work)? Is there another solution?

PS: I’ve seen this question, but doesn’t seem relevant: Submitting form located within another form

Thanks in advance for any help.

Answer 1

You can mess with CSS to move things into an appropriate position while maintaining valid HTML:

<style type="text/css">
#container {
  position: relative;
}
#content0 {
  position: absolute;
  top: 0;
  left: 0;
}
#content1 {
  position: absolute;
  top: 3ex;
  left: 0;
  border: 1px solid blue;
  padding: 5px;
}
#sub0 {
  position: absolute;
  top: 8ex;
  left: 0;
}
</style>

<div id="container">

<form>
  <div id="content0">
    <input name="foo">
    <input id="sub0" type="submit"> 
  </div>
</form>

<form>
  <div id="content1">
    <input name="bar">
    <input type="submit" value="Submit this bit"> 
  </div>
</form>

</div>