Skip to main content
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Randy Brown and Rick Mason
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Randy Brown Rick Mason

You Can CMD+Click To Submit A Form To A New Browser Tab

By
Published in , ,

In the past couple of months, I've been digging into the HTMX JavaScript framework as a way to layer dynamic client-side functionality on top of my ColdFusion applications. I'm enamored with HTMX; but, unlike as with other frameworks such as Angular or Svelte, HTMX doesn't want to be an end-to-end holistic solution. Which means, I—as the developer—have to make a lot of decisions about where logic should live; and, whether or not something is a good idea. This is turning out to be a lot harder than I first imagined.

As I'm going through all of these thought experiments, I'm keeping one bright North Star in mind: don't break the web. Meaning, no matter what I do, I shouldn't create an experience that is counter-intuitive to the way users understand the web to work.

As a "web user" myself, I have a lot of sympathy for my "clients". Nothing grinds my gears more than when I'm trying to use a web application and it just doesn't do the thing that I expect it to do. For example, if I hit the Back Button, and I'm taken to an unexpected page, I'm just done—I'll literally rage-quit using the site (if I have an option to do so).

This is why, as I'm exploring HTMX, I don't take these decisions lightly. Last week, I outlined the functional requirements of a modal window. I did this so that I am fully aware of every compromise that I make when attempting to build a modal window into an HTMX and ColdFusion application.

But, a modal window is a relatively complex and advanced mechanism. Clicking links and submitting forms, on the other hand, is straight forward. Or, is it?!.

Many users know that you can CMD+Click (on Mac) to open a link in a new browser tab. But, did you know that you can CMD+Click (on Mac) to open a form submission in a new browser tab?

Screen recoding of form being submitted to new tab.

This works on Chrome, Edge, and Safari (but not on Firefox).

This is important to understand in the context of HTMX and ColdFusion because if you:

  • Attempt to hx-boost a form submission.
  • Add an hx-post to a form element.

... then, this native browser behavior stops working.

If you're coming from an Angular (or similar) background, this might not seem like a big deal. After all, Angular has to intercept the form submission because it's translating it into an API call in the client-side application logic.

But, the point of HTMX (as I understand it) is to work with the grain of the browser and hypermedia—to leverage "the platform" as much as possible. Which means, if I "boost" a form submission in some way, I'm explicitly making a decision to work against the grain of the browser.

Now, I'm not here to say that you shouldn't do this. I'm only saying that it's a choice that you are making, whether or not you realize it. And, I just want to realize that this is a decision I'm making if and when I need to make it.

I'm doing all of these thought experiments in HTMX and ColdFusion because I want to be an educated consumer. And, I want to understand how my application architecture choices affect the user experience (UX). And, where I might be sacrificing UX in favor of developer ergonomics and reduced application complexity.

Reader Comments

Post A Comment — I'd Love To Hear From You!

Post a Comment

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel