HTML-форма с двумя кнопками отправки и двумя атрибутами "target"

Привет у меня есть один html

.

форма имеет только один .

однако я хочу иметь 2 разных target="" атрибуты в зависимости от того, какую кнопку Вы нажмете, чтобы отправить форму. Это, вероятно, какой-то причудливый javascript, но я понятия не имею, с чего начать.

есть идеи, как я мог бы создать две кнопки, каждая из которых отправляет одну и ту же форму, но каждая кнопка дает форме другую цель?

спасибо!

71
forms html javascript submit

15 ответов

более целесообразно подходить к этой проблеме с менталитетом, что форма будет иметь действие по умолчанию, привязанное к одной кнопке отправки, а затем альтернативное действие, привязанное к простой кнопке. Разница здесь в том, что какой бы из них ни был отправлен, он будет использоваться, когда пользователь отправляет форму, нажав enter, а другой будет запущен только тогда, когда пользователь явно нажмет на кнопку.

во всяком случае, имея это в виду, это должно делать это:

<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>

С помощью этого javascript:

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

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

подходы, которые связывают код с событием нажатия кнопки отправки, не будут работать в IE.

59

Я делаю это на стороне сервера. То есть форма всегда подчиняется одной и той же цели, но у меня есть серверный скрипт, который отвечает за перенаправление в нужное место в зависимости от того какая кнопка была нажата.

если у вас есть несколько кнопок, таких как 

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

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

</form>

Примечание : я использовал GET, но он работает для POST тоже

затем вы можете легко определить, какая кнопка была нажата - если переменная retry существует и имеет значение, затем была нажата повторная попытка, и если переменная abort существует и имеет значение, затем был нажат abort. Затем эти знания можно использовать для перенаправления в соответствующее место.

этот метод не требует Javascript.

Примечание : что некоторые браузеры способны отправлять форму без нажатия каких-либо кнопок (нажатием enter). Нестандартно, как это, вы должны объяснить это, имея clear default действие и активация, когда кнопки не были нажаты. Иначе говоря, убедитесь, что ваша форма не что-то толковое (будь то отображение полезного сообщения об ошибке или принятие значения по умолчанию), когда кто-то хиты вводятся в другой элемент формы вместо нажатия кнопки Отправить пуговица, а не просто ломается.

75

В случае, если вы до HTML5, вы можете просто использовать атрибут formaction. Это позволяет вам иметь другую форму action для каждой кнопки.

<!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>
49

это работает для меня:

<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";' />
6

в этом примере, взятом из

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

вы можете увидеть способ изменить цель на событии onclick кнопки.

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

пример:

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

вуаля. Очень "причудливый", три слова JavaScript!

2

вот краткий пример скрипта, который отображает форму, которая изменяет целевой тип:

<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>
1

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/

1

просто и легко понять, это отправит имя кнопки, которая была нажата, а затем будет ветвиться, чтобы сделать все, что вы хотите. Это может уменьшить потребность в двух целях. Меньше страниц...!

<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");
}
?>
1
<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>
1

это do-able на стороне сервера.

<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>

и в моем узле серверный скрипт

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


        }
    });
1

на каждой из ваших кнопок вы можете иметь следующее;

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

тогда есть несколько небольших функций js;

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


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

это должно сделать трюк.

0

обе кнопки Отправить на текущую страницу, а затем добавить этот код в верхней части:

<?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']}");
?>

Это также можно сделать с помощью $_SESSION, если вы не хотите, чтобы они видели переменные.

0

Альтернативное Решение. Не связывайтесь с onclick, кнопками, серверной стороной и всем остальным.Просто создайте новую форму с другим действием, как это.

<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>

теперь в Javascript вы можете получить все элементы основной формы в v () с помощью getElementsByTagName (). Чтобы узнать, установлен ли флажок или нет

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);
}
0

Это может помочь кому-то:

используйте атрибут formtarget 

<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>
0