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

当页面刷新或更改时，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）以加载实际文件，如游戏html的）：

javascript函数完成后页面重置

3 个答案: