Question

我现在已经挣扎了两天了。我被要求建立一种登录页面。它不必提供任何实际的安全性，其目的只是根据用户输入的代码将人们引导到不同的站点。我已经让交换机工作了，它会在通过表单发送适当的号码时触发警报，但是当我给它提供应该更新我的iframe src的号码时，没有任何反应。我完全糊涂了，我已经有相同的代码工作来从按钮按下来更新iframe，但它在这里根本不起作用。任何帮助将不胜感激。

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
body {
	background-image: url(IMAGES/bgTile.png);
	background-repeat: repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}
.pageFrame {
	padding: 0px;
	height: 797px;
	width: 1809px;
	overflow: hidden;
	position: absolute;
	z-index: 1;
}
.loginForm {
	position: absolute;
	top: 45%;
	left: 50%;
	width: 211px;
	height: 74px;
	text-align: center;
	margin-left: -105.5px;
	margin-top: 42px;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	color: #FFFFFF;
	line-height: 21px;
	margin-bottom: 5px;
	z-index: 2;
}
.submitButton {
	margin-top: 5px;
}
</style>
</head>
<script type="text/javascript">
<!--
function runLogin(form) {
	var login = form.dealerID.value;
	switch(login) {
    	case "1":
			loadDealer("0");
        	break;
    	case "2":
        	alert("this");
        	break;
    	case "3":
        	alert("that");
        	break;
   		default:
        	alert("the other thing");;
        	break;
	}
}

var dealershipsArray = [
"NULL_IMAGES/filmstripNull.html"
];

function loadDealer(i) {
	var dealership = document.getElementById("dealerContainer");
	dealership.src = dealershipsArray[i];
}
//-->
</script>

<body>
<iframe id="dealerContainer" class="pageFrame" scrolling="no" frameborder="0" seamless></iframe>
<div class="lutherLogo"></div>
<div id="loginBox" class="loginForm"><form name="myForm" onsubmit="runLogin(this)">
    Please Enter Your Dealer Display Code<br>
      <input type=TEXT value="" name="dealerID">
      <div class="submitButton"><input type=BUTTON value="Submit" name="myButton"></div>
    </form>
</div>
</body>
</html>

＆＃13;

Answer 1

这是工作版本。

我在两个地方做了修复：

从提交处理程序返回false，否则表单提交并自行刷新
提交按钮应为type =“submit”，否则将不会调用处理程序

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Luther Automotive Display Ad Login</title>
<style type="text/css">
body {
  background-image: url(IMAGES/bgTile.png);
  background-repeat: repeat;
  position: absolute;
  width: 100%;
  height: 100%;
}
.pageFrame {
  padding: 0px;
  height: 797px;
  width: 1809px;
  overflow: hidden;
  position: absolute;
  z-index: 1;
}
.lutherLogo {
  position: absolute;
  background-image: url(IMAGES/lutherLogo.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 117px;
  height: 72px;
  top: 45%;
  left: 50%;
  margin-left: -58.5px;
  margin-top: -36px;
}
.loginForm {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 211px;
  height: 74px;
  text-align: center;
  margin-left: -105.5px;
  margin-top: 42px;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  color: #FFFFFF;
  line-height: 21px;
  margin-bottom: 5px;
  z-index: 2;
}
.submitButton {
  margin-top: 5px;
}
</style>
</head>
<script type="text/javascript">
<!--
function runLogin(form) {
  var login = form.dealerID.value;
  switch(login) {
      case "1":
      loadDealer("0");
          break;
      case "2":
          alert("foo");
          break;
      case "3":
          alert("bar");
          break;
      default:
          alert("foo bar");
          break;
  }
  return false;
}

var dealershipsArray = [
"NULL_IMAGES/filmstripNull.html"
];

function loadDealer(i) {
  var dealership = document.getElementById("dealerContainer");
  dealership.src = dealershipsArray[i];
}
//-->
</script>

<body>
<iframe id="dealerContainer" class="pageFrame" scrolling="no" frameborder="0" seamless></iframe>
<div class="lutherLogo"></div>
<div id="loginBox" class="loginForm"><form name="myForm" onsubmit="runLogin(this)">
    Please Enter Your Dealer Display Code<br>
      <input type=TEXT value="" name="dealerID">
      <div class="submitButton"><input type="submit" value="Submit" name="myButton"></div>
    </form>
</div>
</body>
</html>

Javascript - 用switch切换iframe src

1 个答案: