Output generated link using onchange

Question

I have the following code.

JS :

function generateLink()
{
  var car = document.getElementById('cars').value;
  var year = document.getElementById('years').value;

  if(car  == "fiat" || car == "honda" || car == "mitsu" || car == "acura" || car == "ford")
        document.ref.action ='http://' + year + '.' + car + '.domain.net';
  else if(car == "audi" || car == "volvo" || car == "mazda" || car == "nissan" || car == "porsche" || car == "wholesale")
        document.ref.action ='http://' + year + '.' + car + '.domain.net/Sales.jsp';
  else if(car == "BMW")
        document.ref.action ='http://' + year + '.' + car + '.domain.net/container.jsp';
  else
        document.ref.action ='/error-pages/404.html';
  return true;
}

function showLink()
{
document.getElementById("years").innerHTML = "Link: " + generateLink();
}

**HTML :

<h1>Ref</h1>
<form name="ref" onsubmit="return generateLink();" target="_blank">

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

  <div style="float:left;"><span>PICK A CAR</span><br>
    <select id="cars">
     …
    </select>
  </div>

  <div style="float:right;"><span>PICK A YEAR</span><br>
    <select id="years" onchange="showLink()">
    …
    </select>
  </div>

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

 ...

What I want to do is to output the generated link above the submit button after the user changes the years field. Ideally, I would like it to be generated only if the first field cars was changed as well, but I am not sure how how to do it yet and it is crucial for now. I know I should be using onchange, but I am not sure how to make it actually output the link from the generateLink function.

Edit:

I was able to output it using the following function and adding the id link above the submit button. The link shows up but I am not sure how to make the href address accurate based on the selections.

function showLink()
{
  var car = document.getElementById('cars').value;
  var year = document.getElementById('years').value;

  if(car  == "fiat" || car == "honda" || car == "mitsu" || car == "acura" || car == "ford")
        document.getElementById("link").innerHTML ='http://' + year + '.' + car + '.domain.net';
  else if(car == "audi" || car == "volvo" || car == "mazda" || car == "nissan" || car == "porsche" || car == "wholesale")
        document.getElementById("link").innerHTML ='http://' + year + '.' + car + '.domain.net/Sales.jsp';
  else if(car == "BMW")
        document.getElementById("link").innerHTML ='http://' + year + '.' + car + '.domain.net/container.jsp';
  else
        document.getElementById("link").innerHTML ='/error-pages/404.html';
}

Answer 1

You should just apppend the generated link to the #link element below :

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

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

Hope this helps.

function generateLink()
{
  var car = document.getElementById('cars').value;
  var year = document.getElementById('years').value;

  if(car  == "fiat" || car == "honda" || car == "mitsu" || car == "acura" || car == "ford")
    link ='http://' + year + '.' + car + '.domain.net';
  else if(car == "audi" || car == "volvo" || car == "mazda" || car == "nissan" || car == "porsche" || car == "wholesale")
    link ='http://' + year + '.' + car + '.domain.net/Sales.jsp';
  else if(car == "BMW")
    link ='http://' + year + '.' + car + '.domain.net/container.jsp';
  else
    link ='/error-pages/404.html';

  return link;
}

function showLink()
{
  var link = generateLink();
  
  document.getElementById("link").href = link;
  document.getElementById("link").innerHTML = link;
}

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

<h1>Ref</h1>
<form name="ref" target="_blank">

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

    <div style="float:left;"><span>PICK A CAR</span><br>
      <select id="cars" onchange="showLink()">
        <option value="acura">Acura</option>
        <option value="wholesale">Wholesale</option>
        <option value="BMW">BMW</option>
        <option value="other">Other</option>
      </select>
    </div>

    <div style="float:right;"><span>PICK A YEAR</span><br>
      <select id="years" onchange="showLink()">
        <option value="2016">2016</option>
        <option value="2015">2015</option>
        <option value="2014">2014</option>
        <option value="2013">2013</option>
      </select>
    </div>

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