表单重置后删除href链接

Question

我有以下模拟表单，我希望link消失，或重置为默认选择。

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>

  <a href="generateLink()" id="link" target="_blank"></a><br><br>

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

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();
}

What happens now是当我点击重置选择时，select元素正在重置，但由于onchange命令，链接本身不会消失。有谁知道如何重置链接？

Answer 1

尝试：

document.formName.onreset = function(){
    document.getElementById('link').innerHTML = ''
}

Answer 2

您正在以编程方式创建链接，因此您还需要以编程方式删除它：

document.formName.onreset = function(){
    let linkEl = document.getElementById("link");
    linkElement.href = '';
    linkElement.innerHTML= '';
}

Answer 3

通常，Reset方法恢复表单元素的默认值。此方法与单击表单的重置按钮完全相同。

为什么Link没有重置为默认值？

链接是锚标记，它不是表单字段的一部分。表单重置功能是重置表单字段而不是其他元素，如anchor, p, h1-h6。

查看工作代码。

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();
}

document.formName.onreset = function(){
    document.getElementById('link').innerHTML = ''
}

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

    <a href="generateLink()" id="link" target="_blank"></a><br><br>

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

</form>

  

其他改进，如果您的代码不是测试代码。

1. 避免使用内联样式并将其保留为styles。
2. 使用表单字段label。
3. 而不是span标签。避免使用<br>元素并使用CSS样式进行管理。
4. 使用addEventListener方法。

Answer 4

reset（）方法仅重置数据。您需要自己隐藏链接。