javascript功能完成后页面重置

Question

我正在为一个项目做一个简单的HTML页面。 我有一个提交表单。我使用jquery对其进行验证（不确定我是否做对了）。 提交经过验证后，我想将用户的详细信息（名称，密码）保存在一个数组中。 脚本加载时创建数组。

我将函数SubmitUser（）添加到onclick事件中，但是当函数完成并添加用户时，页面将重置，并且变量将重置。

我想知道是否有人可以向我指出我做错了什么。

预先感谢，鲍里斯

这是脚本代码：

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

如果您要覆盖表单的自然提交行为，则可以执行以下操作：

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

Answer 2

您可以尝试将其添加到onclick事件中（在“提交”按钮上）：

onclick="javascript:return SubmitFunction();"

或在表单标签中（对于正常的提交按钮）：

onSubmit="javascript:return SubmitFunction();"

确保函数返回的是真或假。 如果返回false，则页面不会重置/刷新。

Answer 3

当页面刷新或更改时，将重置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）：