當submtting表單，我不希望頁面加載時出現彈出

我有一個表單加載時根據用戶選擇一個特定的下拉提交獨特的頁面。在下拉列表中的特定選項中，我設置彈出屏幕以顯示何時提交表單，但這會再次加載頁面並彈出。我需要阻止該網頁再次加載，請幫助當submtting表單，我不希望頁面加載時出現彈出

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

來源

2017-03-13 Opeyemi Odedeyi

添加'e.preventDefault（）;'你的JavaScript函數可以解決你的問題。 – TheValyreanGroup

它的工作，但其他鏈接不工作了。我想要達到的目標就是讓正常的鏈接像普通網站一樣工作，並且與彈出窗口顯示的特定鏈接無需刷新頁面即可顯示。 –

添加提交處理的形式，如果動作值與#開始，手動設置window.location.hash，並return false;保持形式從提交併刷新頁面。這裏有一個codepen，因爲這將不會使代碼沙箱中工作 - http://codepen.io/mcoker/pen/MpoYgJ

好像你錯過了一些代碼，太 - 沒有form#myForm或提交按鈕，所以添加的那些。請使用所有相關代碼更新您的文章。

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 -->

來源

2017-03-13 02:13:05

@OpeyemiOdedeyi確定更新了我的答案。 –

它工作完美，謝謝。 –

你可以在這裏試試這個： 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() { 
 
\t \t // 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>

來源

2017-03-13 02:27:50

當submtting表單，我不希望頁面加載時出現彈出

回答

相關問題