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

My webpage displays the first form correctly, but when I am finished filling out the form, the form should confirm the input and then disappear. The Javascript should also write a new form to the screen, so the next form can also be filled out.

我的网页正确显示了第一个表单,但是当我填写完表单后,表单应该确认输入然后消失。 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>

1 个解决方案

#1

You are really confused about submit page action and js running. When you click submit it will send request to the server and reload page.( it means your js will never run or you will never see the result of onsubmit() ) so you should split second page to another file and redirect page when user click submit.

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

秒客网

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

1 个解决方案

#1

#1

相关文章