Form elements outside of form

Question

This is what I need:

<form>
   input field
   <form>
       input field
       submit
   </form>
   input field
   input field
   <form>
       input field
       submit
   </form>
   submit
</form>

I need the forms in the forms because I work with transloadit to upload files to my amazon bucket.They work like this:

<form id="MyForm" action="http://example.org/upload" enctype="multipart/form-data" method="POST">
  <input type="file" name="my_file" />
  <input type="submit" value="Upload">
</form>

So I need an overall form with form elements to submit and the other forms submit differently. But I can't place forms in forms .. How can I do this?

You can setup different submit buttons that will call any of multiple functions inside a single file. That's what I use. However, you cannot have "forms within a form". — Funk Forty Niner, Oct 28 '13 at 22:40
Try expanding your question with an explanation of exactly what you are trying to do (why, for instance, do you need to have all the fields inside one parent form?) — Ben D, Oct 28 '13 at 22:50

score 2 · Answer 1 · edited May 23 '17 at 10:31

2

You cannot have forms within forms.

If you need to trigger "formlet" submissions (like your transloadit example) I recommend you do so using Javascript, though I'm guessing that Transloadit has a mechanism for doing whatever it is that you're attempting (if you clarify this in your question I might be able to suggest a specific approach).

edited May 23 '17 at 10:31

Community

1
1

answered Oct 28 '13 at 22:18

Ben D

13,146
3
43
59

score 0 · Answer 2 · answered Dec 05 '14 at 15:07

You can use the form attribute to specify which form an input belongs to. For example:

  <form id="form2" action="/download.html"  method="POST"></form>
  <form id="form1" action="/upload.html" method="POST">

    <input type="file" name="my_file" form="form1" />
    <input type="submit" value="Upload" form="form1">


    <input type="text" name="my_file" form="form2" />
    <input type="submit" value="Download" form="form2">

  </form>

This should work for your problem but the form attribute is not supported on all browsers and you cant actually nest form elements inside each other. Browsers like Chrome will remove the child form elements, that is why the second form element is outside the first one but you can put all the fields in one form element.

Read more about the form attribute here: http://www.impressivewebs.com/html5-form-attribute/

Not to pass judgment but, although I found this interesting, this is a very odd thing to do.

Form elements outside of form

2 Answers2