Search code examples
htmlformshrefdatalist

Generating links in HTML

I have a form with two datalist and I would like to generate a link based on the user's selection.

<form>

<input list="Cars">
  <datalist id="Cars">
  <option value="Honda" selected>Honda</option>
  <option value="Mazda">Mazda</option>
  <option value="Ford">Ford</option>
  <option value="Nissan">Nissan</option>
  <option value="Subaru">Subaru</option>
  </datalist>

<input list="Years">
  <datalist id="Years">
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  </datalist>

  <input type="reset">

</form>

For an example, if user chooses Honda and 2017, then the link appears and the address is Honda/2017.net. If the user chooses Subaru and 2015 then the address is Subaru/2015.net and etc.

I can input the different href manually in the code but I am not sure how you make one link change based on selection?

Solution

  • You need Javascript for the so called dynamic html or DHTML. Could be done like this:

    <!DOCTYPE html>
<script type="text/javascript">
function generateLink()
{

  var brand = document.getElementById('carBrand').value;

  var year = document.getElementById('carYear').value;

  document.leform.action =brand + '/' + year + '.html';

  return true;

}
</script>

<form name="leform" onsubmit="return generateLink();">

<input list="Cars" id='carBrand'>
  <datalist id="Cars">
  <option value="Honda" selected>Honda</option>
  <option value="Mazda">Mazda</option>
  <option value="Ford">Ford</option>
  <option value="Nissan">Nissan</option>
  <option value="Subaru">Subaru</option>
  </datalist>

<input list="Years" id='carYear'>
  <datalist id="Years">
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  </datalist>

  <input type="reset">
  <input type="submit">

</form>

    What happens?

    If the submit Button is clicked, the generateLink() function is called. onsubmit="return generateLink();"

    In the generateLink() function the value of the selected option for the car/brand and the year are read from html using the getElementById function.

    Then the extracted values for the brand and the year are used to generate the corresponding link via concatenation of car, a slash, the year and finally the string '.html'.

    The link the form will redirect to is set in the forms action attribute. document.leform.action

    To process data submitted by the form you will need some kind of CGI mechanism: https://en.wikipedia.org/wiki/Common_Gateway_Interface You could use PHP to pass data further to a database for example.

    Hope this helps ^^-d

    PS: You could also want to implement the page that follows the form (action=) in PHP as dynamic content. Using a HTTP GET Request this could look like /show.php?car=Subaru&Year=2016 which would save you from creating an html file per option (car X year = 15 files!). URLs of HTTP GET Requests can be bookmarked like Honda/2017.net. More info on this here: http://php.net/manual/en/reserved.variables.request.php