HTML form with two submit buttons and two "target" attributes

Question

I have one HTML <form>.

The form has only one action="" attribute.

However I wish to have two different target="" attributes, depending on which button you click to submit the form. This is probably some fancy JavaScript code, but I haven't an idea where to begin.

How could I create two buttons, each submitting the same form, but each button gives the form a different target?

Frankel

There's a usability issue here: What happens when I hit 'enter' instead of clicking a button? You're going to have to cancel the submit event of the form, most likely. – Tennyson

The form should have one button that is the 'default' if the form is submitted but none of the buttons were activated. The default should be chosen wisely. Note that the 'hit enter' thing is a browser-specific extension only and shouldn't be relied upon, whereas all browsers are capable of activating a specific button. – Opportunist

Possible duplicate of Two submit buttons in one form – Hannie

Answer 1

It is more appropriate to approach this problem with the mentality that a form will have a default action tied to one submit button, and then an alternative action bound to a plain button. The difference here is that whichever one goes under the submit will be the one used when a user submits the form by pressing enter, while the other one will only be fired when a user explicitly clicks on the button.

Anyhow, with that in mind, this should do it:

<form id='myform' action='jquery.php' method='GET'>
    <input type='submit' id='btn1' value='Normal Submit'>
    <input type='button' id='btn2' value='New Window'>
</form>

With this javascript:

var form = document.getElementById('myform');
form.onsubmit = function() {
    form.target = '_self';
};

document.getElementById('btn2').onclick = function() {
    form.target = '_blank';
    form.submit();
}

Approaches that bind code to the submit button's click event will not work on IE.

Oligopoly

Since HTML5, it is possible to use <input type="submit" formaction="action2.php" value="Other Action"></input> – Chorea

Answer 2

Update 2015:

This question and answer was from so many years ago when "wanting to avoid relying on Javascript" was more of a thing than it is today. Today I would not consider writing extra server-side functionality for something like this. Indeed, I think that in most instances where I would need to submit form data to more than one target, I'd probably be doing something that justified doing a lot of the logic client-side in Javascript and using XMLHttpRequest (or indeed, the Fetch API) instead.

Update 2023:

I would definitely be writing a lot of logic in the front end Javascript code and would be using the Fetch API these days.

Original answer follows:

---

I do this on the server-side. That is, the form always submits to the same target, but I've got a server-side script who is responsible for redirecting to the appropriate location depending on what button was pressed.

If you have multiple buttons, such as

<form action="mypage" method="get">

  <input type="submit" name="retry" value="Retry" />
  <input type="submit" name="abort" value="Abort" />

</form>

Note: I used GET, but it works for POST too

Then you can easily determine which button was pressed - if the variable retry exists and has a value then retry was pressed, and if the variable abort exists and has a value then abort was pressed. This knowledge can then be used to redirect to the appropriate place.

This method needs no Javascript.

Opportunist

I'm not sure if it's because 7 years have passed since this answer but this method does not work for me (Testing in Chrome) – Vesta

This should work as it did 7 years ago. You just shouldn't need to worry about the note at the bottom anymore. – Opportunist

How does redirecting to the appropriate location work for POST too? Assumming that location is a url I'd think all data is gone... I must be overlooking something or someone'd have mentioned that in the last 7 years... Is that what @Vesta means? – Ejectment

The redirect after a post would not pass on any additional form data to the target URL. In the trivial example I gave that's not an issue because there are no other form elements. If you have other form data you would need to pass it on to the destination in some other way, for example by translating it to a query string, or passing it out of band. The typical scenario for this type of thing, for me, was to have one "submit" action and one "cancel" action (or a "go here instead" action") and only the latter action redirected. Which is another way to do it without worrying about POST data. – Opportunist

action = location. action ≠ target. See w3schools.com/tags/att_a_target.asp . – Boldt

Answer 3

In case you are up to HTML5, you can just use the attribute formaction. This allows you to have a different form action for each button.

<!DOCTYPE html>
<html>
  <body>
    <form>
      <input type="submit" formaction="firsttarget.php" value="Submit to first" />
      <input type="submit" formaction="secondtarget.php" value="Submit to second" />
    </form>
  </body>
</html>

Alienage

Good one. You can catch the click event via jQuery and change the forms action attribute to make this compatible with older browsers. – Aperient

formaction ≠ target. formaction is the location (i.e. URL) that the form is submitted to. target is the name of the browser tab/window that the form results are displayed on. – Boldt

Hot! Hot! Hot! However did I miss this when I revised for html5? – Wallaroo

Answer 4

This works for me:

<input type='submit' name='self' value='This window' onclick='this.form.target="_self";' />

<input type='submit' name='blank' value='New window' onclick='this.form.target="_blank";' />

Shortly

Answer 5

In this example, you can see the way to change the target on the button OnClick event.

function subm(f,newtarget)
{
document.myform.target = newtarget ;
f.submit();
}

<FORM name="myform" method="post" action="" target="" >

<INPUT type="button" name="Submit" value="Submit" onclick="subm(this.form,'_self');">
<INPUT type="button" name="Submit" value="Submit" onclick="subm(this.form,'_blank');">

Bernardina

Answer 6

Simple and easy to understand, this will send the name of the button that has been clicked, then will branch off to do whatever you want. This can reduce the need for two targets. Less pages...!

