Populating link with combo box values

[JJJorgensen]

Ok, so I have 4 combo boxes with $Year, $Month, $Type, $extension to create file name of URL.  http://www.myOrg.Org/Articles/$Month + $Year + MyOrg + $Type . $extension

This is what I have (doing only 1 variable - Year).

<form>
  Select the year:
    <select id="mySelect">
      <option>2018</option>
      <option>2017</option>
      <option>2016</option>
      <option>2015</option>
    </select>
	
	Select the month:
    <select id="mySelect1">
      <option>January</option>
      <option>February</option>
      <option>March</option>
      <option>April</option>
	  <option>May</option>
	  <option>June</option>
	  <option>July</option>
	  <option>August</option>
	  <option>September</option>
	  <option>October</option>
	  <option>November</option>
	  <option>December</option>
    </select>
	
	Select Article or Calendar:
    <select id="mySelect2">
      <option>Article</option>
      <option>Calendar</option>

    </select>
	
	Select PDF, Word or Webpage:
    <select id="mySelect3">
      <option>pdf</option>
      <option>doc</option>
	  <option>htm</option>

    </select>
  
  <br><br>
  
  <input type="button" onclick="myFunction()" value="Click Me!">

</form>

<a id="myLink" href="http://www.myOrg.org/Article/April 2018 myOrg.pdf">Current Article</a>
 
<script>
function myFunction() {
		 var obj = document.getElementById("mySelect");
		 var obj1 = document.getElementById("mySelect1");
		 var obj2 = document.getElementById("mySelect2");
		 var obj3 = document.getElementById("mySelect3");
    document.getElementById("myLink").innerHTML = "New Link";
    document.getElementById("myLink").href = "http://www.myOrg.org/Article/" + 
	     obj1.options[obj1.selectedIndex].text + " " + 
		 obj.options[obj.selectedIndex].text + " " + 
		 obj2.options[obj2.selectedIndex].text + "." +
		 obj3.options[obj3.selectedIndex].text;
    document.getElementById("myLink").target = "_blank";
}
</script>

Works but now I want to have some if then statements.

Instead of pdf, doc and htm I want to show PDF File, Word Document and Webpage but when it inserts it into the address is needs to be pdf, doc and htm.

But if Calendar is selected it needs to be docx not doc.  So....kinda stuck at this point.

Edited April 17, 2018 by JJJorgensen
fixed some code

[justsomeguy]

Options have a value attribute that you can use to store the extension while you display something else for the text, you don't need to do that with Javascript.

But if Calendar is selected it needs to be docx not doc.  So....kinda stuck at this point.

Why are you stuck?  The code is hardly different than saying it:

if (val == 'Calendar') {
	  ext = 'docx';
	}

[dsonesuk]

Depends when you want it to change? On selection of 'calendar' Or on button click.

On selection, requires you add onchange event to mySelect2 element, then check value, if true go to mySelect3 value/text directly using index for option element OR a 'for' loop, looping through each option then change when value/text matches. This option means the user will see the text/value of 'docx' for selection.

On button click, the text/value of mySelect2 element is checked, if equals 'calendar', the value/text of mySelect3 is changed, the user will not see change take place.

Note: You should avoid spaces in file names, as this can be problematic, I suggest you use hyphens '-', this is still readable by SEO.

So not a case of simply saying it!

Edited April 18, 2018 by dsonesuk

[JJJorgensen]

Thanks.  It doesn't matter when it changes as long it's before populating the link.  I've decided to try a different approach as the file names are different for Calendar and Article beyond the extension.  So I was thinking that I could do 2 modals.  1 for article and 1 for calendar.  but they're not working.  I'm starting a different topic for that.