How do you overcome the HTML form nesting limitation

Question

I know that XHTML doesn t support nested form tags and I have already read other answers here on Stack Overflow regarding this subject  but I still haven t figured out an elegant solution to the problem   Some say you don t need it and that they can t think of a scenario were this would be needed  Well  personally I can t think of a scenario that I haven t needed it   Let s see a very simple example   You are making a blog app and you have a form with some fields for creating a new post and a toolbar with  actions  like  Save    Delete    Cancel     lt form  action   post dispatch too bad the action url is in the form tag even though conceptually every submit button inside it may need to post to a diffent distinct url  method  post  gt        lt input type  text  name  foo    gt   lt  -- several of those here -- gt       lt div id  toolbar  gt           lt input type  submit  name  save  value  Save    gt           lt input type  submit  name  delete  value  Delete    gt           lt a href   home index  gt Cancel lt  a gt       lt  div gt   lt  form gt    Our objective is to write the form in a way that doesn t require JavaScript  just plain old HTML form and submit buttons   Since the action URL is defined in the Form tag and not in each individual submit button  our only option is to post to a generic URL and then start  if   then   else  to determine the name of the button that was submitted  Not very elegant  but our only choice  since we don t want to rely on JavaScript   The only problem is that pressing  Delete   will submit ALL the form fields on the server even though the only thing needed for this action is a Hidden input with the post-id  Not very big deal in this small example  but I have forms with hundreds  so to speak  of fields and tabs in my LOB applications that  because of requirements  have to submit everything in one-go and in any case this seems very inefficient and a waste  If form nesting was supported  I would at least be able to wrap the  Delete  submit button inside it s own form with only the post-id field   You may say  Just implement the  Delete  as a link instead of submit   This would be wrong in so many levels  but most importantly because Side-effect actions like  Delete  here  should never be a GET request   So my question  particularly to those that say they haven t needed form nesting  is What do YOU do  Is there any elegant solution that I m missing or the bottom line is really  Either require JavaScript or submit everything

User · Answer

Kind of an old topic  but this one might be useful for someone  As someone mentioned above - you can use a dummy form  I had to overcome this issue some time ago  At first  I totally forgot about this HTML restriction and just added the nested forms  The result was interesting - I lost my first form from the nested  Then it turned out to be some kind of a  quot trick quot  to simply add a dummy form  that will be removed from the browser  before the actual nested forms  In my case it looks like this   lt form id  quot Main quot  gt     lt form gt  lt  form gt   lt  --this is the dummy one-- gt     lt input    gt  lt form id  quot Nested 1 gt       lt  form gt     lt input    gt  lt form id  quot Nested 1 gt       lt  form gt     lt input    gt  lt form id  quot Nested 1 gt       lt  form gt     lt input    gt  lt form id  quot Nested 1 gt       lt  form gt            lt  form gt   Works fine with Chrome  Firefox  and Safari  IE up to 9  not sure about 10  and Opera does not detect parameters in the main form  The   REQUEST global is empty  regardless of the inputs  Inner forms seem to work fine everywhere  Haven t tested another suggestion described here - fieldset around nested forms  EDIT  Frameset didn t work  I simply added the Main form after the others  no more nested forms  and used jQuery s  quot clone quot  to duplicate inputs in the form on button click  Added  hide   to each of the cloned inputs to keep layout unchanged and now it works like a charm

User · Answer

In response to a question posted by Yar in a comment to his own answer  I present some JavaScript which will resize an iframe  For the case of a form button  it is safe to assume the iframe will be on the same domain  This is the code I use  You will have to alter the maths constants for your own site   function resizeIFrame frame        try           innerDoc     contentDocument  in frame    frame contentDocument   frame contentWindow document          if  style  in frame                frame style width   Math min 755  Math ceil innerDoc body scrollWidth      px               frame style height   Math ceil innerDoc body scrollHeight     px             else               frame width   Math ceil innerDoc body scrollWidth               frame height   Math ceil innerDoc body scrollHeight                   catch err            window status   err message            Then call it like this    lt iframe     frameborder  0  onload  if window parent  amp  amp  window parent resizeIFrame  window parent resizeIFrame this     gt  lt  iframe gt

User · Answer