<form action="twosubmits.php" medthod ="post">
<input type = "text" name="text1">

<input type="submit"  name="scheduled" value="Schedule Emails">
<input type="submit"  name="single" value="Email Now">
</form>

twosubmits.php

<?php
if (empty($_POST['scheduled'])) {
// do whatever or collect values needed
die("You pressed single");
}

if (empty($_POST['single'])) {
// do whatever or collect values needed
die("you pressed scheduled");
}
?>

Estimate

Answer 7

Example:

<input 
  type="submit" 
  onclick="this.form.action='new_target.php?do=alternative_submit'" 
  value="Alternative Save"
/>

Voila. Very "fancy", three word JavaScript!

Anthelion

Does this permanently change the form action or just for that one click? – Laurencelaurene

@Laurencelaurene onclick works every time you click on it however normally a submit would reload the page or take you to a new page when you click on it. – Anthelion

Answer 8

Here's a quick example script that displays a form that changes the target type:

<script type="text/javascript">
    function myTarget(form) {
        for (i = 0; i < form.target_type.length; i++) {
            if (form.target_type[i].checked)
                val = form.target_type[i].value;
        }
        form.target = val;
        return true;
    }
</script>
<form action="" onSubmit="return myTarget(this);">
    <input type="radio" name="target_type" value="_self" checked /> Self <br/>
    <input type="radio" name="target_type" value="_blank" /> Blank <br/>
    <input type="submit">
</form>

Tellurian

Answer 9

HTML:

<form method="get">
<input type="text" name="id" value="123"/>
<input type="submit" name="action" value="add"/>
<input type="submit" name="action" value="delete"/>
</form>

JS:

$('form').submit(function(ev){ 
ev.preventDefault();
console.log('clicked',ev.originalEvent,ev.originalEvent.explicitOriginalTarget) 
})

http://jsfiddle.net/arzo/unhc3/

Gustaf

explicitOriginalTarget is a mozilla specific extension – Leash

Answer 10

<form id='myForm'>
    <input type="button" name="first_btn" id="first_btn">
    <input type="button" name="second_btn" id="second_btn">
</form>

<script>

$('#first_btn').click(function(){
    var form = document.getElementById("myForm")
    form.action = "https://foo.com";
    form.submit();
});

$('#second_btn').click(function(){
    var form = document.getElementById("myForm")
    form.action = "http://bar.com";
    form.submit();
});

</script>

Jaddo

Answer 11

It is do-able on the server side.

<button type="submit" name="signin" value="email_signin" action="/signin">Sign In</button>
<button type="submit" name="signin" value="facebook_signin"  action="/facebook_login">Facebook</button>

and in my node server side script

app.post('/', function(req, res) {
if(req.body.signin == "email_signin"){
            function(email_login) {...} 
        }
if(req.body.signin == "fb_signin"){
            function(fb_login) {...}    


        }
    }); 

Precast

Answer 12

On each of your buttons you could have the following;

<input type="button" name="newWin" onclick="frmSubmitSameWin();">
<input type="button" name="SameWin" onclick="frmSubmitNewWin();">

Then have a few small js functions;

<script type="text/javascript">
    function frmSubmitSameWin() {
        form.target = '';
        form.submit();
    }


    function frmSubmitNewWin() {
        form.target = '_blank';
        form.submit();
    }
</script>

That should do the trick.

Wolfsbane

Answer 13

Have both buttons submit to the current page and then add this code at the top:

<?php
    if(isset($_GET['firstButtonName'])
        header("Location: first-target.php?var1={$_GET['var1']}&var2={$_GET['var2']}");
    if(isset($_GET['secondButtonName'])
        header("Location: second-target.php?var1={$_GET['var1']}&var2={$_GET['var2']}");
?>

It could also be done using $_SESSION if you don't want them to see the variables.

Kegler

Answer 14

Alternate Solution. Don't get messed up with onclick,buttons,server side and all.Just create a new form with different action like this.

<form method=post name=main onsubmit="return validate()" action="scale_test.html">
<input type=checkbox value="AC Hi-Side Pressure">AC Hi-Side Pressure<br>
<input type=checkbox value="Engine_Speed">Engine Speed<br>
<input type=submit value="Linear Scale" />
</form>
<form method=post name=main1 onsubmit="return v()" action=scale_log.html>
<input type=submit name=log id=log value="Log Scale">
</form>

Now in Javascript you can get all the elements of main form in v() with the help of getElementsByTagName(). To know whether the checkbox is checked or not

function v(){
var check = document.getElementsByTagName("input");

    for (var i=0; i < check.length; i++) {
        if (check[i].type == 'checkbox') {
            if (check[i].checked == true) {

        x[i]=check[i].value
            }
        }
    }
console.log(x);
}   

Petrina

Answer 15

This might help someone:

Use the formtarget attribute

<html>
  <body>
    <form>
      <!--submit on a new window-->
      <input type="submit" formatarget="_blank" value="Submit to first" />
      <!--submit on the same window-->
      <input type="submit" formaction="_self" value="Submit to second" />
    </form>
  </body>
</html>

Eleanore

Answer 16

e.submitEvent.originalEvent.submitter.value

if you use event of form

Perfect