2017-07-20 152 views
0

中的值,從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; 
} 

請幫助。謝謝

+2

嘗試更改提交按鈕以鍵入按鈕 – Simon

回答

0

由於表單正在提交頁面,因此會丟失值。 您必須在表單提交時返回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; 

} 
0

您onclick事件之前發送您的形式。

你應該是:讓一個按鈕,是不是類型=「提交」

onclick事件添加到它(就像你已經有了)

添加ID到表單

並添加到您的scipt(最後):

var form = document.getElementById("form-id"); 
form.submit(); 
相關問題