Question

单击提交按钮后，从javascript获取的值不会保留在输入区域中。他们只是出现了大约一秒然后就消失了。

html：

<!DOCTYPE html> 
<html> 

<head>
 <title> Assignment Solution on Programming the Internet (Week 4)
 </title>
 <meta charset="utf-8" />

<style>
 textarea {
  width: 400px;
  height: 100px;
}

#d{
    width: 50%;
    margin: 10px;
}
#dd{
    margin: 10px;
}
</style>
<script type = "text/javascript" src="JavaScriptValidation.js"></script>
</head>

<body>
<div  id="d">
<h1>Type a Phrase, Count the Vowels</h1>
<form >
<!-- onsubmit = "return validateJS()" -->

 <fieldset> 
    <legend> </legend>
        <p>Input of >=10 Characters Which Includes Vowels</p>
        <textarea id="t" placeholder="Type your word(s)"></textarea>
 </fieldset> 
 <div id="dd">
    <fieldset>
        <legend> The number of vowels</legend>

<!-- <textarea name="p" id="p" rows = "1" cols = "15"></textarea><br /> -->

        <label for="surname"> Letter "a"</label><br />
        <input name = "a" id = "a" type = "text" size ="20" maxlength = "30" value="@Request["inputText"]"/><br />

        <label for="surname"> Letter "e"</label><br />
        <input name = "surname" id = "e" type = "text" size ="20" maxlength = "30" /><br />

        <label for="surname"> Letter "i"</label><br />
        <input name = "surname" id = "i" type = "text" size ="20" maxlength = "30" /><br />

        <label for="surname"> Letter "o"</label><br />
        <input name = "surname" id = "o" type = "text" size ="20" maxlength = "30" /><br />

        <label for="surname"> Letter "u"</label><br />
        <input name = "surname" id = "u" type = "text" size ="20" maxlength = "30" /><br />
    </fieldset>

    <p><input type = "submit" name = "submit" value = "Count Vowels" onclick="countVowels()" /></p>
 </div>
</form>
</div>

</body>

</html>

javascript：

function validateJS() {
   validateTextBoxes();
   return (validateTextBoxes());
}

function validateTextBoxes() {
var all_input = document.getElementsByTagName("input");
var completed = true;

// for (i = 0; i < all_input.length; i++){
//    if (all_input[i].type === "text"){
//       if (all_input[i].value === ""){
//           alert("You have not filled in "+i+" text box(es)"+u);
//           completed = false;
//         }
//    }
// }
return completed;
}

function countVowels(){
    var z = document.getElementById("t").value;
    var a = z.split("a").length;
    var u = a-1;

    var b = z.split("e").length;
    var c = b-1;

    var d = z.split("i").length;
    var f = d-1;

    var g = z.split("o").length;
    var h = g-1;

    var i = z.split("u").length;
    var j = i-1;

var m = Math.max(u, c, f, h, j);
// document.getElementById("p").value = u;
document.getElementById("a").value = u;
document.getElementById("e").value = c;
document.getElementById("i").value = f;
document.getElementById("o").value = h;
document.getElementById("u").value = j;

if (z.length == 0){
    alert("You have not filled in the text box.");
}

if (m == c){
document.getElementById("b").style.backgroundColor = "red";
alert(l+"no of a: "+u+"   no of e: "+c+"   no of i: "+f+"   no of o: "+h+"   no of u: "+j);
}

alert(l+"no of a: "+u+"   no of e: "+c+"   no of i: "+f+"   no of o: "+h+"   no of u: "+j);

 return false;
}

请帮助。感谢

Answer 1

您丢失了值，因为表单正在提交页面。您必须在表单提交时返回false，以便它不会再次导航。你应该做以下

<form onsubmit="return countVowels();">

正如我在您的代码中看到的那样，您有未处理的异常，这些异常永远不会允许您的代码return false。

我建议

function countVowels() {

    try {
        var z = document.getElementById("t").value;
        var a = z.split("a").length;
        var u = a - 1;

        var b = z.split("e").length;
        var c = b - 1;

        var d = z.split("i").length;
        var f = d - 1;

        var g = z.split("o").length;
        var h = g - 1;

        var i = z.split("u").length;
        var j = i - 1;
        debugger;
        var m = Math.max(u, c, f, h, j);
        // document.getElementById("p").value = u;
        document.getElementById("a").value = u;
        document.getElementById("e").value = c;
        document.getElementById("i").value = f;
        document.getElementById("o").value = h;
        document.getElementById("u").value = j;

        if (z.length == 0) {
            alert("You have not filled in the text box.");
        }

        if (m == c) {
            document.getElementById("b").style.backgroundColor = "red";
            alert(l + "no of a: " + u + "   no of e: " + c + "   no of i: " + f + "   no of o: " + h + "   no of u: " + j);
        }

        alert(l + "no of a: " + u + "   no of e: " + c + "   no of i: " + f + "   no of o: " + h + "   no of u: " + j);
    } catch (e) {
        alert(e)
    }

    return false;

}

Answer 2

您在onclick事件之前发送表单。

你应该做的是：制作一个不是 type =＆＃34;提交＆＃34;

的按钮

向其添加onclick事件（就像您已经拥有的那样）

在表单中添加ID

并将其添加到您的scipt（最后）：

var form = document.getElementById("form-id");
form.submit();

如何永久保持形式的价值观

2 个答案: