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）：