Submit form and stay on same page?

by

99% of the time I would use XMLHttpRequest or fetch for something like this. However, there’s an alternative solution which doesn’t require javascript…

You could include a hidden iframe on your page and set the target attribute of your form to point to that iframe.

<style>
  .hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }
</style>

<iframe name="hiddenFrame" class="hide"></iframe>

<form action="receiver.pl" method="post" target="hiddenFrame">
  <input name="signed" type="checkbox">
  <input value="Save" type="submit">
</form>

There are very few scenarios where I would choose this route. Generally handling it with javascript is better because, with javascript you can…

  • gracefully handle errors (e.g. retry)
  • provide UI indicators (e.g. loading, processing, success, failure)
  • run logic before the request is sent, or run logic after the response is received.

More Related Contents:

  1. How can I use Perl to grab text from a web page that is dynamically generated with JavaScript?
  2. Write tags in HTML and print
  3. Get class list for element with jQuery
  4. How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?
  5. Get HTML5 localStorage keys
  6. Can I run javascript before the whole page is loaded?
  7. What is CDATA in HTML? [duplicate]
  8. Adding additional data to select options using jQuery
  9. HTML5 dragleave fired when hovering a child element
  10. localStorage access from local file
  11. :touch CSS pseudo-class or something similar?
  12. Open link in iframe [closed]
  13. Is it possible to play HTML5 video in reverse?
  14. d3.js – v3 and v4 – Enter and Update differences
  15. Load event not fired on Safari when reloading page
  16. Multiple Select limit number of selection
  17. Can you use both the async and defer attributes on a HTML tag?
  18. How to vertically align all text in CSS?
  19. How can I stop an onclick event from firing for parent element when child is clicked?
  20. getting mouse position with javascript within canvas
  21. How can i access javascript variables in JSP?
  22. Maximum item size in IndexedDB
  23. How do I detect the inherited background-color of an element using jQuery/JS?
  24. multiple pages in Vue.js CLI
  25. Is there a way to get innerText of only the top element (and ignore the child element’s innerText)?
  26. document.activeElement returns body in onblur handler
  27. refresh div with jquery
  28. Remove everything within script and style tags
  29. Clear localStorage on tab/browser close but not on refresh
  30. Getting a sticky header to “push up”, like in Instagram’s iPhone app using CSS and jQuery

Leave a Comment