when submtting form, i do not want the page to load when pop up appears

Question

i have a form that loads unique pages when submitted based on what the user selects on a particular drop-down. in a particular option in the drop-down i set the pop up screen to show when the form is submitted but this loads the page again and brings the pop up. i need to prevent the page from loading again, please help

 <label>payment plan?</label>
    <select id="mySelect" name="payment-plan">
      <option value="plan.html">day</option>
      <option value="plan1.html">night</option>
      <option value="#msa-popup1">special</option>
      <option value="plan3.html">day and night</option>
      <option value="plan4.html">weekly</option>
      <option value="plan5.html">monthly</option>
      <option value="plan6.html">Yearly</option>
    </select> 

 <!-- pop up -->
    <div id="msa-popup1" class="msa-overlay">
    <div class="msa-popup">
    <h2>For Sale?</h2>
    <a class="msa-close" href="#">×</a>
    <div class="msa-content">
      what plan suits you? <br>
    </div>
    </div>
    </div>
 <!-- pop up ending -->



.msa-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.51);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.msa-overlay:target {
  visibility: visible;
  opacity: 1;
}

.msa-popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 65%;
  position: relative;
  transition: all 5s ease-in-out;
}

.msa-popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Josefin Sans, sans-serif;
}

.msa-popup .msa-close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.msa-popup .msa-close:hover {
  color: #3462FA;
}
.msa-popup .msa-content {
  max-height: 30%;
  overflow: auto;
  font-size:.9em;
  text-align: center;
}




var form = document.getElementById('myForm');
var select = document.getElementById('mySelect')
select.onchange=function(e){
  form.setAttribute('action', e.target.value);
}

Answer 1

Add a submit handler to the form, and if the action value starts with a #, set the window.location.hash manually, and return false; to keep the form from submitting and refreshing the page. Here's a codepen since this won't work within the code sandbox on SO - http://codepen.io/mcoker/pen/MpoYgJ

Seems like you're missing some code, too - there is no form#myForm or submit button, so added those. Please update your post with all of the relevant code.

var form = document.getElementById('myForm');
var select = document.getElementById('mySelect');
select.onchange = function(e) {
  form.setAttribute('action', e.target.value);
}
form.onsubmit = function(e) {
  var action = this.getAttribute('action');
  if (action.substr(0,1) == '#') {
    window.location.hash = this.getAttribute('action');
    return false;
  }
}

.msa-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.51);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.msa-overlay:target {
  visibility: visible;
  opacity: 1;
}

.msa-popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 65%;
  position: relative;
  transition: all 5s ease-in-out;
}

.msa-popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Josefin Sans, sans-serif;
}

.msa-popup .msa-close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.msa-popup .msa-close:hover {
  color: #3462FA;
}

.msa-popup .msa-content {
  max-height: 30%;
  overflow: auto;
  font-size: .9em;
  text-align: center;
}

<form id="myForm">
      <label>payment plan?</label>
      <select id="mySelect" name="payment-plan">
          <option value="plan.html">day</option>
          <option value="plan1.html">night</option>
          <option value="#msa-popup1">special</option>
          <option value="plan3.html">day and night</option>
          <option value="plan4.html">weekly</option>
          <option value="plan5.html">monthly</option>
          <option value="plan6.html">Yearly</option>
        </select>
      <input type="submit">
    </form>

    <!-- pop up -->
    <div id="msa-popup1" class="msa-overlay">
      <div class="msa-popup">
        <h2>For Sale?</h2>
        <a class="msa-close" href="#">×</a>
        <div class="msa-content">
          what plan suits you? <br>
        </div>
      </div>
    </div>
    <!-- pop up ending -->

Answer 2

You can try this here: https://jsfiddle.net/mikeydouglas/7hr5qp3n/10/

 <label>payment plan?</label>
    <select id="mySelect" name="payment-plan">
      <option value="">Select a Plan...</option>
      <option value="plan.html">day</option>
      <option value="plan1.html">night</option>
      <option value="#msa-popup1">special</option>
      <option value="plan3.html">day and night</option>
      <option value="plan4.html">weekly</option>
      <option value="plan5.html">monthly</option>
      <option value="plan6.html">Yearly</option>
    </select> 

 <!-- pop up -->
    <div id="msa-popup1" class="msa-overlay">
    <div class="msa-popup">
    <h2>For Sale?</h2>
    <a class="msa-close" href="#">×</a>
    <div class="msa-content">
      what plan suits you? <br>
    </div>
    </div>
    </div>
 <!-- pop up ending -->
<script>
var mSelect = document.getElementById("mySelect");

mSelect.addEventListener("change", function() {
		// var strUser = e.options[e.selectedIndex].value;
    var popPage = mSelect.options[mSelect.selectedIndex].value;
    alert("The page " +popPage+ "should open next if popups are not disabled")
    window.open(popPage);
    
});
</script>