Подтвердить что ты не робот

HTML-форма с двумя кнопками отправки и двумя атрибутами "цель"

У меня есть один HTML <форма>.

Форма имеет только один атрибут action="".

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

Если у вас несколько кнопок, например

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

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

</form>

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

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

Этот метод не нуждается в Javascript.

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

Ответ 3

Если вы используете 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>

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Пример:

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

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 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/

Ответ 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>

Ответ 11

Он работает на стороне сервера.

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

и на моей стороне сервера node script

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


        }
    });

Ответ 12

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

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

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

Ответ 13

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

<?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, если вы не хотите, чтобы они видели переменные.

Ответ 14

Альтернативное решение. Не перепутайтесь с 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);
}

Ответ 15

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

Используйте атрибут 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>