javascript函數完成後頁面重置

Question

我正在爲一個項目做一個簡單的html頁面。 我有一個提交form.I使用jquery來驗證它（不知道我是否做正確的）。 驗證提交後，我想將用戶的詳細信息（名稱，密碼）保存在數組中。該數組在腳本加載時創建。

我在onclick事件中添加了函數SubmitUser（），但是當函數完成並添加了用戶時，頁面重置，並且變量被重置。

我不知道有人能指出我做錯了什麼。

由於提前， 鮑里斯

這裏的腳本代碼：

var userArray = new Array(); 
var passArray = new Array(); 
var userNumber = 0; 

//Adding rules for validation 

$(document).ready(function(){ 
    $("#registerForm").validate({ 
    rules: { 
    password: { 
     required: true, 
     minlength: 8 
     } 
    } 
    }); 
}); 

//Add a method to validate 

$(document).ready(function(){ 
    $.validator.addMethod("username", function(value, element) { 
     return this.optional(element) || /^[a-zA-Z]+$/i.test(value); 
    }, "Field must contain only letters"); 
}); 

//The function in question 

function SubmitUser() 
{ 
    if($("#registerForm").valid()) 
    { 
    var user = document.getElementById('username'); 
    userArray[userNumber] = user; 
    userNumber++; 
    alert('Registered'); 
} 

//Function to switch between the different pages in the menu. 
function toggle(id) { 
    if(id=='LoginPage') 
     { 
      document.getElementById(id).style.display = 'block'; 
     document.getElementById('WelcomePage').style.display = 'none'; 
     document.getElementById('RegisterPage').style.display = 'none'; 
     document.getElementById('GamePage').style.display = 'none'; 
     } 
     if(id=='WelcomePage') 
     { 
     document.getElementById(id).style.display = 'block'; 
     document.getElementById('LoginPage').style.display = 'none'; 
     document.getElementById('RegisterPage').style.display = 'none'; 
     document.getElementById('GamePage').style.display = 'none'; 
     } 
     if(id=='RegisterPage') 
     { 
     document.getElementById(id).style.display = 'block'; 
     document.getElementById('WelcomePage').style.display = 'none'; 
     document.getElementById('LoginPage').style.display = 'none'; 
     document.getElementById('GamePage').style.display = 'none'; 
     } 
     if(id=='GamePage') 
     { 
     document.getElementById(id).style.display = 'block'; 
     document.getElementById('WelcomePage').style.display = 'none'; 
     document.getElementById('RegisterPage').style.display = 'none'; 
     document.getElementById('LoginPage').style.display = 'none'; 
     } 
    return false;   
} 

Answer 1

您可以嘗試添加以下內容到onclick事件（在你的 '提交' 按鈕）：

onclick="javascript:return SubmitFunction();" 

或在您的表單標籤（用於正常提交按鈕）：

onSubmit="javascript:return SubmitFunction();" 

確保您的函數返回true或false。如果返回false，頁面將不會重置/刷新。

Answer 2

當頁面刷新或更改時，JavaScript變量被重置......這就是不幸的事實。確保形式是返回false更改頁面阻止它的功能 - 使SubmitUser（）應該是這樣的：

function SubmitUser() 
{ 

if($("#registerForm").valid()) 
    { 

     var user = document.getElementById('username'); 
     userArray[userNumber] = user; 
     userNumber++; 
     alert('Registered'); 


    } 
return false; 
} 

現在，要改變頁面看看使用jQuery.html（Link）加載內容在實際上沒有改變頁面（或jQuery.load（Link）加載一個實際的文件，如games.html）：

Answer 3

如果你想重寫表單的自然提交行爲，你可以這樣做：

$(document).ready(function(){ 
    $('#registerForm').submit(function(e){ 
    e.preventDefault(); // suppress natural submit behavior 
    submitUser(); // your function 
    }); 
}); 

因爲你是已經使用jQuery，你可以大大簡化你的切換代碼。象這樣的每塊：

if(id=='WelcomePage') 
    { 
    document.getElementById(id).style.display = 'block'; 
    document.getElementById('LoginPage').style.display = 'none'; 
    document.getElementById('RegisterPage').style.display = 'none'; 
    document.getElementById('GamePage').style.display = 'none'; 
    } 

...你可以代替做到這一點：

if(id === 'WelcomePage'){ 
    $('#'+id).show(); 
    $('#LoginPage, #RegisterPage, #GamePage').hide(); 
} 

或者更一般地說，處理所有撥動例一行：

function toggle(id){ 
    $('#LoginPage, #RegisterPage, #GamePage, #WelcomePage') 
    .hide() 
    .filter('#'+id).show(); 
}