使用 onsubmit 打开一个 link

Question

我有以下模拟片段：

JS :

function generateLink()
{
  var A = document.getElementById('AAA').value;
  var B = document.getElementById('BBB').value;

  if(B == "1" || B == "2")
    link ='http://' + B + '.' + A + '.domain';
  else if(B == "3" || B == "4")
      link ='http://' + B + '.' + A + '.domain/link.jsp';
  else
    link ='/404.html';

  return link;
}

function showLink()
{
  var link = generateLink();

  document.getElementById("link").href = link;
  document.getElementById("link").innerHTML = link;
}

document.formName.onsubmit = function(){
    this.action = generateLink();
}

HTML :

<form name="formName" target="_blank">

<div style="margin: 0 auto; width:600px;">

  <div style="float:left;"><span>Pick AAA</span><br>
    <select id="AAA" onchange="showLink()">
      <option value="11">Eleven</option>
      <option value="12">Twelve</option>
      <option value="13">Thirteen</option>
      <option value="14">Fourteen</option>
    </select>
  </div>

  <div style="float:right;"><span>Pick BBB</span><br>
    <select id="BBB" onchange="showLink()">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
    </select>  
  </div>

  <div style="float:left; margin-left:120px; margin-right: 40px; margin-top:70px;">
    <a href="generateLink()" id="link"></a><br><br>
    <input type="submit" value="Go to"><br><br>
    <input type="reset" value="Reset Selection">
  </div>

当我运行这段代码发生的事情是 href 在新选项卡中打开正确的 url，而 submit 按钮打开我所在的页面当前在新选项卡中。我不确定我做错了什么。 document.formName.onsubmit 不应该让 submit 按钮与 href 按钮一样工作吗？

Answer 1

您想在

上设置 action=""

<form>

标签。当提交表单时，它将提交到 action="" 中定义的页面。如果不定义，则默认提交回同一页面。

Answer 2

我尝试用您的代码设置一个 fiddle，它运行良好。但是在这样做的时候，我意识到我必须移动一段代码来避免一个小问题，所以我猜你也有同样的情况。我的猜测是您在 HTML 之前拥有所有 JavaScript 代码。当这部分

document.formName.onsubmit = function(){
    this.action = generateLink();
}

已执行，表单尚不存在，无法设置 onsubmit（您应该也会在控制台中看到有关它的错误）。当您稍后单击提交按钮时，表单没有定义 action，只是转到同一页面（它的默认行为）。 Here's a fiddle遇到这个问题。

最简单的修复方法是将 onsubmit 赋值移动到表单之后。 Here's the same fiddle, with the relevant code moved，这确实符合您的预期。

使用 onsubmit 打开一个 link

Open a link using onsubmit

html

javascript

href

onsubmit