Jump to content

Populating link with combo box values


Recommended Posts

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 by JJJorgensen
fixed some code
Link to post
Share on other sites

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';
	}

Link to post
Share on other sites

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 by dsonesuk
Link to post
Share on other sites

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. 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...