Remove href link after form reset

Question

I have the following mock form and I'd like the link to either disappear, or reset to the default selection.

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 is that when I hit Reset Selection, the select elements are being reset but the link itself doesn't disappear due to the onchange command. Does anyone know how I can reset the link as well?

Answer 1

In General, Reset method restores a form element's default values. This method does the same thing as clicking the form's reset button.

Why Link is not reset to default?

Link is Anchor Tag which is not part of form Field. Form Reset Feature is to reset Form Fields not other elements like anchor, p, h1-h6.

Take a look at the working code.

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.

1. Avoid Inline Styles and keep it as styles.
2. Use Form Field label.
3. Instead of span tags. Avoid <br> element and manage with CSS Styles.
4. Use addEventListener method.