У меня один HTML ‹form›.
Форма имеет только один атрибут action="".
Однако я хочу иметь два разных target="" атрибута, в зависимости от того, какую кнопку вы нажимаете, чтобы отправить форму. Вероятно, это какой-то необычный код JavaScript, но я не знаю, с чего начать.
Как я могу создать две кнопки, каждая из которых отправляет одну и ту же форму, но каждая кнопка дает форме другую цель?
Более уместно подходить к этой проблеме с точки зрения того, что форма будет иметь действие по умолчанию, привязанное к одной кнопке отправки, а затем альтернативное действие, привязанное к простой кнопке. Разница здесь в том, что тот, который находится под отправкой, будет использоваться, когда пользователь отправляет форму, нажав клавишу ввода, а другой будет запущен только тогда, когда пользователь явно нажимает кнопку.
Во всяком случае, имея это в виду, это должно сработать:
<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.
<input type="submit" formaction="action2.php" value="Other Action"></input>
- person Ákos Vandra; 21.05.2017
Я делаю это на стороне сервера. То есть форма всегда отправляется одной и той же цели, но у меня есть серверный скрипт, который отвечает за перенаправление в соответствующее место в зависимости от того, какая кнопка была нажата.
Если у вас несколько кнопок, например
<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действие и активируя его всякий раз, когда не нажимались никакие кнопки. Другими словами, убедитесь, что ваша форма делает что-то разумное (будь то отображение полезного сообщения об ошибке или предполагаемое значение по умолчанию), когда кто-то нажимает Enter в другом элементе формы вместо нажатия кнопки отправки, а не просто ломка.
redirecting to the appropriate location work for POST too? Предполагая, что это адрес URL, я бы подумал, что все данные пропали ... Я, должно быть, не замечаю чего-то, иначе кто-то упомянул об этом за последние 7 лет ... Это то, что имеет в виду @Andrew?
- person Mark; 04.02.2016
Если вы используете 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>
Это работает для меня:
<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";' />
В этом примере взято из
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');">
Простой и понятный, он отправит имя нажатой кнопки, а затем будет разветвляться, чтобы делать все, что вы хотите. Это может уменьшить потребность в двух мишенях. Меньше страниц ...!
<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>
twosubmit.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");
}
?>
Пример:
<input
type="submit"
onclick="this.form.action='new_target.php?do=alternative_submit'"
value="Alternative Save"
/>
Вуаля. Очень "навороченный", трехсловный JavaScript!
Вот быстрый пример сценария, который отображает форму, изменяющую целевой тип:
<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>
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/
explicitOriginalTarget - это расширение для Mozilla.
- person cjg; 03.04.2015
Это возможно на стороне сервера.
<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) {...}
}
});
На каждой из ваших кнопок может быть следующее:
<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>
Это должно делать свое дело.
Отправьте обе кнопки на текущую страницу, а затем добавьте этот код вверху:
<?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, если вы не хотите, чтобы они видели переменные.
Альтернативное решение. Не путайтесь с 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);
}
Это может кому-то помочь:
Используйте атрибут 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>
