How do you overcome the HTML form nesting limitation?

by

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.

<form id="saveForm" action="/post/dispatch/save" method="post">
    <input type="text" name="foo" /> <!-- several of those here -->  
</form>
<form id="deleteForm" action="/post/dispatch/delete" method="post">
    <input type="hidden" value="some_id" />
</form>
<div id="toolbar">
    <input type="submit" name="save" value="Save" form="saveForm" />
    <input type="submit" name="delete" value="Delete" form="deleteForm" />
    <a href="https://stackoverflow.com/home/index">Cancel</a>
</div>

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.

<div id="toolbar">
    <input type="submit" name="clone" value="Clone" form="saveForm"
           formaction="/post/dispatch/clone" />
</div>

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.

More Related Contents:

  1. Bootstrap height
  2. How do you disable browser autocomplete on web form field / input tags?
  3. List of HTML5 elements that can be nested inside P element?
  4. Google Chrome form autofill and its yellow background
  5. How do I change the color of radio buttons?
  6. How to get HTML 5 input type=”date” working in Firefox and/or IE 10
  7. What does “for” attribute do in HTML tag?
  8. How to call servlet class from HTML form
  9. Limit number of characters allowed in form input text field
  10. Make page to tell browser not to cache/preserve input values
  11. Tri-state Check box in HTML?
  12. Can you have multiline HTML5 placeholder text in a ?
  13. How to disable the resize grabber of ? [duplicate]
  14. HTML apply a filter
  15. Use Fieldset Legend with bootstrap
  16. How to align input forms in HTML
  17. HTML form with multiple “actions”
  18. or ? What’s the difference?
  19. How to align texts inside of an input?
  20. Why is the first element always blank in my Rails multi-select, using an embedded array?
  21. How do I style the HTML form validation error messages with CSS?
  22. Multiple submit buttons on HTML form – designate one button as default [duplicate]
  23. What happens if the action field in a has parameters?
  24. Can you style html form buttons with css?
  25. Styling autocomplete dropdowns in browsers
  26. Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?
  27. Is it safe to use anchor to submit form?
  28. Symfony Forms: HTML5 datalist
  29. button image as form input submit button?
  30. Can I nest form tags in other form tags?

Leave a Comment