在表单中：提交不同的按钮转移到不同的页面（html）答案

【问题标题】：In form: Submit different button to transfer to different page (html)在表单中：提交不同的按钮转移到不同的页面（html）
【发布时间】：2021-12-28 20:27:02
【问题描述】：

我当前的代码：

<html>
<body>

<h1>Select button </h1>

<form method="get">

  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>

Choose your page when submit:
<button name="subject" type="submit" value="aa">Page A</button>
<button name="subject" type="submit" value="bb">Page B</button>
</form>

</body>
</html>

我怎样才能为流量制作代码：单击按钮“页面 A”重定向到“http://linkA”或点击按钮“页面B”重定向到“http://linkB”

谢谢

【问题讨论】：

不要创建提交按钮。提交按钮用于提交表单。不要重定向到另一个页面。使用普通按钮并使用点击事件处理程序通过 Javascript 重定向。
创建两个表单。

标签： html forms

【解决方案1】：

你有很多选择：

使用常规链接，并将其样式设置为 CSS 中的按钮
使用 Javascript：onclick="window.location='TARGET';"
将每个提交按钮以不同的动作参数放在自己的表单中
使用 formaction HTML 属性（使用这个！）

<form method="get" action="pageA">    
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    
    Choose your page when submit:
    <button name="subject" type="submit" value="aa">Page A</button>
    <button name="subject" type="submit" value="bb" formaction="/pageB">Page B</button>
</form>

【讨论】：

请为选项 3 提供帮助和更多详细信息。谢谢

【解决方案2】：

您可以尝试使用此自定义代码

HTML 代码

<html>
<body>

<h1>Select button </h1>

<form method="get" id="form-one" action="">
<form method="get" id="form-two" action="" style="display:none">

  <button name="subject" type="submit" id="button-one" value="aa">Page A</button>
  <button name="subject" type="submit" id="button-two" value="bb">Page B</button>

</form>

</body>
</html>

Javascript 代码

 $("#button-one").click(function(){
      $('#form-one').show();
      $('#form-two').hide();
});

$("#button-two").click(function(){
    $('#form-one').hide();
    $('#form-two').show();
});

【讨论】：