Submit One HTML Form to Two Different Pages

An HTML form can submit to different action pages without changing the form with JavaScript. Put the normal destination in the form's action attribute, then use formaction on another submit button to override that destination.

A submit button can also use formtarget="_blank" when its response should open in a new browsing context, usually a new tab. These submit-button attributes override the form's corresponding settings only for the button that was used.

Two Submit Buttons with Different Action Pages Top ↑

<form method="post" action="test5.php">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" value="plus2net">

  <button type="submit">Submit to test5.php</button>
  <button type="submit" formaction="test6.php">Submit to test6.php</button>
</form>

The first button uses the form's normal action="test5.php". The second button overrides it with formaction="test6.php". No JavaScript is required.

Submit One Button to a New Tab or Window Top ↑

Add formtarget="_blank" to the submit button that should display its response in a new browsing context. Browsers commonly use a new tab, but the exact presentation is controlled by the browser and user settings.

<button type="submit"
  formaction="test6.php"
  formtarget="_blank">
  Open test6.php in a new tab or window
</button>

For a page focused specifically on this behavior, see submitting a form to a new window or tab.

Working Demo with Two Destinations Top ↑

This updated demo keeps the original Plus2net endpoints. The first button submits to test5.php in the current page. The second submits the same form data to test6.php in a new tab or window.

How formaction and formtarget Work Top ↑

The form-level attributes provide defaults. A submit button can override selected submission settings for that one submission.

For this tutorial, formaction and formtarget are the important overrides. Avoid adding the others unless the different action genuinely requires them.

When Both Buttons Use the Same Action Top ↑

If both buttons submit to the same server endpoint but request different operations, you usually do not need different action URLs. Give the buttons the same name and different values so the server can identify which submit button was used.

<form method="post" action="process.php">
  <button type="submit" name="task" value="preview">Preview</button>
  <button type="submit" name="task" value="save">Save</button>
</form>

The clicked submit button contributes its name/value pair to the submission. The server must still validate that requested operation before performing it.

Why Native Submit Attributes Are Better Than onclick Here Top ↑

The older version of this page changed form.action and form.target from inline onclick handlers. Modern HTML already has declarative attributes for this exact job, so JavaScript is unnecessary.

Using formaction and formtarget also avoids accidentally leaving a modified action or target on the form after one button has been clicked.

Method, Validation and Security Top ↑

• Use GET for retrievable/search/filter requests where putting parameters in the URL is appropriate.
• Use POST commonly for submissions that create or change server-side state.
• POST does not encrypt form data. Sensitive submissions still require HTTPS.
• Browser-side validation improves UX but does not replace server-side validation.
• Every action endpoint must independently validate and authorize the submitted values.
• Controls generally need a name to contribute a value to the submitted form data.

Video: Multiple Submit Buttons and Form Targets Top ↑

Practical Uses Top ↑

• Send the same form to different processing endpoints.
• Open a preview or printable response in a new tab while keeping the editing form available.
• Use one endpoint for preview and another for final processing.
• Let each submit button override only the settings it needs.

Opening a separate tab is not always necessary. If the user can preview safely within the same workflow, that may provide a simpler experience.

Common Mistakes Top ↑

Changing the form action with inline JavaScript Top ↑

For normal multiple-destination forms, use formaction instead of changing the form's action from an onclick handler.

Changing the form target and forgetting to restore it Top ↑

A JavaScript-assigned target can remain on the form for later submissions. A button-specific formtarget applies only when that submit button is used.

Assuming _blank guarantees a separate browser window Top ↑

_blank requests a new browsing context. The browser may display it as a new tab or window.

Treating POST as a security feature Top ↑

POST changes how data is transmitted in the HTTP request; it does not encrypt the connection. Use HTTPS and validate data on the server.

Related Tutorials Top ↑

Frequently Asked Questions Top ↑

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: