HTML-форма с двумя кнопками отправки и двумя «целевыми» атрибутами - PullRequest
Новая
       15

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

72 голосов
/ 03 июня 2009

Привет, у меня есть один HTML .

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

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

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

СПАСИБО!

Ответы [ 15 ]

75 голосов
/ 03 июня 2009

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

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

<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). Нестандартный, как это, Вы должны объяснить это, имея четкое действие default и активировать это всякий раз, когда ни одна кнопка не была нажата. Другими словами, убедитесь, что ваша форма делает что-то разумное (будь то отображение полезного сообщения об ошибке или принятие по умолчанию), когда кто-то нажимает ввод в другом элементе формы вместо нажатия на кнопку отправить кнопку, а не просто сломать.

62 голосов
/ 03 июня 2009

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

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

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

50 голосов
/ 27 марта 2012

Если вы используете 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>
7 голосов
/ 01 октября 2013

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

<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";' />
4 голосов
/ 03 июня 2009

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

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');">
2 голосов
/ 04 ноября 2013

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

<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");
}
?>
2 голосов
/ 12 июня 2013

Пример: 

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

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

1 голос
/ 28 апреля 2016

Это выполнимо на стороне сервера. 

<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 голос
/ 15 мая 2015 
<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 голос
/ 21 августа 2013

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/

Страница:
...