Submit HTML form in a new tab

Individual button control

In case you want a specific button, not the whole form, to redirect to a new tab upon submission, the HTML5 formtarget attribute can be helpful:

<form action="your-action-url" method="post">
  <!-- Other input fields here -->
  <button type="submit" formtarget="_blank">Submit in New Tab</button>
</form>


This approach assigns the "new tab" behavior to a single submit button, providing flexibility in form design.

Preview forms without data persistence

Developing a form? Need a pure preview mechanism? That's where a no-data-persistence button can save the day:

<form action="preview-url" method="post">
  <!-- Preview fields here -->
  <button type="button" target="_blank" onclick="window.open('preview-url', '_blank')">Preview</button>
</form>


Working similar to browser's incognito mode, this allows previews without the risk of unexpected form submissions. You're being a "data ninja" here, sneaking peeks into the future of your form!

Employing jQuery for dynamic form submission

Sometimes, you need to switch flexibly between opening in the same or a new tab based on certain conditions. jQuery is your friend here:

$('form').on('submit', function(e) {
    if (/* your condition for new tab */) {
        $(this).attr('target', '_blank');  // Sets off on a new adventure!
    } else {
        $(this).removeAttr('target');  // Prefers the comfort of home!
    }
});


The code above gives you the ability to toggle the tab destiny dynamically. Perfect for those "Schrodinger's Tab" situations—you don't know where you want to submit until the last moment!

Accidental submission prevention

Accidental clicks are like coffee spills of form submissions. Annoying, but can be prevented:

<form action="your-action-url" method="post">
  <input type="text" name="user">
  <button type="button" onclick="submitForm(this.form, true)">Preview</button>
  <input type="submit" value="Save Changes">
</form>

<script>
function submitForm(form, isPreview) {
  if(isPreview){
    form.target = "_blank"; // "I feel like exploring!"
    form.action = "preview-url";
  } else {
    form.target = ""; // "Home sweet home!"
    form.action = "your-action-url";
  }
  form.submit(); // "Off I go!"
}
</script>


This differentiates the submit actions, and makes sure the user and form are on the same page (literally and figuratively!)

HTML form security reminders

Remember, an opened page can gain partial access to the page that opened it through the window.opener object. To prevent potential risks, include rel="noopener noreferrer" when using target="_blank" to make sure you don't wake up to find that your data went on an unexpected trip!