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

Question 1

У мене є одна HTML-форма <form>.

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

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

Як я міг створити дві кнопки, кожна з яких подає однакову форму, але кожна кнопка надає формі іншу ціль?

Question 2

Доцільніше підходити до цієї проблеми з ментальністю, згідно з якою форма матиме дію за замовчуванням, прив’язану до однієї кнопки подання, а потім альтернативну дію, прив’язану до простої кнопки. Різниця тут полягає в тому, що залежно від того, який із них подається під подання, буде використовуватися той, який користувач подає форму, натискаючи клавішу 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.

Question 3

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

Якщо у вас кілька кнопок, наприклад

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

Примітка: деякі браузери можуть подавати форму без натискання будь-яких кнопок (натисканням клавіші Enter). Як це нестандартно, вам доводиться це враховувати, виконуючи чіткі defaultдії та активуючи, щоби не натискати жодної кнопки. Іншими словами, переконайтеся, що ваша форма робить щось розумне (незалежно від того, чи відображається корисне повідомлення про помилку, чи передбачається за замовчуванням), коли хтось натискає клавішу введення в іншому елементі форми, замість того, щоб натиснути кнопку подати, а не просто зламатися.

Question 4

Якщо вам до 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>

Question 5

Це працює для мене:

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

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

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

Question 8

Приклад:

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

Вуаля. Дуже "химерний", JavaScript із трьох слів!

Question 9

Ось короткий приклад сценарію, який відображає форму, що змінює цільовий тип:

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

Question 10

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/

Question 11

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

Question 12

Це можливо на стороні сервера.

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


        }
    });

Question 13

На кожній вашій кнопці ви можете мати наступне;

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

Це повинно зробити трюк.

Question 14

Нехай обидві кнопки подаються на поточну сторінку, а потім додають цей код вгорі:

<?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, якщо ви не хочете, щоб вони бачили змінні.

Question 15

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

Question 16

Це може допомогти комусь:

Використовуйте атрибут 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>