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(); 
}