为什么我的 Javascript 代码不起作用？只有一半有效...

Question

我的网页正确显示了第一个表单，但是当我完成表单填写后，表单应该确认输入然后消失。 Javascript 也应该在屏幕上写一个新的表格，所以下一个表格也可以填写。

<html>

<head>
<title> Week 13 Project - Forms </title>
</head>

<body>




<div id="firstpage">

<form name="personalinfo" onsubmit="nextpage()" method="post">
Name: <input type="text" name="username"> <br>
<br>
Gender: <br>
<input type="radio" name="sex" value="male"> Male <br>
<input type="radio" name="sex" value="female"> Female <br>
<br>
Favorite Color: <br>
<input type="radio" name="color" value="white"> White <br>
<input type="radio" name="color" value="yellow"> Yellow <br>
<input type="radio" name="color" value="orange"> Orange <br>
<input type="radio" name="color" value="red"> Red <br>
<input type="radio" name="color" value="green"> Green <br>
<input type="radio" name="color" value="blue"> Blue <br> 
<input type="radio" name="color" value="other" onfocus="enablesubfield()"> Other: <input type="text" name="othercolor" disabled = true> <br>
<br>
<input type="submit" value="Next Page">
</form>

</div>

<div id="secondpage">

</div>

<script type="text/javascript">
var color = "None";
var sex = "Unknown";
var uname = "";
var datacorrect;
var i;

function createpage() {
    var fpage = document.getElementById("firstpage");
    fpage.innerHTML = ""
    var spage = document.getElementById("secondpage");
    spage.innerHTML = "<form name=\"opinion\" onsubmit=\"thankyoumsg\" method=\"post\">" +
    "What brand of cellphone do you have? <br>" +
    "<input type=\"checkbox\" name=\"cphone\" value=\"Samsung\">" +
    "What is the model name? <br>" +
    "<input type=\"radio\" name=\"model\" value=\"galaxynoteedge\" disabled> Galaxy Note Edge <br>" +
    "<input type=\"radio\" name=\"model\" value=\"galaxynote\" disabled> Galaxy Note <br>" +
    "<input type=\"radio\" name=\"model\" value=\"galaxysedge\" disabled> Galaxy S Edge<br>" +
    "<input type=\"radio\" name=\"model\" value=\"galaxys\" disabled> Galaxy S <br>" +
    "<input type=\"radio\" name=\"model\" value=\"galaxygrandprime\" disabled> Galaxy Grand Prime <br>" +
    "<input type=\"radio\" name=\"model\" value=\"galaxyprevail\" disabled> Galaxy Prevail <br>" +
    "<input type=\"radio\" name=\"model\" value=\"galaxyalpha\" disabled> Galaxy Alpha <br>" +
    "<input type=\"radio\" name=\"model\" value=\"galaxyavant\" disabled> Galaxy Avant<br>" +
    "<input type=\"radio\" name=\"model\" value=\"galaxystratosphere\" disabled> Galaxy Stratosphere <br>" +
    "<input type=\"radio\" name=\"model\" value=\"intensity\" disabled> Intensity <br>" +
    "<input type=\"checkbox\" name=\"cphone\" value=\"apple\">" +
    "<input type=\"radio\" name=\"model\" value=\"iphone\" disabled> Iphone <br>" +
    "<input type=\"checkbox\" name=\"cphone\" value=\"lifesgood\"> LG <br>" +
    "<input type=\"radio\" name=\"model\" value=\"g\" disabled> G(#) <br>" +
    "<input type=\"radio\" name=\"model\" value=\"gflex\" disabled> G Flex(#) <br>" +
    "<input type=\"radio\" name=\"model\" value=\"gvigor\" disabled> G(#) Vigor <br>" +
    "<input type=\"radio\" name=\"model\" value=\"gvista\" disabled> G Vista <br>" +
    "<input type=\"radio\" name=\"model\" value=\"transpyre\" disabled> Transpyre <br>" +
    "<input type=\"radio\" name=\"model\" value=\"optimus\" disabled> Optimus <br>" +
    "<input type=\"radio\" name=\"model\" value=\"omptimusfuel\" disabled> Optimus Fuel <br>" +
    "<input type=\"radio\" name=\"model\" value=\"optimusexceed\" disabled> Optimus Exceed <br>" +
    "<input type=\"radio\" name=\"model\" value=\"omptimuszone\" disabled> Optimus Zone <br>" +
    "<input type=\"radio\" name=\"model\" value=\"access\" disabled> Access <br>" +
    "<input type=\"radio\" name=\"model\" value=\"ultimate\" disabled> Ultimate <br>" +
    "<input type=\"radio\" name=\"model\" value=\"tribute\" disabled> Tribute <br>" +
    "<input type=\"radio\" name=\"model\" value=\"fluid\" disabled> Fluid <br>" +
    "<input type=\"radio\" name=\"model\" value=\"f\" disabled> F(#) <br>" +
    "<input type=\"radio\" name=\"model\" value=\"envoy\" disabled> Envoy <br>" +
    "<input type=\"radio\" name=\"model\" value=\"realm\" disabled> Realm <br>" +
    "<input type=\"radio\" name=\"model\" value=\"true\" disabled> True <br>" +
    "<input type=\"radio\" name=\"model\" value=\"aspire\" disabled> Aspire <br>" +
    "<input type=\"radio\" name=\"model\" value=\"revere\" disabled> Revere <br>" +
    "<input type=\"radio\" name=\"model\" value=\"freedom\" disabled> Freedom <br>" +
    "<input type=\"radio\" name=\"model\" value=\"volt\" disabled> Volt <br>" +
    "<input type=\"radio\" name=\"model\" value=\"Lucid\" disabled> Lucid <br>" +
    "<input type=\"radio\" name=\"model\" value=\"Extravert\" disabled> Extravert <br>" +
    "<input type=\"radio\" name=\"model\" value=\"xpression\" disabled> Xpression <br>";
}

function nextpage() {
uname = document.personalinfo.username.value;
if (document.personalinfo.sex[0].checked) {
sex = "male";
} else if (document.personalinfo.sex[1].checked) {
sex = "female";
}

for (i=0; i < document.personalinfo.color.length; i++) {
    if (document.personalinfo.color[i].checked) {
        color = document.personalinfo.color[i].value;
        break;
    }
}

datacorrect = confirm("Your name is " + uname + ", you are a " + sex + ", and your favorite color is " + color + ". Is this Correct?");

if (datacorrect) {
    createpage();
} else {
    alert("Okay, make your changes and then click the \"Next Page\" button again when you are ready.");
}




}

function enablesubfield() {
    document.personalinfo.othercolor.disabled = false;
}

</script>

</body>
</html>

Answer 1

您对提交页面操作和 js 运行ning 真的很困惑。当你点击提交时，它会向服务器发送请求并重新加载页面。（这意味着你的 js 永远不会运行或者你永远不会看到 onsubmit() 的结果）所以你应该将第二页拆分到另一个文件并在用户单击提交时重定向页面。

为什么我的 Javascript 代码不起作用？只有一半有效...

Why won't my Javascript code work? Only half of it works...

javascript

runtime