I just came up with a nice way of doing it with jquery    lt form name  mainform  gt           lt div id  placeholder  gt       lt div gt   lt  form gt    lt form id  nested form  style  position absolute  gt   lt  form gt    lt script gt       document  ready function          pos       placeholder   position              nested form             css  left   pos left toFixed 0   px             css  top   pos top toFixed 0   px            lt  script gt

User · Answer

I would implement this exactly as you described  submit everything to the server and do a simple if else to check what button was clicked   And then I would implement a Javascript call tying into the form s onsubmit event which would check before the form was submitted  and only submit the relevant data to the server  possibly through a second form on the page with the ID needed to process the thing as a hidden input  or refresh the page location with the data you need passed as a GET request  or do an Ajax post to the server  or       This way the people without Javascript are able to use the form just fine  but the server load is offset because the people who do have Javascript are only submitting the single piece of data needed   Getting yourself focused on only supporting one or the other really limits your options unnecessarily   Alternatively  if you re working behind a corporate firewall or something and everybody has Javascript disabled  you might want to do two forms and work some CSS magic to make it look like the delete button is part of the first form

User · Answer

One way I would do this without javascript would be to add a set of radio buttons that define the action to be taken    Update  Delete Whatever   Then the action script would take different actions depending on the value of the radio button set   Another way would be to put two forms on the page as you suggested  just not nested  The layout may be difficult to control though     lt form name  editform  action  the action url   method  post  gt      lt input type  hidden  name  task  value  update    gt      lt input type  text  name  foo    gt      lt input type  submit  name  save  value  Save    gt   lt  form gt    lt form name  delform  action  the action url   method  post  gt      lt input type  hidden  name  task  value  delete    gt      lt input type  hidden  name  post id  value  5    gt      lt input type  submit  name  delete  value  Delete    gt   lt  form gt    Using the hidden  task  field in the handling script to branch appropriately

User · Answer

I think Jason s right  If your  Delete  action is a minimal one  make that be in a form by itself  and line it up with the other buttons so as to make the interface look like one unified form  even if it s not   Or  of course  redesign your interface  and let people delete somewhere else entirely which doesn t require them to see the enormo-form at all

User · Answer

Alternatively you could assign the form actiob on the fly   might not be the best solution  but sure does relieve the server-side logic      lt form name  frm  method  post  gt         lt input type  submit  value  One  onclick  javascript this form action  1 htm     gt         lt input type  submit  value  Two  onclick  javascript this form action  2 htm     gt     lt  form gt

User · Answer

can you have the forms side by side on the page  but not nested   then use CSS to make all the buttons line up pretty    lt form method  post  action  delete processing page  gt      lt input type  hidden  name  id  value  foo    gt      lt input type  submit  value  delete  class  css makes me pretty    gt   lt  form gt    lt form method  post  action  add edit processing page  gt      lt input type  text  name  foo1     gt      lt input type  text  name  foo2     gt      lt input type  text  name  foo3     gt             lt input type  submit  value  post edit  class  css makes me pretty    gt   lt  form gt

User · Answer

I know this is an old question  but HTML5 offers a couple new options   The first is to separate the form from the toolbar in the markup  add another form for the delete action  and associate the buttons in the toolbar with their respective forms using the form attribute    lt form id  saveForm  action   post dispatch save  method  post  gt       lt input type  text  name  foo    gt   lt  -- several of those here -- gt     lt  form gt   lt form id  deleteForm  action   post dispatch delete  method  post  gt       lt input type  hidden  value  some id    gt   lt  form gt   lt div id  toolbar  gt       lt input type  submit  name  save  value  Save  form  saveForm    gt       lt input type  submit  name  delete  value  Delete  form  deleteForm    gt       lt a href   home index  gt Cancel lt  a gt   lt  div gt    This option is quite flexible  but the original post also mentioned that it may be necessary to perform different actions with a single form  HTML5 comes to the rescue  again  You can use the formaction attribute on submit buttons  so different buttons in the same form can submit to different URLs  This example just adds a clone method to the toolbar outside the form  but it would work the same nested in the form    lt div id  toolbar  gt       lt input type  submit  name  clone  value  Clone  form  saveForm             formaction   post dispatch clone    gt   lt  div gt    http   www whatwg org specs web-apps current-work  attributes-for-form-submission  The advantage of these new features is that they do all this declaratively without JavaScript  The disadvantage is that they are not supported on older browsers  so you d have to do some polyfilling for older browsers

