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

Question

Hi I have one html <form>

The form has only one action=""

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

Any ideas how I could create two buttons, each submit the same form, but each button gives the form a different target?

THANKS!

Answer 1

In this example, taken from

http://www.webdeveloper.com/forum/showthread.php?t=75170

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");">

Answer 2

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.

Answer 3

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>

Answer 4

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.

Answer 5

I do this on the server-side. That is, the form always submits to the same target, but I have a server-side script that 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.

Note that some browsers are capable of submitting a form without pressing any buttons (by pressing enter). Non-standard as this is, you have to account for it, by having a clear 'default' action and activating that whenever no buttons were pressed.

Answer 6

have two submit buttons one with the default action of the form and the other can be written like this

its easy just to use the "onclick" event handler but imagine if your user disables javascript how would u resolve that?

Answer 7

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.

Answer 8

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

this above example is causing two IE windows to pop, Firefox behaves fine by opening only one. can someone please guide to solution.