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

Question

Привет, у меня есть один html <form>.

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

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

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

СПАСИБО!

Answer 1

Это более целесообразно подходить к этой проблеме с менталитетом, что форма будет иметь действие по умолчанию привязаны к одной кнопки отправки , а затем альтернативное действие, связанное с простой кнопкой. Разница здесь в том, что в зависимости от того, какой из них попадает под submit, будет использоваться тот, который используется, когда пользователь отправляет форму, нажимая клавишу 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.

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

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

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

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

Answer 6

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

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

Answer 7

В случае, если вы до HTML5, вы можете просто использовать атрибут formaction:

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

Answer 8

Пример:

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

вуаля. Очень «фантазия», три слова JavaScript!

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/

Answer 10

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

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

Answer 11

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

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

двухместные разряды.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"); 
} 
?> 

Answer 12

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

Answer 13

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

Answer 14

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

<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) {...}  


     } 
    }); 

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