User · Answer

If you really don t want to use multiple forms  as Jason sugests   then use buttons and onclick handlers    lt form id  form  name  form  action  path to add edit blog  method  post  gt       lt textarea name  message  id  message  gt Blog message here lt  textarea gt       lt input type  submit  id  save  value  Save  gt   lt  form gt   lt button id  delete  gt Delete lt  button gt   lt button id  cancel  gt Cancel lt  button gt    And then in javascript  I use jQuery here for easyness   even though it is pretty overkill for adding some onclick handlers       delete   click  function        document location    path to delete post id            cancel   click  function        document location     home index         Also I know  this will make half the page not work without javascript

User · Answer

Well  if you submit a form  browser also sends a input submit name and value  So what yo can do is    lt form     action   post dispatch too bad the action url is in the form tag even though conceptually every submit button inside it may need to post to a diffent distinct url    method  post  gt          lt input type  text  name  foo    gt   lt  -- several of those here -- gt         lt div id  toolbar  gt           lt input type  submit  name  action save  value  Save    gt           lt input type  submit  name  action delete  value  Delete    gt           lt input type  submit  name  action cancel  value  Cancel    gt       lt  div gt   lt  form gt    so on server side you just look for parameter that starts width string  action   and the rest part tells you what action to take  so when you click on button Save browser sends you something like foo asd amp action save Save

User · Answer

My solution is to have the buttons call JS functions which write and then submit forms outwith the main form   lt head gt   lt script gt  function removeMe A  B           document write   lt form name  removeForm  method  POST  action  Delete php  gt             document write   lt input type  hidden  name  customerID  value      A      gt             document write   lt input type  hidden  name  productID  value      B      gt             document write   lt  form gt             document removeForm submit      function insertMe A  B           document write   lt form name  insertForm  method  POST  action  Insert php  gt             document write   lt input type  hidden  name  customerID  value      A      gt             document write   lt input type  hidden  name  productID  value      B      gt             document write   lt  form gt             document insertForm submit       lt  script gt   lt  head gt    lt body gt   lt form method  POST  action  main form purpose page php  gt    lt input type  button  name  remove  Value  Remove  onclick  removeMe   customerID    productID    gt   lt input type  button  name  insert  Value  Insert  onclick  insertMe   customerID    productID    gt    lt input type  submit  name  submit  value  Submit  gt   lt  form gt   lt  body gt

User · Answer

HTML5 has an idea of  form owner  - the  form  attribute for input elements  It allows to emulate nested forms and will solve the issue

User · Answer

This discussion is still of interest to me  Behind the original post are  quot requirements quot  which the OP seems to share - i e  a form with backward compatibility  As someone whose work at the time of writing must sometimes support back to IE6  and for years to come   I dig that  Without pushing the framework  all organizations are going to want to reassure themselves on compatibility robustness  and I m not using this discussion as justification for the framework   the Drupal solutions to this issue are interesting  Drupal is also directly relevant because the framework has had a long time policy of  quot it should work without Javascript  only if you want  quot  i e  the OP s issue  Drupal uses it s rather extensive form inc functions to find the triggering element  yes  that s the name in code   See the bottom of the code listed on the API page for form builder   if you d like to dig into details  the source is recommended - drupal-x xx includes form inc   The builder uses automatic HTML attribute generation and  via that  can on return detect which button was pressed  and act accordingly  these can be set up to run separate processes too   Beyond the form builder  Drupal splits data  delete  actions into separate URLs forms  likely for the reasons mentioned in the original post  This needs some sort of search listing step  groan another form  but is user-friendly  as a preliminary  But this has the advantage of eliminating the  quot submit everything quot  issue  The big form with the data is used for it s intended purpose  data creation updating  or even a  merge  action   In other words  one way of working around the problem is to devolve the form into two  then the problem vanishes  and the HTML methods can be corrected through a POST too

User · Answer

Use an iframe for the nested form  If they need to share fields  then    it s not really nested

User · Answer

I went around the issue by including a checkbox depending on what form the person wanted to do  Then used 1 button to submit the whole form

[html] How do you overcome the HTML form nesting limitation?

Examples related to html

Examples related to forms

Examples related to nested