表单重置后删除 href link

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 元素正在重置，但 link 本身并没有消失由于 onchange 命令。有谁知道我也可以如何重置 link？

Answer 1

尝试：

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

Answer 2

您正在以编程方式创建 link，因此您也需要以编程方式将其删除：

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

Answer 3

reset() 方法只重置数据。您需要自己隐藏 link。

Answer 4

一般来说，Reset 方法恢复表单元素的默认值。此方法与单击表单的重置按钮的作用相同。

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

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>

Other Improvments, if your code is not test code.

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

表单重置后删除 href link

Remove href link after form reset

html

javascript

onchange

href

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

看看工作代码。

Other Improvments, if your code is not test code.