Question

我有一个表单，根据用户在特定下拉列表中选择的内容，在提交时加载唯一页面。在下拉列表的特定选项中，我设置弹出屏幕以显示表单提交的时间，但这会再次加载页面并弹出窗口。我需要阻止页面再次加载，请帮助

console.log(match('123x+123y+456x', 'x'))
console.log(match('123x+123y+456x', 'y'))

function match(str, x) {
  return str.match(new RegExp('\\d+' + x, 'g')).reduce((cur, p) => {
    return cur + parseInt(p.substr(0, p.length - x.length))
  }, 0)
}

Answer 1

向表单添加提交处理程序，如果操作值以#开头，请手动设置window.location.hash，return false;以防止表单提交和刷新页面。这是一个codepen，因为它在SO上的代码沙箱中不起作用 - http://codepen.io/mcoker/pen/MpoYgJ

您似乎也错过了一些代码 - 没有form#myForm或提交按钮，因此添加了这些代码。请使用所有相关代码更新您的帖子。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以在这里试试： https://jsfiddle.net/mikeydouglas/7hr5qp3n/10/

＆＃13;

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

＆＃13;

当提交表单时，我不希望弹出窗口时加载页面

2 个答案: