Modals with combo boxes

JJJorgensen · April 18, 2018

Ok I have 2 types of files I want people to be able to get. Article and Calendar. The differences are 1) the file names are a bit different - Year month Article.ext and Calendar month year.ext and 2) the extensions are different - doc for articles, docx for calendar, htm for article, html for calendar. There's a bunch of files so I'd really not have to go changing the file names. Here's the code I have so far.

	<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>
	
  </head>
  <body>

  <h2>Please Select Star or Calendar.</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Monthly Star</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>

	<form>
  Select the year:
    <select id="mySelect">
      <option>2018</option>
      <option>2017</option>
      <option>2016</option>
      <option>2015</option>
    </select>
	
	<br />
	
	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>
	
	<br />
	
	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!">
	<br />
	
</form>

<a id="myLink" href="http://www.bethlehemvinton.org/Star/April 2017 Bethlehem Star.pdf">Microsoft</a>
 
<script>
function myFunction() {
		 var obj = document.getElementById("mySelect");
		 var obj1 = document.getElementById("mySelect1");
		 var obj3 = document.getElementById("mySelect3");
    document.getElementById("myLink").innerHTML = "New Link";
    document.getElementById("myLink").href = "http://www.bethlehemvinton.org/Star/" + 
	     obj1.options[obj1.selectedIndex].text + " " + 
		 obj.options[obj.selectedIndex].text + " Bethlehem Star." +
		 obj3.options[obj3.selectedIndex].text;
    document.getElementById("myLink").target = "_blank";
}
</script>
	
	
	
	
  </div>

</div>

<!-- Trigger/Open The Modal -->
<button id="myBtn1">Monthly Calendar</button>

<!-- The Modal -->
<div id="myModal1" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>

	<form>
  Select the year:
    <select id="mySelectC">
      <option>2018</option>
      <option>2017</option>
      <option>2016</option>
      <option>2015</option>
    </select>
	
	<br />
	
	Select the month:
    <select id="mySelectC1">
      <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>
	
	<br />
	
	Select PDF, Word or Webpage:
    <select id="mySelectC3">
      <option>pdf</option>
      <option>docx</option>
	  <option>htm</option>

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

<a id="myLinkC" href="http://www.bethlehemvinton.org/Star/April 2017 Bethlehem Star.pdf">Microsoft</a>
 
<script>
function myFunctionC() {
		 var objC = document.getElementById("mySelectC");
		 var objC1 = document.getElementById("mySelectC1");
		 var objC3 = document.getElementById("mySelectC3");
    document.getElementById("myLinkC").innerHTML = "New Link";
    document.getElementById("myLinkC").href = "http://www.bethlehemvinton.org/Star/Calendar for " + 
	     objC1.options[obj1.selectedIndex].text + " " + 
		 objC3.options[obj3.selectedIndex].text;
    document.getElementById("myLinkC").target = "_blank";
}

// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}


// Get the modal
var modal1 = document.getElementById('myModal1');

// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");

// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal1.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
    modal1.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal1) {
        modal1.style.display = "none";
    }
}
</script>
  
  
  

  
  </body>

If I do just 1 modal (the first one) it works fine. But when I add the 2nd it breaks so I'm assuming I've got 2 variables somewhere with the same name.

1) is this the easiest way to handle this?

2) I'd rather not have the link "Current..." showing but if I delete it then I can't make it work. I know I could probably do some scripting to create it on button click but ... well, sad to say I'm running out of time to get this done.

Any help would be appreciated.

dsonesuk · April 18, 2018

You have missed closing div's for second modal, the btn1 still refers to first class 'close' found using index of 0, the 'bin' variable which has onclick event in second modal code, should be 'bin1'.

You also need to reduce number of window.onclick events to 1, and add 'else if' condition to check for modal1 target event.

Edited April 18, 2018 by dsonesuk

Sign In

Modals with combo boxes

Recommended Posts

JJJorgensen

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity