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

你想设置一个动作=＆＃34;＆＃34;在

array outres outres1-outres55 ;
array outres(55) ;

标签。提交表单后，它将提交到action =＆＃34;＆＃34;中定义的页面。如果没有定义，它将默认提交回同一页面。

Answer 2

我试图用你的代码设置一个小提琴，它运作得很好。但是在这样做的时候，我意识到我必须移动一段代码来避免一个小问题，所以我猜你也有同样的情况。我的猜测是你在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打开链接

2 个答案: