Forms. Lots of forms. We certainly use them often. My standard process for years has been post form data to PHP, transferring control from one page to the next. But I am having to un-learn the habit of jumping from page to page because the user demands a more seamless experience. That means preloading and hiding content or loading new content with Ajax. I’ve been doing client-side form validation for a few years, but processing the form in the browser? That’s always seemed a bit dicey.
Thankfully, libraries like jQuery have worked out the kinks and quirks of various browsers. Many pioneers have gone before and fallbacks have been perfected. Just as we validate form data on both the client and the server, it is now very simple to add client-side form posts to a system that already has server-side form processing. Just add some magic Ajax and a stripped-down version of the submit handler on the server and, tada!, you’re a client-side genius.
Looking around today for a refresher on this topic I found four pretty good tutorials. I chose to share this one with you because it seems to cover all of the bases, from building a good form to good validation to proper submittal, and full circle back to replacing the form in the page with response text. Although it suggests handling the form info with PHP, the implementation is agnostic and could be used with whatever back end. One thing that none of the articles covered was fallback, but I’ve hinted at that above. Someday soon I’ll write up my own full tutorial, but until then, here is a very good one…
Submit A Form Without Page Refresh
